Javascript 冒泡、捕获、事件代理

JerryZou 发布于2019-08-23 15:10 / 1824人阅读

摘要：开工荒了两天，赶紧开始为什么写事件代理冒泡捕获，首先冒泡和捕获是事件的核心基础，事件代理原理来自冒泡和捕获。感谢阅读，欢迎吐槽谢谢

2019开工荒了两天，赶紧开始！

为什么写事件代理、冒泡、捕获，首先冒泡和捕获是js事件的核心基础，事件代理原理来自冒泡和捕获。

此文章略过标准浏览器和非标准浏览器的事件流讲解，原因很简单我们现在已经幸福了，已经不考虑IE6、7、8了

直接说现代浏览器事件流，用两张图看看什么是冒泡什么是捕获，其实从字面意思大概能看出一个是向外一个是向内。

标准事件流

1、捕获阶段（先从最外层向内查找）
2、目标阶段（找到事件元（当前点击的dom））
3、冒泡阶段（向上冒泡传递事件）

事件冒泡

先演示下冒泡

事件捕获

看看效果

事件委托

我理解的事件委托的好处有两点
1、减少事件绑定次数
2、可以给未知元素绑定事件（例如动态渲染的List）

其原理就是利用事件冒泡向外传递的特性，下面代码解析一下：
同样忽略低版本浏览器获取当前target兼容性问题

老规矩，看看效果

最后顺便说一下事件对象功能很全的，看下图能获取到很多当前dom的周边，可以搞好多其它的事情。

感谢阅读，欢迎吐槽！谢谢！

GPU云服务器云服务器 Javascript事件代理冒泡事件事件冒泡事件冒泡机制

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101635.html

javascript事件基础知识

摘要：可选，布尔值，指定事件是否在捕获或冒泡阶段执行，默认冒泡。适用范围参数介绍必须，字符串，事件名称。必须，指定事件触发时执行的函数。事件冒泡事件冒泡与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。什么是事件 javascript与HTML之间交互就是通过事件实现的，事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。事件在浏览器中是以对象的形式存在的，即event，...

ad6623 2019-08-26 13:36 评论0 收藏0
DOM事件之捕获、冒泡

摘要：队列的实质是数组。事件在默认执行的过程中是先捕获后冒泡，第三个参数只是让它在什么状态下触发。用方法，绑定的其他事件也将不会执行。 DOM 0 知识点 function print(){ console.log(1) } X.onclick = print; //是对的 Y.onclick = print(); Z.o...

马忠志 2019-08-22 17:27 评论0 收藏0
JavaScript 事件代理和委托

摘要：原文地址事件代理和委托在中这个词经常出现，看字面的意思，代理委托。模型将事件处理流程分为三个阶段一事件捕获阶段，二事件目标阶段，三事件起泡阶段。事件目标当到达目标元素之后，执行目标元素该事件相应的处理函数。原文地址：JavaScript 事件代理和委托在javasript中delegate这个词经常出现，看字面的意思，代理、委托。那么它究竟在什么样的情况下使用？它的原理又是什么？在...

littlelightss 2019-08-22 10:39 评论0 收藏0
JavaScript系列事件

摘要：推荐使用该方式进行事件的注册，可以对同一节点注册多个事件处理函数。当前冒泡流是被大多浏览器支持，因此大多赋为。阻断事件的冒泡流或者事件捕获流。资料推荐红宝书阮一峰事件模型一步，一步前進の一步 showImg(https://segmentfault.com/img/bVbfVGO?w=830&h=328); 事件是文档或者浏览器窗口中发生的一些交互瞬间。JS注册事件处理程序来预订事件...

周国辉 2019-08-23 11:29 评论0 收藏0
javascript 事件代理，原理和问题

摘要：可以用于事件处理函数中阻止冒泡行为。事件代理的原理和问题在我们了解了事件流之后，事件代理的原理就很好理解了，其实就是事件冒泡会触发容器的相关事件并执行监听函数。给注销事件绑定。如果此事件正在执行，会立即停止。有如下 html 片段 11111111111 22222222222 33333333333 要对 li 添加 click 事件。通常做法： var...

SolomonXie 2019-08-19 18:35 评论0 收藏0