前端小记

# 事件委托详解 (Delegate)

# 定义

事件委托又称为事件代理

事件委托 就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件

# 为什么要使用事件委托

例如html中有一个list，当其中的li标签受到点击的时候，我们需要alert(1)，如果按照常规写法

const lists = document.querySelectorAll('li')
lists.forEach(list => {
  list.addEventlistener('click', () => alert('1'))
})
1
2
3
4

这里有一个很明显的问题，当我们有100个li标签时，我们需要绑定100个监听事件，假如我们有10000个li标签的时候，性能的影响就会显露出来，这时候我们就可以使用事件委托来优化性能

# 如何使用事件委托

我们可以在li的父标签ul上增加监听事件，即可监听li这一类子标签的点击事件

const ul = document.querySelector('ul')
function checkClick(e) {
  let target = e.target || e.srcElement // e.srcElement 兼容IE
  if(target.nodeName === 'LI') {
    alert(1)
  }
}
ul.addEventListener('click', checkClick)
1
2
3
4
5
6
7
8

这样就可以通过注册一个事件监听，来实现所有子标签li的点击事件监听

# 不适合使用事件委托的情况

事件onmouseover, onmouseout在经过其绑定元素的子元素时也会触发，所以要计算当前指针的位置，比较复杂，不适合使用事件委托

# 适合使用事件委托的情况

click，mousedown，mouseup，keydown，keyup，keypress

← 事件循环 →