DOM 事件

事件捕获和事件冒泡

从外层向内层找监听事件，为事件捕获；从内层向外层找监听事件，为事件冒泡；IE5支持事件冒泡，语法为node.attachEvent('onclick',fn)；网景·支持事件捕获，语法为node.addEventListener('click',fn)；W3C同时支持事件捕获或事件冒泡，语法为node.addEventListener('click',fn,bool)，如果bool为空或falsy，则走事件冒泡。如果bool为ture，则走事件捕获。示意图如下：

函数点击事件在点击事件结束后就会消失，如果想设置延迟触发，需const t =e.currentTargert保存事件；

捕获不可取消或中断，但冒泡可以，e.stopPropagation()可以中断冒泡。有些事件不可取消冒泡，如scroll。

事件委托

使用其他元素监听元素上发生的事件，把一个元素响应事件（click、keydown......）的函数委托到另一个元素，即为事件委托。

一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

event.target用于实现事件委托，返回最初触发该事件元素的引用。事件委托可以节约内存，并监听动态元素，监听目前不存在的事件。

一个封装好的事件委托函数：

function on (eventType,element,selector,fn){
  if(!(element instanceof Element)){
    element=document.querySelector(element)}
  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;
}