|
|
事件是DOM（文檔對象模型）的一部分。事件流就是事件發(fā)生順序，這是IE和其他瀏覽器在事件支持上的主要差別。
一、事件流
1、冒泡型事件
IE上的解決方案就是冒泡型事件，它的基本思想是從最特定的目標(biāo)到最不特定的事件目標(biāo)（document對象）的順序觸發(fā)。
過程：按照DOM的層次結(jié)構(gòu)像水泡一樣不斷上升至頂端。（從里面的div觸發(fā)事件再到body，到html最后直到document最頂端）。
2、捕獲型事件
可以說跟冒泡是正好相反的，事件從最不精確的對象開始觸發(fā)，然后直到最精確。
3、DOM事件流
DOM同時支持以上兩種事件模型，其中捕獲型事件先發(fā)生，從document對象開始，最后在document對象結(jié)束。
二、事件監(jiān)聽函數(shù)
1、IE
每個函數(shù)和window對象都有兩個方法：
attachEvent()方法：附加事件處理函數(shù)
[Object].attachEvent(“事件名”，處理函數(shù)fnHandler)；
該方法有兩個參數(shù)。
var fnClick = function() {
alert("你點擊了ID為div1的DIV");
}
var oDiv = document.getElementById("div1");
oDiv.attachEvent("onclick", fnClick);
可以附加多個處理函數(shù)。
detachEvent()方法：分離移除事件處理函數(shù)
2、DOM
addEventListener()方法：分配附加事件處理函數(shù)
[Object]. addEventListener (“事件名”，處理函數(shù)fnHandler，Boolean)；
該方法有三個參數(shù)（“事件名”，“分配的函數(shù)”，處理函數(shù)是冒泡階段還是捕獲階段）
如果事件處理函數(shù)是用于捕獲階段，則第三個參數(shù)是true，用于冒泡階段則為false
var fnClick = function() {
alert("Clicked!");
}
var oDiv = document.getElementById("div");
oDiv.addEventListener("click", fnClick, false);
oDiv.removeEventListener("click", fnClick, false);
可以附加多個處理函數(shù)。
removeEventListener()方法：移除事件處理函數(shù)
三、事件對象
包含三個方面的信息：
1、引起事件的對象：IE中就是window.event，DOM中是處理函數(shù)的為唯一參數(shù)；
2、事件發(fā)生時的鼠標(biāo)信息；
3、事件發(fā)生時的鍵盤信息。
IE事件對象
在IE中，事件對象是window對象的一個屬性event。也就是說，事件處理函數(shù)必須這樣訪問事件對象：
oDiv.onclick = function() { var oEvent = window.event; }oDiv.onclick = function(){ var oEvent = window.event;}
盡管是window對象的屬性，event對象還是只能在事件發(fā)生時訪問。所有的事件處理函數(shù)執(zhí)行完畢后銷毀。
DOM標(biāo)準(zhǔn)的事件對象
event對象必須作為唯一的參數(shù)傳給事件處理函數(shù)。所以，在DOM兼容的瀏覽器(如Mozilla，Safari和Opera)中訪問事件對象，要這么做：
oDiv.onclick = function() {
var oEvent = arguments[0];
}
//也可以這樣
oDiv.onclick = function(oEvent) {
//.....
}
JavaScript技術(shù)：JavaScript 學(xué)習(xí)筆記（十五），轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
