事件传播机制/事件委托/事件代理

事件传播机制分为三个阶段:

第一阶段：从window对象传导到目标节点，称为“捕获阶段”
第二阶段：在目标节点上触发，称为“目标阶段”
第三阶段：从目标节点传导回window对象，称为“冒泡阶段”

事件委托（事件代理）本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，父节点可以通过事件对象获取到目标节点，因此可以把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件委托（事件代理）。

好处: 使用事件委托可以不必要为每一个子元素都绑定一个监听事件，这样减少了内存上的消耗。并且使用事件代理还可以实现事件的动态绑定，比如说新增了一个子节点，并不需要单独地为它添加一个监听事件，它绑定的事件会交给父元素中的监听函数来处理

缺点： 事件委托会影响页面性能，主要影响因素有：
1、元素中，绑定事件委托的次数；
2、点击的最底层元素，到绑定事件元素之间的DOM层数；

局限性: focus、blur之类的事件没有事件冒泡机制，所以无法实现事件委托；mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的。

事件传播机制/事件委托/事件代理相关推荐

【Android 事件分发】事件分发源码分析 ( ViewGroup 事件传递机制四 | View 事件传递机制 )
Android 事件分发系列文章目录 [Android 事件分发]事件分发源码分析 ( 驱动层通过中断传递事件 | WindowManagerService 向 View 层传递事件 ) [Andr ...
事件（阻止事件传播、阻止默认事件、事件源对象、事件委托）
阻止事件传播阻止事件传播e.stopPropagation() 谷歌浏览器阻止事件传播(冒泡阶段) var oBig = document.getElementById('big');var oS ...
JS事件冒泡机制以及委托方法,以及vue中的stop
要理解事件冒泡机制,就得先了解事件. 浏览器是事件驱动型的,根据用户的行为触发不同的事件,根据事件执行相应的操作.我们较为熟悉的事件有三大类型:鼠标键盘事件.页面事件.表单相关事件. 鼠标键盘事件:o ...
python事件触发机制_python模拟事件触发机制详解
本文实例为大家分享了python模拟事件触发机制的具体代码,供大家参考,具体内容如下 EventManager.py # -*- encoding: UTF-8 -*- # 系统模块 from que ...
Netty事件传播机制
源码栗子 ch.pipeline().addLast(new InboundHandler1()); ch.pipeline().addLast(new InboundHandler2()); ch ...
Android事件传递机制【Touch事件】
Android中提供了ViewGroup.View.Activity三个等级的Touch事件处理.也就是说,这三个地方都有事件回调方法. 测试DEMO视图结构: <com .orgcent.ev ...
Netty4事件处理传播机制
本节将详细分析Netty事件传播机制,即事件链的实现机制. 本文的行为思路: 详解事件的触发事件事件传播机制思考题:在NIO中是通道是一定需要注册写事件才能通过该通道写数据吗? Netty4的事件 ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
iOS开发事件分发机制—响应链—手势影响
1.提纲什么是iOS的事件分发机制 ? 一个事件UIEvent又是如何响应的? 手势对于响应链有何影响? 2.事件分发机制 2.1.来源以直接触摸事件为例: 当用户一个手指触摸屏幕是会生成一个UI ...

事件传播机制/事件委托/事件代理

事件传播机制/事件委托/事件代理相关推荐

最新文章

热门文章