JavaScript事件對象

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。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章