《DOM 事件模型》

1. DOM事件

事件是用户或者浏览器自己执行的某种动作，是文档或浏览器发生的一些交互瞬间，比如点击（click）按钮等，这里的click就是事件的名称。 一个事件发生后，会在子元素及父元素之间进行传播（propagation），这种传播分为三个阶段。 DOM事件传播的三个阶段：捕获阶段，目标阶段，冒泡阶段

1. 捕获阶段：先由文档的根节点 document 往事件触发对象，从外向内捕获事件对象。
2. 定位目标：寻找到目标事件位置（事发地），触发事件。
3. 冒泡阶段：再从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象。 DOM 的事件操作（监听和触发），都定义在EventTarget接口。 该接口主要提供三个实例方法。

• addEventListener：绑定事件的监听函数
• removeEventListener：移除事件的监听函数
• dispatchEvent：触发事件

2. 捕获和冒泡

<div class="grandfa">
    <div class="fa">
    <div class="son">文本</div>
    </div>
</div>

• 事件捕获，是指按 爷爷=>爸爸=>儿子 的顺序看有没有函数监听
• 事件冒泡，是指按 儿子=>爸爸=>爷爷 的顺序看有没有函数监听 W3C规定：x.addEventListener('click', fn, bool), 如果bool不传或为falsy, 则fn使用事件冒泡, 反之则fn使用事件捕获.

W3C的事件模型： 先捕获再冒泡

一个特例： 当仅有一个div被监听时(不考虑父子关系),先捕获还是先冒泡取决于谁先被监听

3. target和currentTarget

Event接口的只读属性 currentTarget 表示的，标识是当事件沿着 DOM 触发时事件的当前目标，它总是指向事件绑定的元素。 而 Event.target则是事件触发的元素。

区别：

e.target-用户操作的元素
e.currentTarget-程序员监听的元素

举例：

div>span{文字}  用户点击文字
e.target就是span
e.currentTarget就是div