DOM中的事件對象
觸發DOM某個事件時,瀏覽器會將一個event對象傳入到事件處理程序中,這個對象中包含了所有與事件有關的信息。如下顯示事件類型的代碼所示:
<body>
<input id="myBtn" type="button" value="Click me">
<script>
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert(event.type); //"click"
}
btn.addEventListener('click',function () {
alert(event.type); //"click"
},false);
</script>
</body>
event對象包含與創建它的特定事件有關的屬性和方法。其中我們重點區分event.target,event.currentTarget和事件處理程序中的this。
* 事件處理程序內部,對象this始終等於currentTarget的值,表示當前正在處理事件的那個元素,即事件處理程序所綁定的元素
* target表示事件發生所在的元素,未必是事件處理程序所綁定的元素。
舉個例子:
<body>
<input id="myBtn" type="button" value="Click me">
<script>
var btn = document.getElementById('myBtn');
document.body.onclick = function () {
alert(event.currentTarget === this);
alert(this === document.body);
alert(event.target === this);
}
</script>
</body>
如上,如果在頁面空白處點擊,則三條語句都彈出true;但是如果我們點擊的是按鈕,則會彈出true,true,false,就是由於事件處理程序綁定在body上,則this與currentTarget都是body的引用,但是事件發生在button上,target是button的引用,由於按鈕上並沒有註冊事件處理程序,結果click事件就冒泡到了body,在那裏事件得到了處理。
IE事件處理程序中的this對象與event對象
IE的事件對象
IE的事件對象:與訪問DOM的事件對象不同,要訪問IE的event對象有幾種不同的方法,取決於事件處理程序的方法。
1. 使用DOM0級方法添加事件處理程序
event對象作爲window對象的一個屬性存在。
var btn = document.getElementById('myBtn');
btn.onclick = function () {
var event = window.event;
alert(event.type) //"click"
}
此處我們需要通過window.event取得event對象,否則event爲未定義。
2. attachEvent()方法
使用attachEvent()方法就會有一個event對象作爲參數被傳入事件處理程序中.
var btn = document.getElementById('myBtn');
btn.attachEvent("onclick",function (event) {
alert(event.type); //"click"
});
IE的事件對象沒有target或者currentTarget,而是srcElement。它指向事件目標,與DOM中的target屬性相同。
IE的this對象
不同於DOM,在IE的事件處理函數中,this的值並不等於被綁定元素,而是等於window對象。
var btn = document.getElementById('myBtn');
btn.attachEvent("onclick",function (event) {
alert(this === window); //true
alert(this.id); //undefined
});
因此在IE中相比於this,還是使用srcElement比較保險,比較如下代碼:
var btn = document.getElementById('myBtn');
btn.onclick = function () {
alert(window.event.srcElement === this); //true
}
btn.attachEvent("onclick",function (event) {
event.srcElement === this; //false
});
顯然第一個window.event.srcElement和this都是window,但是第二個event.srcElement是btn,this卻是window。