事件传播机制和事件委托

DOM事件流

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

事件传播机制

  1. 层级结构:window -> document -> html -> body -> root ->outer -> inner
  2. ev.stopPropagation:阻止事件的传播(包含捕获和冒泡),同级的不会阻止
  3. 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("哈哈哈");
      });

事件委托的优劣势

优势:

1.提高JS代码运行的性能,并且把处理的逻辑都集中在一起!!

2.某些需求必须基于事件委托处理,例如:除了点击XXX外,点击其余的任何东西,都显示对应的处理逻辑

3.给动态绑定的元素做事件绑定

劣势:

1.当前操作事件必须支持冒泡传播机制才可以(例如:mouseenter/mouseleave等事件是没有冒泡传播机制的)

2.如果单独做的事件绑定中,做了事件传播机制的阻止,那么事件委托中的操作也不会生效

相关推荐
gnip1 天前
Jst执行上下文栈和变量对象
前端·javascript
拉不动的猪1 天前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do1 天前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
DT——1 天前
前端登录鉴权详解
前端·javascript
界面开发小八哥1 天前
数据可视化图表库LightningChart JS v8.0上线:全新图例系统 + 数据集重构
javascript·信息可视化·数据可视化·lightningchart
烛阴1 天前
【TS 设计模式完全指南】从“入门”到“劝退”,彻底搞懂单例模式
javascript·设计模式·typescript
正义的大古1 天前
OpenLayers常用控件 -- 章节六:全屏控件教程
前端·javascript·html·openlayers
正义的大古1 天前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
雲墨款哥1 天前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程1 天前
深入JS(一):手写 Promise
前端·javascript