《事件委托》

354 阅读2分钟

1. 什么是事件委托

事件委托就是把事件监听放在祖先元素(如父元素、爷爷元素)上。

举例:
公司有一些员工经常需要收快递,但是大家经常去收快递会耽误公司的业务进度,
于是公司委托前台小姐姐帮忙签收快递,前台收快递会核实收件人签收并通知收件人。

2. 事件委托的优点

  • 节约监听数量

当多个li标签需要添加点击事件时

一般我们可以先找到所以li标签,然后用for循环遍历,给每个li添加点击事件,如果有五个li,那么会有五个相同的函数被创建,内存占用不多,如果有一百个li,一千个,甚至更多,那么对内存消耗非常大。

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  //省略很多个
  <li>item n</li>
</ul>

如果把这个点击事件绑定到它们的父层 ul 上,然后在执行事件的时候再去匹配判断目标元素。当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发。

  • 可以监听动态生成的元素 事件是绑定在父层的,和目标元素的增减是没有关系的,执行的目标元素是在真正响应执行事件函数的过程中去匹配的,如果要监听目前不存在的元素的点击事件,就监听祖先,等执行的时候判断是不是想要监听的元素即可。

3. 事件委托的缺点

- 事件委托是基于事件冒泡机制来说的,如果不支持事件冒泡
  则不能进行事件委托,比如 focus、blur 之类的事件本身没有事件冒泡机制,
  所以无法委托。
  
-绑定事件委托的次数过多、绑定的层级过高,都会影响性能。

解决方法:
  只在必须的地方使用事件委托
  尽量减少绑定的层级
  减少绑定的次数