JavaScript event monitoring and capturing and bubbling

In front-end development, we often need to listen to some events. In this way, as long as the event is triggered on the specified element, a callback is executed to perform related operations. In js, there are three event listening Methods: In front-end development, we often need to listen to some events. In this way, as long as the event is triggered on the specified element, a callback is executed to perform related operations.

In js, there are three event listening methods:

Element. addEventListener (type, listener [, useCapture]); // IE6 ~ 8 not supported

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 description:

Type: Event type

Listener: the callback function after the event is triggered.

UseCapture: whether to use capture. If the value is true, useCapture indicates that you want to initiate a capture. After the capture is initiated, the event listener first captures the event type as long as the event type occurs under the Dom sub-tree and then distributes it to the event listener in the Dom sub-tree. In addition, events that bubble up do not trigger event listeners that initiate capture. For more information, see the DOM Level 3 Events document. The default value of useCapture is false.

AddEventListener is a method introduced by the W3C Working Group at DOM Level 2 to register event listeners. Before that, the traditional event listening method is registered using element ['on' + type. The main difference between them is that the element ['on' + type] method cannot use event capture, element ['on' + type] does not support registering multiple event listeners for the same event of the same element. As shown in the following example, after an element is clicked, only 1 is output, instead of 0 and 1.

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

However, the addEventListener method is in IE6 ~ 8 is not supported in browsers. In earlier versions of IE, how does one register multiple event listeners for the same event? Originally, the attachEvent () method was introduced to support this feature from the IE5.0 series. Unfortunately, this method does not support event capture. This method has been discarded since IE 11.

Event capture and bubbling

The W3C Specification defines three event phases, namely the capture phase, the target phase, and the bubble phase. The event object completes these stages in sequence based on the Propagation Path. If a stage is not supported or the propagation of event objects is terminated, this stage will be skipped. For example, if the Event. bubbles attribute is set to false, the bubble stage is skipped. If Event. stopPropagation () is called before the Event is distributed, all stages are skipped.

Capture phase: before the event object reaches the event target, the event object must be transmitted from the window through the target's ancestor node to the event target. This stage is called the capture stage. The event listener registered at this stage must process the event before it reaches its target.

Target stage: the event object reaches the event target. This stage is called the target stage. Once the event object reaches the event target, the event listener at this stage must process it. If an event object type is marked as non-bubble. The corresponding event object will terminate the propagation when it reaches this stage.

Bubble stage: the event object is propagated from the event target to the window in the opposite direction of the capture stage through its ancestor node. This stage is called the bubble stage. The event listener registered at this stage processes the corresponding bubble events.

After an Event completes the propagation path of all stages, its Event. currentTarget is set to null and Event. eventPhase is set to 0. All other events will not be changed (packet loss refers to the event.tar get attribute of the event target)