DOM 事件模型

一、DOM事件模型

当一个HTML元素触发一个事件时，该事件会在元素结点与根结点之间的路径传播。传播按顺序分为三个阶段：捕获阶段、目标阶段、冒泡阶段，这个传播过程就是 DOM 事件流。
从外向内找监听函数，叫事件捕获；由网景提出
从内向外找监听函数，叫事件冒泡；由IE提出

IE5:div.attachEvent('click', fn) //冒泡阶段
网景：div.addEventListener('click', fn)//捕获阶段
W3C:div.addEventListener('click', fn,bool) //通过布尔值判断是捕获阶段还是冒泡阶段调用函数

通过W3C发布的标准，将捕获和冒泡合并，交由开发者自由选择使用捕获还是冒泡
e对象在冒泡阶段或者捕获阶段发现有监听函数就将其调用并提供事件信息；

二、 DOM 事件机制

DOM 的事件操作（监听和触发），都定义在EventTarget接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。

EventTarget.addEventListener()

EventTarget.addEventListener()用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。

target.addEventListener(type, listener[, useCapture]);
该方法接受三个参数。

type：事件名称，大小写敏感。
listener：监听函数。事件发生时，会调用该监听函数。
useCapture：布尔值，表示监听函数是否在捕获阶段（capture）触发，默认为false（监听函数只在冒泡阶段被触发）。

取消事件绑定

使用removeEventListener
使用detachEvent

取消冒泡 — — 捕获不可取消，但冒泡可以

e.stopPropagation()可中断冒泡，浏览器不再向上走

一般用于封装某些独立的组件

Bubbles ——该事件是否冒泡，所有冒泡都可取消
Cancelable ——是否支持开发者阻止默认事件

target和currentTarget

// 当用户点击文字的时候
<div>                  // e.currentTarget就是div
  <span>文字</span>    // e.target就是span
</div>

e.target: 用户操作的元素
e.currentTarget: 程序员监听的元素
this为e.currentTarget, 是不推荐的用法，因为this指向不确定