1、事件委托利用事件冒泡,就是外层一个事件的处理程序,就可以管理一类型的所有事件。
例子:
<ul id = "box">
<li id="1" >序列1</li>
<li id="2" >序列2</li>
<li id="3" >序列3</li>
</ul>
处理方式1: 给每个<li></li>加上一个onclick事件。
处理方式2: 给<li></li>的相对外层加上一个事件,由于<ul></ul>的点击事件,<li></li>属于<ul></ul>所以没有必要所有的都加上onclick事件。
const box = document.querySelector('#box');
box.onclick = () => { alert(“123”) };
2、事件委托好处:
- 每个函数声明需要占用内存,事件委托节约内存。
- 内存多了性能差,所以事件委托节约性能。
- 减少Dom的访问次数,会加快页面的交互时间。
3、事件委托常用事件:
click、mousedown、mouseup、keydown、keypress、mouseover、mouseout