详解事件冒泡和捕获

事件的三个阶段

捕获 -> 目标 -> 冒泡

捕获(IE8及以下版本不支持)，目标，冒泡 捕获阶段给事件截获提供了可行性。

三种模型

捕获型事件：即事件的发生过程是从最不具体的元素到最具体的元素Netscape 支持捕获型。

冒泡型事件：即事件的发生过程是从最具体的元素到最不具体的元素，IE 则支持冒泡型。

w3c 模型：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段。

统一事件的发生过程

支持 W3C 标准的浏览器在添加事件时用addEventListener(event,fn,useCapture) 方法，基中第 3 个参数useCapture 是一个 Boolean 值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容 W3C 的浏览器 (IE) 用attachEvent() 方法，此方法没有相关设置，不过 IE 的事件模型默认是在事件冒泡时执行的，也就是在 useCapture 等于 false 的时候执行，所以把在处理事件时把 useCapture 设置为 false 是比较安全，也实现兼容浏览器的效果。

在微软的模型中，你必须设置事件的 cancelBubble 的属性为 true

window.event.cancelBubble = true

在 w3c 模型中你必须调用事件的 stopPropagation() 方法

e.stopPropagation()

这会阻止所有冒泡向外传播。而作为跨浏览器解决方案应该这么作：

function doSomething(e){　　if (!e) var e = window.event;     e.cancelBubble = true;     if (e.stopPropagation) e.stopPropagation();}

currentTarget

一个事件用 target 或者是 srcElement 属性用来表示事件究竟发生在哪个目标元素上（即用户最初点击的元素）。非常重要的是，要明白在捕获或者冒泡阶段的目标元素是不变的。

currentTarget 这个属性，它就指向正在处理事件的元素：这恰是我们需要的。很不幸的是微软模型中并没有相似的属性

你也可以使用”this”关键字。在上面的例子中，它相当于正在处理事件的 html 元素，就像 currentTarget。

微软模型的问题

但是当你使用微软事件绑定模型时，this 关键字并不相当于 HTML 元素。联想缺少类似 currentTarget 属性的微软模型。

你无法确切知道哪一个 HTML 元素正在负责处理事件，这是微软事件绑定模型最严重的问题，对我来说，这也是我从不使用它的原因，哪怕是在开发仅供 Windows 下的 IE 的应用程序

我希望能够尽快增加 currentTarget 类似的属性——或者遵循标准 web 开发者们需要这些信息。

参考文献：js之事件冒泡和事件捕获详细介绍&生动详细解释javascript的冒泡和捕获&理解捕获,目标,冒泡三个阶段