《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]; } //or oDiv.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。

浙公網安備 33010602011771號