JavaScript dom事件物件與IE事件物件實例詳解

事件物件：在觸發DOM上的某個事件時，會產生一個事件物件event，這個物件中包含著所有與事件有關的訊息，包括導致事件的元素、事件的類型以及其他與特定事件相關的資訊。

DOM中的事件物件

#相容DOM的瀏覽器會將一個event物件傳入事件處理程序中，無論指定事件處理程序時用的是DOM0還是DOM2的方法，都會傳入event物件。 event物件只有在事件處理程序執行期間才會存在，一旦事件處理程序執行完畢，event物件就會被銷毀。以下是程式碼範例：

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log(event.type); // "click"
}
btn.addEventListener("click", function(event) {
 console.log(event.type);
}, false);

event物件包含與建立它的特定事件相關的屬性和方法，觸發的事件類型不一樣，可用的屬性方法也有所不同。但所有的事件都會有下列的屬性或方法：

• bubbles: 布林值，表示事件是否冒泡

• cancelable: 布林值，表示是否可以取消事件的預設行為

• currentTarget: 元素，事件處理程序目前正在處理事件的那個元素

• defaultPrevented: 布爾值，表示是否呼叫過preventDefault()方法

• detail: 整數，與事件相關的細節資訊

• eventPhase: 整數，呼叫事件處理程序的階段，1表示捕獲階段，2表示目標階段，3表示冒泡階段

• #preventDefault(): 函數，取消事件的預設行為，cancelable為true時可以調用此方法

• stopImmediatePropagation(): 函數，取消事件的進一步捕獲或冒泡，同時阻止任何事件處理程序被呼叫

• stopPropagation (): 函數，取消事件的進一步捕獲或冒泡，bubbles為true時可以呼叫這個方法

• #target: 元素，事件的目標

• ##trusted: 布林值，為true時表示事件是瀏覽器產生的，否則表示事件是透過JS建立的

• type: 字串，被觸發的事件類型

• view: 與事件關聯的抽象視圖，等同於發生事件的window物件

下面程式碼範例展示了上述部分屬性的用法，也可以幫助我們進一步理解事件流。假設頁面中有一個按鈕”myBtn」。當點擊按鈕時，this和currentTarget都等於body元素，因為事件處理程序是註冊在body元素上。 target的值卻等於按鈕元素，因為它才是click事件的真正目標。由於按鈕上沒有註冊事件處理程序，結果」click」事件冒泡到了document.body那裡才得到處理。

document.body.onclick = function(event) {
 console.log(event.currentTarget === document.body); // true
 console.log(this === document.body); // true
 console.log(event.target === document.getElementById("myBtn")); // true
};

再看一個例子，下面程式碼中，stopPropagation()方法取消了事件的進一步擷取或冒泡。當我點擊按鈕時，本來應該會因為事件冒泡機制觸發按鈕和body元素上的點擊事件處理程序，輸出」From Bth …」和」From Body …」。現在點擊事件在按鈕元素上觸發之後就被阻止繼續在DOM層次中的傳播，因此body上的事件處理程序不會被觸發。

var btn = document.getElementById("myBtn");
btn.onclick = function(event) {
 console.log("From Bth ...");
 event.stopPropagation(); // 停止事件传播
};
document.body.onclick = function() {
 console.log("From Body ...");
};

IE中的事件物件

#在IE中，使用DOM0的方法新增事件處理程序時，event物件作為window物件的一個屬性存在。如果是透過attachEvent()方法添加，則event物件是作為參數傳入事件處理函數。以下是程式碼範例：

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 var event = window.event;
 console.log(event.type); // "click"
};
btn.attachEvent("onclick", function(event) {
 console.log(event.type); // "click"
});

IE的event物件同樣也包含與建立它的事件相關的屬性和方法，這些屬性和方法也會因為事件類型的不同而有所差異。但所有事件物件都會包含下列屬性：

• cancelBubble: 布林值，可讀可寫，預設為false。將其設為true時取消事件冒泡

• returnValue: 布林值，可讀可寫，預設為true。將其設為false時取消事件的預設行為

• srcElment: 元素，事件的目標元素，與DOM中的target屬性相同

• type: 字串，事件類型

在IE中，事件處理程序的作用域是根據指定它的方式來決定，this的值不一定是指向事件的目標元素。因此，使用srcElement屬性更具保險。請看下面程式碼實例，第一種方式中this的值為目標元素，而第二種方式，前面講過這種方式的事件處理程序是在全域作用域中執行，因此this的值為window。

var btn = document.getElementById("myBtn");
btn.onclick = function() {
 console.log(window.event.srcElement === this); // true
}
btn.attachEvent("onclick", function(event) {
 console.log(event.srcElement === this); // false
});

以上是JavaScript dom事件物件與IE事件物件實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！