事件的三个阶段
捕获 -> 目标 -> 冒泡
捕获(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 开发者们需要这些信息。