JavaScript 學習筆記（十五）
2024-05-06 14:11:41
供稿：網友
事件
事件是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) {
//.....
}
