事件触发过程(事件流)

事件触发过程(事件流)

首先一个点击事件，事件会## 标题从最外层开始发生，到目标源，这个过程叫做事件捕获，事件再会从目标源最深的节点开始发生，一直向上传播，直到document对象，这个过程叫做事件冒泡，整个流程叫做事件流。

事件捕获：
首先一个点击事件，事件会从最外层开始发生，直到最具体的元素，这个过程叫做事件捕获,addEventListener有三个参数，第三个参数为true的时候为事件捕获
通常我们使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false ，useCapture 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性

capture：布尔值，和 useCapture 作用一样
once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive：布尔值，表示永远不会调用 preventDefault

事件冒泡：事件再会从最内层的元素开始发生，一直向上传播，直到document对象，这个过程叫做事件冒泡,onclick有三个参数，第三个参数为true的时候为事件冒泡
阻止事件冒泡：在W3C标准里调用e.stopPropagation()，而在IE下通过设window.event.cancelBubble=true来实现
阻止事件捕获：event.stopImmediatePropagation (),stopImmediatePropagation包含了stopPropagation的功能

注意: 事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')`在这里插入代码片`
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

事件委托(事件代理)

事件委托利用了事件冒泡的原理，就是指定一个事件处理程序，然后去管理某一类型的所有事件
一般来讲,会把一个或者一组元素的事件委托到它的父层或者更外层元素上，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。委托父级代为执行事件
事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。比如有一个div包裹这五个点击事件，可以在div上设置点击事件，如果想要确认你点击是哪一个，可以用e.target去获取
绑定事件的方法:
(1)在dom中直接绑定,在DOM元素上绑定onclick、onmouseover、onmouseout onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup
(2)获取domdocument.getElementById
(3) 使用事件监听绑定 例如:addEventListener() 或 attachEvent() 来绑定事件监听函数
事件委托的局限性:
比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；
mousemove、mouseout这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；
优点:
1.可以大量节省内存占用，减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时，无需再对其进行事件绑定，对于动态内容部分尤为合适
缺点:
1.事件代理的常用应用应该仅限于上述需求，如果把所有事件都用事件代理，可能会出现事件误判。即本不该被触发的事件被绑定上了事件。