ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【无标题】

2021-12-26 14:00:56  阅读:74  来源: 互联网

标签:DOM 捕获 元素 无标题 事件 节点 冒泡


JS浏览器事件

浏览器事件机制讲的也是 JavaScript 事件流,JS事件执行的整个过程分为三个阶段:

事件捕获阶段
事件目标处理函数
事件冒泡
在这里插入图片描述
1.捕获(Capture)阶段是事件对象 event object 从 window 派发到目标对象父级的过程。
2.目标(Target)阶段是事件对象派发到目标元素时的阶段,如果事件类型指示其不冒泡,那事件传播将在此阶段终止。
3.冒泡(Bubbling)阶段 和捕获相反,是以目标对象父级到 window 的过程。
在任一阶段调用stopPropagation都将终止本次事件的传播。

事件捕获
当初发一个节点的事件时,会从DOM根节点开始,依次触发其祖先节点的同类型事件,直到当前节点自身。事件捕获和事件冒泡是相反的,也就是说,当用户触发了一个事件的时候,这个事件是从DOM树的最上层开始触发一直到捕获到事件源。

事件冒泡
假如用户单击了一个元素,该元素拥有一个click事件,那么同样的事件也将会被它的祖先触发,这个事件从该元素开始一直冒泡到DOM树的最上层,这一过程称为事件冒泡。

在这里插入图片描述
事件委托
利用冒泡机制,我们就可以进行事件委托了。那么什么是事件委托(事件代理)呢?通俗的讲,事件就是onclick,onmouseover,onmouseout等,委托呢,就是让别人来做,这个事件本来是加在某些元素上的,然而你却加到别人身上来做,完成这个事件。它的原理就是利用冒泡的原理,把事件加到父级上,监听子级的事件,来触发执行效果。

事件委托的作用

支持为同一个DOM元素注册多个同类型事件
可将事件分成事件捕获和事件冒泡机制
提高性能:每一个函数都会占用内存空间,只需添加一个事件处理程序代理所有事件,所占用的内存空间更少
动态监听:使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件

标签:DOM,捕获,元素,无标题,事件,节点,冒泡
来源: https://blog.csdn.net/weixin_51917049/article/details/122154701

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有