事件代理（事件委托）

事件代理又称为事件委托，一般作用于当多个相同元素需要使用同一个事件时，可以委托给他们的同一父元素上进行处理，这样会优化性能，不用给每个子元素都注册一遍事件，节省代码空间，减少代码冗余，减少事件注册；

事件委托的原理是DOM元素的事件冒泡

事件冒泡

事件冒泡是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件

事件冒泡又分为三个阶段：
1、捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”，捕获阶段不会响应任何事件；
2、目标阶段：在目标节点上触发称为“目标阶段”；
3、冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”；

事件委托原理就是利用事件冒泡机制把里层所需要响应的事件绑定到外层

事件代理（事件委托）、事件冒泡相关推荐

JavaScript事件代理和委托
2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...
javascript 事件冒泡和事件代理
事件冒泡简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素. 这可能会带 ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
【DOM系列】你真的理解事件委托（事件代理）吗？
目录 1. 基本概念 1.1 原理 2. 事件冒泡和事件捕获代码演示 3. addEventListener的第三个参数 4. 事件委托阶段案例 4.1 事件冒泡案例 4.2 事件捕获案例 5. 经 ...
JavaScript系列—简述JS中的事件委托和事件代理
JS中的事件委托和事件代理什么是事件委托? 事件委托还有一个名字叫事件代理,JS高程上讲:事件委托就是利用事件冒泡,只制定一个时间处理程序,就可以管理某一类型的所有事件.我用取快递来解释这个现象: ...
使用事件代理实现vue的手风琴组件
1.为什么要使用事件代理? 在项目中要做一个手风琴组件,需求是页面created事件中请求数据,以显示在列表中,加载数据时显示"正在加载",没有数据了就显示"没有更多数据 ...
JS手动实现事件代理
简介由于事件在冒泡阶段向上传播到父节点,因此可以把子节点监听的事件在父节点的监听,由父节点的监听函数统一处理多个子元素的的事件,这种方法就叫做事件的代理,处理如下: var ul = documen ...
react组件事件代理的原理
React的事件系统和浏览器事件系统相比,主要增加了两个特性:事件代理.和事件自动绑定. 1.事件代理区别于浏览器事件处理方式,React并未将事件处理函数与对应的DOM节点直接关联,而是在顶层使用 ...
浏览器事件代理机制原理？
关于浏览器事件代理弄明白浏览器事件代理事前,先了解下事件.事件流. 一,事件 HTML DOM 允许 JavaScript 对 HTML 事件作出反应.即操作对应HTML元素时,会触发相应事件(包含 ...

事件代理（事件委托）、事件冒泡

事件代理（事件委托）

事件冒泡

事件代理（事件委托）、事件冒泡相关推荐

最新文章

热门文章