事件传播机制和事件委托

news2024/11/25 0:35:09

DOM事件流

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播.

事件传播机制

层级结构：window -> document -> html -> body -> root ->outer -> inner
ev.stopPropagation：阻止事件的传播(包含捕获和冒泡)，同级的不会阻止
ev.stopImmediatePropagation：也是阻止事件传播，只不过它可以把当前元素绑定的其它方法（同级的），如果还未执行，也不会让其在执行了！

我们通过代码来看一下

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
      );

让我们一起画个图来了解这个事件传播机制

再通过代码来了解一下ev.stopPropagation,ev.stopImmediatePropagation的区别，在上面的代码增加

1.使用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.使用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
      );

事件委托

事件委托：利用事件的传播机制，实现的一套事件绑定处理方案

需求例如：一个容器中，有很多元素都要在点击的时候做一些事情

- - 传统方案：首先获取需要操作的元素，然后逐一做事件绑定。
  - 事件委托：只需要给容器做一个事件绑定（点击内部的任何元素，根据事件的冒泡传播机制，都会让容器的点击事件也触发，我们在这里根据事件源做不同的事情就可以了

最重要的：ev.target：事件源(根据事件源做不同的事情)

 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("哈哈哈");
      });