Why in separate elements of DOM there is no bubbling of events?

Question

I have a parent <div> with one child <div> in memory - not attached to the current document. I want to call CustomEvent on the child, but listen to this event on the parent. Here is my code:

 var parent = document.createElement('div'); var child = document.createElement('div'); parent.appendChild(child); parent.addEventListener('boom', function(event) { console.log('parent listener', event); // <~ This never runs! }); var event = new CustomEvent('boom', { bubbles: true }); child.dispatchEvent(event); 

This code does not work as expected. The parent event listener never fires. This seems to run counter to the JavaScript event system, as a result of which events exit the target. However, if I change the last two lines of this snippet to the next, the callback works as I would expect from it:

 document.body.appendChild(parent); child.dispatchEvent(event); 

In other words, if I add my fragment as a subtree of the document before sending the event, then the parent event listener works exactly as expected. What for? Is there a way to resolve bubbles when using separate DOM elements?

Answer 1

Why [does the work on individual elements not work]?

To answer your first question, I looked at the W3C "UI Events (formerly DOM Level 3 Events)" spec and did not see anything specifically related to this problem. However, in the event phase section, several things are mentioned that make this behavior reasonable.

As a next step, the event object must complete one or more phases of the events. This specification defines three phases of events: the capture phase, the target phase, and the bubble phase. Event objects populate these phases in this order using partial propagation paths, as defined below. The phase must be skipped if it is not supported , or if the propagation of the event object is stopped. For example, if the Event.bubbles attribute is set to false, the phase of the bubble will be skipped, and if the Event.stopPropagation () event was called before dispatch, all phases should be skipped.

Emphasis is mine.

The specification then lists the phases:

• Capture phase: The event object must propagate through the target ancestors from the window to the target parent . This phase is also known as the capture phase. Event listeners registered for this phase must process the event before it reaches the goal.
• Target phase . The event object must arrive at the event object of the event object. This phase is also known as the target phase. Event listeners registered for this phase should process the event as soon as it reaches the goal. If the type of event indicates that the event should not bubble, the event object should stop after this phase is completed.
• Bubble phase: The event object propagates through the target ancestors in the reverse order, from the target parent to the window . This phase is also known as the bubbling phase. Event listeners registered for this phase must process the event after reaching the goal.

Again, hit me. The spectrum never explicitly causes what happens to the individual elements. Considering that the phases of the target and the bubbles require a transition path from the element to the window, and that there is no path for individual elements, it follows that the phases of the events of the target and the bubble should be skipped, because these paths are not supported.

Is there a way to resolve bubbles when using separate DOM elements?

As far as I can tell, there is nothing built-in that would allow bubbling. You may be able to fake bubbles using some kind of custom code, but for this you will need to check if the element separates each time the event is triggered.

Another thought would be to add elements to the DOM, fire an event, and detach elements. Since I have not tested this, I have no idea if this will work.