标准的事件绑定函数是 addEventListener 函数,而 IE 浏览器(IE9 以下)则是用 attachEvent。 这两个函数中的事件处理函数都可以传入一个 event 参数,就是我们所说的事件对象,本文就来总结一下两者的区别。

获取事件的目标

事件的目标就是指当前触发事件的元素。

有如下的 HTML:

1
2
3
<body id="myBody">
<button id="myButton">click</button>
</body>

标准事件对象使用 eventtarget 属性获取事件目标。

1
2
3
4
var btn = document.getElementById('myButton');
btn.addEventListener("click", function(event) {
alert(event.target.id); // myButton
});

IE 事件对象使用 eventsrcElement 属性获取事件目标。

1
2
3
4
var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
alert(event.srcElement.id); // myButton
});

另外,标准事件对象还有一个 currentTarget 属性,该属性在事件处理函数当中始终与 this 相等,而 target 属性则是指向事件触发的具体目标。

1
2
3
4
5
document.body.addEventListener("click", function (event) {
alert(event.currentTarget.id); // myBody
alert(event.target.id); // myButton
alert(this.id); // myBody
});

取消事件默认行为

有如下的 HTML:

1
2
3
<body>
<a id="myLink" href="http://blog.acwong.org">acwong blog</a>
</body>

标准事件对象使用 eventpreventDefault() 方法取消事件默认行为。

1
2
3
4
5
var myLink = document.getElementById('myLink');
myLink.addEventListener("click",function(event) {
alert("haha"); // haha
event.preventDefault(); // 浏览器不会跳转
});

IE 事件对象使用 eventreturnValue 属性取消事件默认行为,该属性默认值为 true 设置为 false 就可以取消事件默认行为。

1
2
3
4
5
var myLink = document.getElementById('myLink');
myLink.attaxchEvent("onclick",function(event) {
alert("haha"); // haha
event.returnValue = false; // 浏览器不会跳转
});

禁止事件冒泡

有如下的 HTML:

1
2
3
<body id="myBody">
<button id="myButton">click</button>
</body>

标准事件对象使用 eventstopPropagation() 方法禁止事件冒泡。

1
2
3
4
5
6
7
8
var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
alert(this.id); // myButton
event.stopPropagation(); // 禁止事件冒泡
});
document.body.addEventListener("click",function(event) {
alert(this.id); // 不会出现
});

IE 事件对象使用 eventcancelBubble 属性禁止事件冒泡,该属性值默认为 false,设置为 true 就可以禁止事件冒泡。

1
2
3
4
5
6
7
8
var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
alert("haha"); // haha
event.cancelBubble = true; // 禁止事件冒泡
});
document.body.attachEvent("onclick",function(event) {
alert("hehe"); // 不会出现
});

IE 事件处理函数中的 this

最后,还要一个与事件对象无关的小点,在 IE 事件处理函数当中 this 的值并不等于被绑定元素,而是等于 window 对象。

1
2
3
4
5
var btn = document.getElementById("myButton");
btn.attachEvent("onclick", function(event) {
alert(this === window); // true
alert(this.id) // undefined
});

而在标准事件绑定当中,this 的值等于被绑定的元素。

1
2
3
4
5
6
var btn = document.getElementById("myButton");
btn.addEventListener("click", function(event) {
alert(this === btn); // true
alert(this.id); // myButton
alert(this === event.currentTarget); // true
});

最后祝大家新年快乐~

感谢您的阅读,有不足之处请为我指出。

参考

JavaScript高级程序设计(第3版)

本文地址 http://blog.acwong.org/2014/12/30/standard-event-object-and-IE-event-object/