Javascript 事件机制原理

一、事件捕获/冒泡

事件捕获：事件捕获会由最先接收到事件的元素然后传向最里边（我们可以将元素想象成一个盒子装一个盒子，而不是一个积木堆积）

事件冒泡：事件冒泡即由最具体的元素（文档嵌套最深节点）接收，然后逐步上传至document

示例： 

我们点击一个span，我可能就想点击一个span，事实上他是先点击document，然后点击事件传递到span的，而且并不会在span停下，span有子元素就会继续往下，最后会依次回传至document。

DOM事件：web端Dom事件分为三类：一类：dom节点通过onclick绑定事件，通过dom.onclick = null来解绑事件；二类：dom节点通过addEventListener()方法注册事件，通过removeEventListener()来注销事件；三类：css中设置ui事件，比如：hover事件，焦点事件(input框)等；

二、DOM2级事件流

1、事件捕获阶段：事件从window对象自上而下向目标节点传播的阶段

2、处于目标阶段：真正的目标节点正在处理事件的阶段

3、事件冒泡阶段：事件从目标节点自下而上向window对象传播的阶段

示例：