事件传播机制和事件委托

news/2024/12/21 8:22:23/

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.如果单独做的事件绑定中,做了事件传播机制的阻止,那么事件委托中的操作也不会生效


http://www.ppmy.cn/news/955222.html

相关文章

通过ChatGPT实现的ChatPDF,简单的应用落地,让你的文档变成一个智能助手,通过对话的方式快速学习文档内容

目录 先看效果 实现原理 环境安装 应用场景 先看效果 首先,找到一篇论文先,我这里随便找了一篇pdf格式的论文 那么,我现在让他担任一个研究论文的智能助手,当然大家可以自定义自己的prompt 开始问答 可以看到效果很强 实现原…

如何让ChatGPT Plus教你写代码?

1、什么是chatgptPlus?和chatgpt的比较? ChatGPT 是 OpenAI 开发的一种人工智能语言模型,是对原有的 ChatGPT 模型的升级版。与 ChatGPT 相比,ChatGPT 在以下几个方面进行了改进: 更高的生成质量:ChatGPT…

【ChatGPT】ChatGPT使用指南——文本生成

目录 ChatGPT使用指南——文本生成 1 引言 2 文本摘要任务 2.1 什么是文本摘要?

ChatGpt结合Google文档完成自动化写作流程--1

GPT机器人可以通过API连接谷歌文档,让我们进行文字创作和编辑。可以通过它,提供写作思路,创建标题,起草文章介绍和大纲,编写段落,最后总结全文。同时,在一篇文章里,还能帮我们插入图…

如何查询企业诉讼信息?

如何免费查询企业诉讼信息? 企业的司法诉讼信息可以通过中国裁判文书网、中国执行信息公开网、中国庭审公告网去查询。 在这些网站上你可以通过输入企业名称或者注册号来查找相关的法律信息。大多数的法律诉讼信息都会在这些网站上公开,也会有一些特殊…

Websocket备忘录

目录 1.序言 2.后端集成 2.1.pom.xml和集成配置 2.2.行为接口封装 2.3.Spring的自定义消息策略模式 2.3.1.定义接口,描点注解和消息枚举类 2.3.2.策略接口实现类 2.4.2.策略工厂类 2.4.Spring的事件通知机制 2.4.1.自定义事件源 2.4.2.事件监听器 2.4.3…

SpringBoot项目中WEB与Controller的联系--【SB系列之009】

SpringBoot系列文章目录 SpringBoot 的项目编译即报错处理–SB系列之001 —第一部的其它章节可以通过001链接 ———————————————— SpringBoot项目中WEB页面放哪里–【SB系列之008】SpringBoot项目中WEB与Controller的联系–【SB系列之009】SpringBoot项目中MVC…

如何使用Python三方库CCXT

数量技术宅团队在CSDN学院推出了量化投资系列课程 欢迎有兴趣系统学习量化投资的同学,点击下方链接报名: 量化投资速成营(入门课程) Python股票量化投资 Python期货量化投资 Python数字货币量化投资 C语言CTP期货交易系统开…