DOM event flow has three phases: event capture phase, target phase, and event bubbling phase.

Event capture

When a DOM event is triggered, the browser propagates the event from the root node from the outside in

If the child element is clicked, the event bound to the parent element will be triggered first if the parent element registers the corresponding event via event capture.

The event bubbling

In contrast to event capture, the event bubbling order propagates events from the inside out to the root node.

Both event capture and event bubbling have one common behavior, which is event propagation

Dom standard event flow firing order

Capture before bubble, that is, when a DOM event is triggered, event capture is performed first, and event bubble is performed through event propagation after the event source is captured. Different browsers have different implementations of this. IE10 and below do not support capturing events, so there is no event capturing phase. IE11, Chrome, Firefox, Safari, and other browsers exist at the same time.

Two methods for event binding

addEventListener(event, listener, useCapture)

Parameter definition:

  • Event — (Event name, such as click, without ON)
  • Listener — event listener function,
  • UseCapture — Whether event capture is used for event capture. The default is false, that is, event bubble

AddEventListener is supported in Internet Explorer 11, Chrome, Firefox, Safari, and more.

attachEvent(event,listener)

Parameter definition:

  • Event — (event name, such as onclick, with on),
  • Listener — Event listener function.

AttachEvent is mainly used in Internet Explorer and is supported only in Internet Explorer 10 and later. Internet Explorer 11 deprecated attachEvent

Example 1 :(event bubbling)<div id="parent">The parent element<div id="child">Child elements</div>
</div>
<script type="text/javascript">
    var parent = document.getElementById("parent");
    var child = document.getElementById("child");
    document.body.addEventListener("click".function (e) {
      console.log("body");
    }, false);
    parent.addEventListener("click".function (e) {
      console.log("parent");
    }, false);
    child.addEventListener("click".function (e) {
      console.log("child"); e.stopPropagation(); => This line of code prevents events from bubbling; That is, clicking on the child element does not want to trigger the parent element},false);
</script>
<! Child ->parent->body ->The attached: The w3c method to prevent event bubbles is e.topPropagation (), IE uses e.count Bubble = true to cancel event default behavior. For IE, e.returnValue = false;Copy the code
The instance2(Event capture)// Make the following changes based on example 1
parent.addEventListener("click".function (e) {
  console.log("Click-parent - Event propagation");
}, false);
// Add event capture event code
parent.addEventListener("click".function (e) {
  console.log("Click-parent -- event capture");
}, true);
child.addEventListener("click".function (e) {
  console.log("click-child");
}, false);
// Click the child element to output:
//click-parent-- event capture = "click-child =" click-parent-- event propagation = "click-body"
// When the parent element is clicked:
//click-parent-- event propagation =>click-parent-- event capture =>click-body
// The parent registers the click event via event capture, so it is emitted during the event capture phase, and then to the target phase, the source, which propagates the event. The parent also registers the Click event via bubble, so the bubble event is emitted, and finally to the root node. That's the whole story.
Copy the code