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

最新評(píng)論