JavaScript event listening, capturing and bubbling

In front-end development, we often need to monitor certain events. In this way, as long as the event is triggered on the specified element, a callback will be executed to perform related operations.

There are three event listening methods in js, as follows:

element.addEventListener(type, listener[, useCapture]); // IE6~8 does not support

element.attachEvent('on' + type , listener); // IE6~10, IE11 does not support

element['on' + type] = function(){} // All browsers

demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

Parameter meaning:

type: Event type

listener: callback function after the event is triggered

useCapture: whether to use capture. If the value is true, useCapture indicates that the user wants to initiate capture. After the capture is initiated, as long as the event type occurs under the Dom subtree, it will be captured by the event listener first, and then dispatched to the event listener in the Dom subtree. And events that bubble up will not trigger event listeners that initiate capture. Further explanation can be found in the DOM Level 3 Events documentation. The default value of useCapture is false.

addEventListener is a method of registering event listeners introduced by the W3C working group in DOM Level 2; before that, the traditional event listening method was registered through element[’on’ + type]. The main difference between them is that element[’on’ + type] cannot use event capture, and element[’on’ + type] does not support registering multiple event listeners for the same event on the same element. As shown in the example below, after the element is clicked, it will only output 1, but not 0 and 1.

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

However, the addEventListener method is not supported in IE6~8 browsers. So how do you register multiple event listeners for the same event in lower versions of IE? It turns out that IE has introduced the attachEvent() method to support this feature since the IE5.0 series. But unfortunately this method also does not support event capture. And starting from IE 11, this method has been deprecated.

Let’s talk about event capture and bubbling

The W3C specification defines three event phases, which are the capture phase, the target phase, and the bubbling phase. The event object completes these stages in sequence according to the propagation path in the figure above. If a stage is not supported or the propagation of the event object is terminated, then the stage is skipped. For example, if the Event.bubbles property is set to false, the bubbling phase will be skipped. If Event.stopPropagation() is called before the event is dispatched, all stages will be skipped.

Capture phase: Before the event object reaches the event target, the event object must be propagated from the window to the event target through the target's ancestor nodes. This stage is called the capture stage. Event listeners registered at this stage must handle the event before it reaches its target.

Goal phase: The event object reaches its event target. This stage is called the goal stage. Once the event object reaches the event target, the event listener at this stage handles it. If an event object type is marked as not bubbling. Then the corresponding event object will terminate propagation when it reaches this stage.

Bubble stage: The event object propagates from the event target through its ancestor nodes to the window in the opposite direction to the capture stage. This stage is called the bubbling stage. The event listeners registered at this stage will handle the corresponding bubbling events.

After an event completes all stages of its propagation path, its Event.currentTarget will be set to null and Event.eventPhase will be set to 0. All other properties of the Event will not change (including the Event.target property pointing to the event target)