DOM事件与事件委托

事件是DOM提供的，JS只是提供了addEventListener方法

事件传播

捕获阶段：爷爷=>爸爸=>儿子(从window对象开始找)
目标阶段：找到目标节点触发
冒泡阶段：儿子=>爸爸=>爷爷(一直传到window)

可以自己选择用捕获还是冒泡
addEventListener('click',fn,bool)默认false冒泡，true捕获

target currentTarget

e.target 用户操作的元素
e.currentTarget 监听的函数

<div>
    <span>文字</span>
</div>

用户点击文字，target是span，currentTarget是div

阻止捕获、冒泡

div1.addEventListener('click',(e)=>{
    e.stopPropagation();
},true);//阻止捕获

div1.addEventListener('click',(e)=>{
    e.stopPropagation();
},false);//阻止冒泡

MDN英文文档中，Bubbles是否支持冒泡 Cancelable是否可以取消默认事件

blur & focus 鼠标获得焦点 鼠标失去焦点 mouseleave 鼠标移出元素范围外
浏览器自带事件

事件对象e传递给监听函数，事件结束后，e会被浏览器修改，currentTarget变为null。

事件委托

监听100个按钮的点击事件？
监听这100个按钮的祖先，冒泡阶段判断即可。

监听不存在的元素/动态生成的元素怎么办？
监听祖先，进行判断即可。

子节点的监听函数定义在父节点上面，由父节点监听处理监听子节点的事件。

监听一个或多个元素节点不需要单独设置事件监听，设置到父节点或祖先节点，利用事件冒泡影响子节点

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
}

其他

• stopImmediatePropagation