14.事件代理.md

概念

事件代理，也叫事件委托，就是把一个元素的响应事件委托到父层或者更外层元素上。
事件委托在冒泡阶段完成

应用场景

1、ul列表项，如果给每一个li绑定事件，数据量一多，对内存消耗会非常大。 通过事件委托将事件绑定到父级元素ul上，执行事件时再去匹配目标元素

2、当有动态添加的元素时，需要重新给元素绑定事件

优点

1、减少内存消耗，提高整体性能

2、动态绑定，减少重复工作

封装

function delegate(element, eventType, selector, fn) {
  element.addEventListener(eventType, e => {
    let el = e.target
    while (!el.matches(selector)) {
      if (element === el) {
        el = null
        break
      }
      el = el.parentNode
    }
    el && fn.call(el, e, el)
  })
  return element
}

适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress

focus、blur这些事件没有事件冒泡机制

mousemove、mouseout对性能消耗高，不适合事件委托

事件流