关于事件委托

1. 概念

事件委托也叫事件代理 ， JavaScript 事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个上级元 素上，这样就避免了把事件处理器添加到多个子级元素上。当我们需要对很多元素添加事 件 的时候，可以通过将事件添加到它们的上级元素而将事件委托给上级元素来触发处理函 数。这主要得益于浏览器的事件冒泡机制。事件代理用到了两个在 JavaSciprt 事件中常被 忽 略的特性：事件冒泡以及目标元素。

2. 例子

比如有如下html 结构：

  <ul>       <li>1</li>       <li>2</li>       <li>3</li>       <li>4</li>       <li>5</li>     </ul> 需求：给 5 个 li 标签都添加click事件 ， 点击变色；我们分别获取 li 标签， 然后给 5 个li 标签注册5次click 事件 ； 减少事件监听的数量 ， 有利于优化浏览器性能； 所以我们使用事件委托 ，即让 li 标签的上级元素（祖先节点）代理click 事件 ， 也可以表述 li 标签把click 事件委托给 ul 标签；

3.分析

分析流程 ：事件委托的原理是事件冒泡 ， 当我们点击 li 标签时 ， 浏览器就会检查是否有事件存在 ， 即从当前节点（li）向外冒泡 ，到了ul 节点发现有click 事件 ， 就会执行 ，然后停止冒泡； 一般设置事件委托时 ， 优先给父节点 、 爷爷节点设置 ，不推荐跳的级数太大；就近委托 

4. 事件委托的优缺点

优点： 1、减少事件注册，节省内存。比如 ，在 table 上代理所有 td 的 click 事件，在 ul 上代理所有 li 的 click 事件。

2、简化了 dom 节点更新时，相应事件的更新。比如

3、不用在新添加的 li 上绑定 click 事件。

4、当删除某个 li 时，不用移解绑上面的 click 事件。

缺点： 1、事件委托基于冒泡，对于不冒泡的事件不支持

2、层级过多，冒泡过程中，可能会被某层阻止掉。

3、理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托， 比如在 table 上代理 td，而不是在 document 上代理 td。

4、把所有事件都用代理就可能会出现事件误判。比如，在 document 中代理了所有 button 的 click 事件，另外的人在引用改 js 时，可能不知道，造成单击 button 触发了两个 click 事件

 

标签：委托,关于,代理,li,冒泡,click,事件
来源： https://www.cnblogs.com/zhulongxu/p/16535471.html