《JavaScript進階程式設計》閱讀筆記（十七）：事件

一、事件流

　　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;}

　　DOM標準則說，event對象必須作為唯一的參數傳遞給事件處理函數。所以，在DOM相容的瀏覽器(如Mozilla、Safair、Opera)中訪問事件對象為：

oDiv.onclick=function(){      var oEvent=arguments[0];}//oroDiv.onclick=function(oEvent){}

屬性方法相似性

　　1、擷取事件類型：oEvent.type

　　2、擷取按鍵代碼：oEvent.keyCode

　　3、檢測Shift、Alt、Ctrl鍵：oEvent.shiftKey;oEvent.altKey;oEvent.ctrlKey;

　　4、擷取用戶端滑鼠座標：oEvent.clientX;oEvent.clientY;

　　5、擷取螢幕座標：oEvent.screenX;oEvent.screenY;

屬性方法區別

　　1、擷取目標：IE用srcElement,DOM用target；

　　2、擷取按鍵字元代碼：IE用keyCode,DOM用charCode和String.fromCharCode；

　　3、阻止某個事件的預設行為：IE用oEvent.returnValue=false，DOM用preventDefault()方法；

　　4、停止事件冒泡：IE中用oEvent.cancelBubble=true;DOM中用oEvent.stopPropagation();

四、事件的類型

　　1、滑鼠事件

　　滑鼠事件包含click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove。

　　事件順序：dblclick事件會先後觸發以下事件：mousedown、mouseup、click、mousedown、mouseup、click、dblclick。

　　2、鍵盤事件

　　鍵盤事件包括：keydown、keypress、keyup。

　　事件順序：使用者按一次某字元按鍵時，會先後觸發以下事件：keydown、keypress、keyup。如果按一次某非字元按鍵時，會先後觸發以下事件：keydown、keyup。

　　3、HTML事件

　　HTML事件包括：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。

　　4、變化事件

　　雖然變化事件已經是DOM標準的一部分，但是目前還沒有任何主流的瀏覽器實現了它。因此這裡只是列舉出來。

　　變化事件包括：DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument。