JS event propagation mechanism and event delegation

DOM event flow

• There are three stages in DOM event flow: event capture stage, target stage, and event bubbling stage.
• Event capturing: The popular understanding is that when the mouse clicks or triggers a DOM event, the browser will propagate the event from the outside to the inside starting from the root node, that is, if a child element is clicked, if the parent element is registered through event capture If the corresponding event is detected, the event bound to the parent element will be triggered first.
• Event bubbling (dubbed bubbling): Just the opposite of event capturing, the event bubbling sequence propagates events from inside to outside until the root node.
• Whether it is event capturing or event bubbling, they all have a common behavior, which is event propagation.

event propagation mechanism

1. Hierarchical structure: window -> document -> html -> body -> root ->outer -> inner
2. ev.stopPropagation: prevents event propagation (including capturing and bubbling), peers will not prevent it
3. ev.stopImmediatePropagation: It also prevents event propagation, but it can bind other methods (siblings) of the current element. If it has not been executed, it will not be executed!

Let’s take a look through the code

const html = document.documentElement,
        body = html.body,
        root = document.querySelector("#root"),
        outer = document.querySelector("#outer"),
        inner = document.querySelector("#inner");

      //事件传播机制

      root.addEventListener(
        "click",
        function (ev) {
          //   ev.stopPropagation(); //也能阻止捕获
          console.log("root 捕获");
        },
        true
      );

      root.addEventListener(
        "click",
        function () {
          console.log("root 冒泡");
        },
        false
      );

      outer.addEventListener(
        "click",
        function () {
          console.log("outer 捕获");
        },
        true
      );

      outer.addEventListener(
        "click",
        function () {
          console.log("outer 冒泡");
        },
        false
      );

      inner.addEventListener(
        "click",
        function () {
          console.log("inner 捕获");
        },
        true
      );
      inner.addEventListener(
        "click",
        function (ev) {
          console.log("inner 冒泡0");
        },
        false
      );

Let us draw a diagram to understand this event propagation mechanism

Let’s learn about the difference between ev.stopPropagation and ev.stopImmediatePropagation through the code. Add to the above code

1. Use ev.stopImmediatePropagation

 inner.addEventListener(
        "click",
        function (ev) {
          //   ev.stopPropagation(); //阻止冒泡传播
          ev.stopImmediatePropagation(); //立即阻止冒泡传播 往下也不继续 往上也不继续执行了
          console.log("inner 冒泡1");
        },
        false
      );
      inner.addEventListener(
        "click",
        function (ev) {
          console.log("inner 冒泡2");
        },
        false
      );

2. Use ev.stopPropagation

inner.addEventListener(
        "click",
        function (ev) {
          ev.stopPropagation(); //阻止冒泡传播
          // ev.stopImmediatePropagation(); //立即阻止冒泡传播 往下也不继续 往上也不继续执行了
          console.log("inner 冒泡1");
        },
        false
      );
      inner.addEventListener(
        "click",
        function (ev) {
          console.log("inner 冒泡2");
        },
        false
      );

event delegation

Event delegation: a set of event binding processing solutions implemented using the event propagation mechanism

Requirement example: In a container, there are many elements that need to do something when clicked.

• • • Traditional solution: First obtain the elements that need to be operated, and then bind the events one by one.
    • Event delegation: You only need to make an event binding for the container (click any element inside, and according to the bubbling propagation mechanism of the event, the click event of the container will also be triggered. We can do different things here according to the event source.

The most important: ev.target: event source (do different things based on the event source)

 const body = document.body;
      body.addEventListener("click", function (ev) {
        //ev.target：事件源，（点击的是谁就是谁）
        console.log("ev", ev.target);
        let target = ev.target,
          id = target.id;
        if (id === "root") {
          console.log("root");
          return;
        }
        if (id === "outer") {
          console.log("outer");
          return;
        }
        if (id === "inner") {
          console.log("inner");
          return;
        }
        //如果以上都不是，我们处理别的逻辑
        console.log("哈哈哈");
      });

Advantages and Disadvantages of Event Delegation

Advantage:

1. Improve the performance of JS code execution and centralize all processing logic! !

2. Certain requirements must be processed based on event delegation. For example: except clicking on XXX, clicking on anything else will display the corresponding processing logic.

3. Bind events to dynamically bound elements

Disadvantages:

1. The current operation event must support the bubbling propagation mechanism (for example: events such as mouseenter/mouseleave do not have a bubbling propagation mechanism)

2. If the event propagation mechanism is blocked in separate event binding, the operations in the event delegation will not take effect.