[js电子榨菜]事件传递机制 event propogate

(这篇文章可能图片会少一些,理解一下),毕竟这个币设备实在不太灵敏

其实在vue操作事件的时候,我们经常可以了解到一个"修饰"stop,官方给出的解释是阻止事件冒泡传递。冒泡传递其实值得是事件传递过程中的一个阶段(bubble)。

接下来将从js原生的角度讲解事件传递机制

1.propogate's phases

事件传播从生成,到对应dom全部执行对应的回调函数结束,一共是经过三个阶段

(1)capture

捕获阶段:捕获的意思是dom元素监听这个事件是否发生

事件最早创建以后,是在根dom上被优先监听到这个事件的存在,然后在dom树中完成向下传递

(2)target

目标阶段(我不知道这个翻译是否合理,总感觉有点怪)

目标阶段,事件自上而下传递,传递到发出该事件的dom元素以后,停止向下传递

(3)bubble

冒泡阶段,从targetDom开始,沿着dom树向上传递这个事件

对与target的双亲或者祖先来说,如果他们设置了对某个事件的监听,就会触发对应的回调函数

2.practive situation

可能这样有点难以理解,这样,我据个例子

复制代码
<div>  <button/>

</div>

比如说我们在div上放置一个点击事件的监听

然后我们点击一下button,首先会触发button的函数,然后才是div的回调

在capture阶段,就算事件确确实实经过了div(根据dom树的结构),也不会在这个阶段完成触发操作。而是在冒泡阶段,才会最终触发

而target则为一个中转点

3.一个可能要注意一些的问题

为什么要有target阶段:我的想法是为了严格去分"自上而下"和"自下而上"两个阶段,因为这两个阶段承担了完全不同的功能。有些时候我们会把target作为bubble的一部分,就是因为回调函数都是在这个阶段内进行执行的

如何判断当前是不是发起事件的dom元素?

在js里,事件同样是一个对象,event object。它会保留的一个属性就是哪个dom元素启动了这个事件。就可以判断何时进行target阶段

4.小结

捕获阶段是自上而下的过程,事件从文档根节点向下传播,依次经过目标元素的祖先元素,直到达到目标元素。在捕获阶段,事件的处理程序可以在祖先元素上被触发。

而冒泡阶段是自下而上的过程,事件从目标元素向上传播,依次经过目标元素的父元素、祖先元素,直到达到文档根节点。在冒泡阶段,事件的处理程序可以在目标元素的父元素和祖先元素上被触发。

在捕获阶段和冒泡阶段,如果在某个元素上绑定了相同类型的事件监听器,它们会按照它们在 DOM 中的顺序被触发。也就是说,先绑定的事件监听器会先被触发,后绑定的事件监听器会后被触发。

相关推荐
CDN3609 分钟前
高防切换后网站打不开?DNS 解析与回源路径故障排查
前端·网络·数据库
信也科技布道师19 分钟前
把7个页面变成1段对话:AI如何重构借款流程
前端·人工智能·重构·架构·交互·用户体验
276695829235 分钟前
携程旅行 token1005
java·linux·前端·javascript·携程旅行·token1005·携程酒店
zopple38 分钟前
PHP与Vue.js:前后端开发的完美搭档
开发语言·vue.js·php
freewlt41 分钟前
Cursor与AI编程工具崛起:前端工程师的能力模型重构与职业生存策略
前端·重构·ai编程
墨雪遗痕1 小时前
工程架构认知(三):从传统Web系统到AI大模型驱动系统
前端·人工智能·架构
C澒1 小时前
AI 生码 - PRD2CODE:Schema2PRD 全流程设计与实现
前端·ai编程
掘金者阿豪1 小时前
微信图片已过期或已被清理,真的找不回了吗?完整自救指南
前端·后端
颜酱1 小时前
从 DeepSeek 文本对话到流式输出
前端·javascript·人工智能
Ulyanov1 小时前
打造现代化雷达电子对抗仿真界面 第二篇:雷达电子对抗仿真系统核心功能实现
前端·python·信息可视化·数据可视化·系统仿真·雷达电子战