JavaScript高級程序設計 閱讀筆記（十七） js事件
2024-05-06 14:21:21
供稿：網友
一、事件流
IE中是冒泡型事件，即從最特定的事件目標到最不特定的事件目標。
Netscape Navigator使用的是捕獲型事件，這個跟IE中采用的冒泡型事件相反。
DOM事件流同時支持兩種事件模型，但捕獲型事件先發生。
二、事件處理函數/監聽函數
事件是用戶或瀏覽器自身進行的特定行為。這些事件都有自己的名字，如click、load、mouseover等。
事件處理函數有兩種分配方式：在JavaScript中或者在HTML中。
如果在JavaScript中分配事件處理函數，則首先要獲得要處理的對象的引用，然后將函數賦值給對應的事件處理函數屬性，像這樣(事件處理函數名稱必須小寫)：
代碼如下:
var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
alert("I was clicked");
}
如果在HTML中分配事件處理函數，則只要在HTML標簽中添加事件處理函數的特征，并在其中包含合適的腳本作為特性值就可以了，如下：
代碼如下:
<div onclick="alert('I was clicked')"></div>
為了給每個可用事件分配多個事件處理函數，IE和DOM各提供了自己的方法。
IE中每個元素和window對象都有兩個方法：attachEvent()和detachEvent()，顧名思義，前者用來給一個事件附加事件處理函數，后者用來將事件處理函數分離出來。每個方法都有兩個參數：要分配的事件處理函數名字及一個函數。如：
代碼如下:
var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.attachEvent("onclick",fnClick);
oDiv.attachEvent("onclick",fnClick2)
oDiv.detachEvent("onclick",fnClick);
oDiv.detachEvent("onclick",fnClick2);
DOM中采用了addEventListener()和removeEventListener()來分配和移除事件處理函數。與IE不同的是這些方法有三個參數，第三個參數標識是用于冒泡階段還是捕獲階段。用于捕獲階段為true，用于冒泡階段則為false。移除時第三個參數要跟添加時保持一致。如：
代碼如下:
var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.addEventListener("onclick",fnClick,false);
oDiv.addEventListener("onclick",fnClick2,false)
oDiv.removeEventListener("onclick",fnClick,false);
oDiv.removeEventListener("onclick",fnClick2,false);
三、事件對象
事件對象一般包含的信息是：引起事件的對象，事件發生時鼠標的信息，事件發生時鍵盤的信息。
定位
IE中事件對象是window對象的一個屬性event。事件處理函數必須這樣訪問事件對象：
代碼如下:
oDiv.onclick = function(){
var oEvent=window.event;
