是什么

事件委托（又名事件代理）:把一个元素的响应事件放到另外一个元素上（如父元素）

怎么用

列表

<ul id="list">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  ......
  <li>item n</li>
</ul>

//bad
const lis = document.getElementsByTagName("li")
// 循环遍历绑定事件
for (let i = 0; i < lis.length; i++) {
    lis[i].onclick = function(e){
        console.log(e.target.innerHTML)
    }
}
// good
document.getElementById('list').addEventListener('click', function (e) {
  // 兼容性处理
  var event = e || window.event;
  var target = event.target || event.srcElement;
  // 判断是否匹配目标元素
  if (target.nodeName.toLocaleLowerCase === 'li') {
      console.log('the content is: ', target.innerHTML);
  }
});

优点

• 减少页面的内存，提升性能
• 动态绑定，减少重复工作

委托事件

• 适合：click， mousedown， mouseup， keydown， keyup ， keypress
• 不适合：
  • focus，blur 没有冒泡
  • mousemove mouseout 性能要求高