事件
事件是DOM(文檔對象模型)的一部分。事件流就是事件發生順序,這是IE和其他浏覽器在事件支持上的主要差別。
一、事件流 1、冒泡型事件
IE上的解決方案就是冒泡型事件,它的基本思想是從最特定的目標到最不特定的事件目標(document對象)的順序觸發。
過程:按照DOM的層次結構像水泡一樣不斷上升至頂端。(從裡面的div觸發事件再到body,到html最後直到document最頂端)。
2、捕獲型事件 可以說跟冒泡是正好相反的,事件從最不精確的對象開始觸發,然後直到最精確。
3、DOM事件流
DOM同時支持以上兩種事件模型,其中捕獲型事件先發生,從document對象開始,最後在document對象結束。
二、事件監聽函數
1、IE
每個函數和window對象都有兩個方法:
attachEvent()方法:附加事件處理函數
[Object].attachEvent(“事件名”,處理函數fnHandler);
該方法有兩個參數。
var fnClick = function() {
alert("你點擊了ID為div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多個處理函數。
detachEvent()方法:分離移除事件處理函數
2、DOM
addEventListener()方法:分配附加事件處理函數
[Object]. addEventListener (“事件名”,處理函數fnHandler,Boolean);
該方法有三個參數(“事件名”,“分配的函數”,處理函數是冒泡階段還是捕獲階段)
如果事件處理函數是用於捕獲階段,則第三個參數是true,用於冒泡階段則為false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多個處理函數。
removeEventListener()方法:移除事件處理函數
三、事件對象
包含三個方面的信息:
1、引起事件的對象:IE中就是window.event,DOM中是處理函數的為唯一參數;
2、事件發生時的鼠標信息;
3、事件發生時的鍵盤信息。
IE事件對象
在IE中,事件對象是window對象的一個屬性event。也就是說,事件處理函數必須這樣訪問事件對象:
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
盡管是window對象的屬性,event對象還是只能在事件發生時訪問。所有的事件處理函數執行完畢後銷毀。
DOM標准的事件對象
event對象必須作為唯一的參數傳給事件處理函數。所以,在DOM兼容的浏覽器(如Mozilla,Safari和Opera)中訪問事件對象,要這麼做:
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以這樣
oDiv.onclick = function(oEvent) {
//.....
}