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 之类的事件本身没有事件冒泡机制,
所以无法委托。
-绑定事件委托的次数过多、绑定的层级过高,都会影响性能。
解决方法:
只在必须的地方使用事件委托
尽量减少绑定的层级
减少绑定的次数