事件机制

https://juejin.im/post/5aba6a7cf265da23830aebb6

一、事件绑定

• 在dom元素中直接绑定

  <input type="button" value="click" onclick="hello()">
  

• js代码中绑定

  document.getElementById("btn").onclick = function(){ alert("hello world!");}
  

• 绑定事件监听函数

  addEventListener() 或 attachEvent()

二、事件监听

3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段。

（1）事件冒泡：指事件按照从最特定的事件目标到最不特定的事件目标的顺序触发。通俗一点，在html文档中，DOM节点成呈树状结构，从最特点的事件目标即直接发生的DOM节点到最不特点发生的事件目标即html的document对象传递，这个过程称为事件冒泡。 （2）事件捕获：事件从最不精确的document对象开始触发，到最特定最精确的事件目标。简而言之，就是和事件冒泡完全相反的两个动作。 （3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

三、事件委托

事件委托就是利用冒泡的原理，把事件加给父元素或祖先元素上，触发执行效果。事件委托的有点，可以避免多个同类型节点添加同一事件处理，减少内存占用，提高事件的处理速度，优化网页性能。