事件代理(事件委托)

- 基本概念
事件代理（Event Delegation），又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。

举个通俗的例子
比如一个宿舍的同学同时快递到了，一种方法就是他们一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；
在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件冒泡

前面提到事件委托的原理是DOM元素的事件冒泡，那么事件冒泡是什么呢？

一个事件触发后，会在子元素和父元素之间传播（propagation）。这种传播分成三个阶段

如上图所示，事件传播分成三个阶段：

捕获阶段：从window对象传导到目标节点（上层传到底层）称为“捕获阶段”（capture phase），捕获阶段不会响应任何事件；
目标阶段：在目标节点上触发，称为“目标阶段”
冒泡阶段：从目标节点传导回window对象（从底层传回上层），称为“冒泡阶段”（bubbling phase）。事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

事件委托的优点

【1】可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件就非常棒

<ul id="list"><li>item 1</li><li>item 2</li><li>item 3</li>......<li>item n</li>
</ul>
// ...... 代表中间还有未知数个 li

如上面代码所示，如果给每个li列表项都绑定一个函数，那对内存的消耗是非常大的，因此较好的解决办法就是将li元素的点击事件绑定到它的父元素ul身上，执行事件的时候再去匹配判断目标元素。

【2】可以实现当新增子对象时无需再次对其绑定（动态绑定事件）

假设上述的例子中列表项li就几个，我们给每个列表项都绑定了事件；

在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者删除列表项li元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；

如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。

事件代理(事件委托)相关推荐

JavaScript事件代理和委托
2019独角兽企业重金招聘Python工程师标准>>> 浏览器的事件冒泡当事件发生后,这个事件就要开始传播.例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处 ...
简诉事件代理(事件委托)及其优点
事件代理不给每个子节点单独设置事件监听器,而是设置在其父节点上,然后利用冒泡原理设置每个子节点. 优点 1. 减少内存消耗和 dom 操作,提高性能. 在 JavaScript 中,添加到页面上的事 ...
JS 事件代理和事件委托
目录事件委托的概念理解为什么要用事件委托事件委托的原理: 事件代理(委托)实现总结: 事件委托的概念理解为什么叫事件委托?它还有一个名字叫事件代理. JavaScript高级程序设计上讲:事 ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
使用事件代理实现vue的手风琴组件
1.为什么要使用事件代理? 在项目中要做一个手风琴组件,需求是页面created事件中请求数据,以显示在列表中,加载数据时显示"正在加载",没有数据了就显示"没有更多数据 ...
用例子解释事件模型和事件代理
事件模型事件传播模型在说事件代理之前,先来说一下事件模型. 在浏览器开发的早期,面对事件触发模型的问题,所有的程序员都认为事件触发不应该是直接触发的,而应该在文档中有一个传播的过程,然而事件传播的 ...
事件链、事件代理、页面的渲染过程、style的操作、防抖与节流【DOM(四)】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录目录文章目录 1.事件链(冒泡目标捕获) (1)事件链原理 (2)阻止冒泡和默认事件 2.事件代理(面试笔试题重点) 3. ...
a标签点击事件_DOM事件机制
前言本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 一.DOM事件级别 DOM级别一共可以分为四个级别:DOM0级.DOM1级.D ...
js中的事件委托或是事件代理详解(转载)
起因: 1.这是前端面试的经典题型,要去找工作的小伙伴看看还是有帮助的: 2.其实我一直都没弄明白,写这个一是为了备忘,二是给其他的知其然不知其所以然的小伙伴们以参考: 概述: 那什么叫事件委托呢?它 ...
JS事件委托或者事件代理原理以及实现
事件委托(事件代理)原理:简单的说就是将事件交由别人来执行,就是将子元素的事件通过冒泡的形式交由父元素来执行. 为什么要用时间委托? 在JavaScript中,添加到页面上的事件处理程序数量将直接关系 ...

事件代理(事件委托)

事件冒泡

事件代理(事件委托)相关推荐

最新文章

热门文章