快捷導(dǎo)航

JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十七） js事件

更新時(shí)間：2012年08月14日 16:37:43 作者：

IE中是冒泡型事件，即從最特定的事件目標(biāo)到最不特定的事件目標(biāo)

一、事件流

　　IE中是冒泡型事件，即從最特定的事件目標(biāo)到最不特定的事件目標(biāo)。
　　Netscape Navigator使用的是捕獲型事件，這個(gè)跟IE中采用的冒泡型事件相反。
　　DOM事件流同時(shí)支持兩種事件模型，但捕獲型事件先發(fā)生。

二、事件處理函數(shù)/監(jiān)聽(tīng)函數(shù)

　　事件是用戶或?yàn)g覽器自身進(jìn)行的特定行為。這些事件都有自己的名字，如click、load、mouseover等。
　　事件處理函數(shù)有兩種分配方式：在JavaScript中或者在HTML中。
　　如果在JavaScript中分配事件處理函數(shù)，則首先要獲得要處理的對(duì)象的引用，然后將函數(shù)賦值給對(duì)應(yīng)的事件處理函數(shù)屬性，像這樣(事件處理函數(shù)名稱必須小寫(xiě))：

復(fù)制代碼代碼如下:

 
var oDiv=document.getElementById("div1"); 
oDiv.onclick=function(){ 
alert("I was clicked"); 
} 

　　如果在HTML中分配事件處理函數(shù)，則只要在HTML標(biāo)簽中添加事件處理函數(shù)的特征，并在其中包含合適的腳本作為特性值就可以了，如下：

復(fù)制代碼代碼如下:

為了給每個(gè)可用事件分配多個(gè)事件處理函數(shù)，IE和DOM各提供了自己的方法。
　　IE中每個(gè)元素和window對(duì)象都有兩個(gè)方法：attachEvent()和detachEvent()，顧名思義，前者用來(lái)給一個(gè)事件附加事件處理函數(shù)，后者用來(lái)將事件處理函數(shù)分離出來(lái)。每個(gè)方法都有兩個(gè)參數(shù)：要分配的事件處理函數(shù)名字及一個(gè)函數(shù)。如：

復(fù)制代碼代碼如下:

 
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()來(lái)分配和移除事件處理函數(shù)。與IE不同的是這些方法有三個(gè)參數(shù)，第三個(gè)參數(shù)標(biāo)識(shí)是用于冒泡階段還是捕獲階段。用于捕獲階段為true，用于冒泡階段則為false。移除時(shí)第三個(gè)參數(shù)要跟添加時(shí)保持一致。如：

復(fù)制代碼代碼如下:

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

三、事件對(duì)象

　　事件對(duì)象一般包含的信息是：引起事件的對(duì)象，事件發(fā)生時(shí)鼠標(biāo)的信息，事件發(fā)生時(shí)鍵盤(pán)的信息。
定位
　　IE中事件對(duì)象是window對(duì)象的一個(gè)屬性event。事件處理函數(shù)必須這樣訪問(wèn)事件對(duì)象：

復(fù)制代碼代碼如下:

 
oDiv.onclick = function(){ 
var oEvent=window.event; 
} 

DOM標(biāo)準(zhǔn)則說(shuō)，event對(duì)象必須作為唯一的參數(shù)傳遞給事件處理函數(shù)。所以，在DOM兼容的瀏覽器(如Mozilla、Safair、Opera)中訪問(wèn)事件對(duì)象為：

復(fù)制代碼代碼如下:

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

屬性方法相似性

　　1、獲取事件類型：oEvent.type
　　2、獲取按鍵代碼：oEvent.keyCode
　　3、檢測(cè)Shift、Alt、Ctrl鍵：oEvent.shiftKey;oEvent.altKey;oEvent.ctrlKey;
　　4、獲取客戶端鼠標(biāo)坐標(biāo)：oEvent.clientX;oEvent.clientY;
　　5、獲取屏幕坐標(biāo)：oEvent.screenX;oEvent.screenY;

屬性方法區(qū)別

　　1、獲取目標(biāo)：IE用srcElement,DOM用target；
　　2、獲取按鍵字符代碼：IE用keyCode,DOM用charCode和String.fromCharCode；
　　3、阻止某個(gè)事件的默認(rèn)行為：IE用oEvent.returnValue=false，DOM用preventDefault()方法；
　　4、停止事件冒泡：IE中用oEvent.cancelBubble=true;DOM中用oEvent.stopPropagation();

四、事件的類型

　　1、鼠標(biāo)事件
　　鼠標(biāo)事件包含click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove。
　　事件順序：dblclick事件會(huì)先后觸發(fā)以下事件：mousedown、mouseup、click、mousedown、mouseup、click、dblclick。
　　2、鍵盤(pán)事件
　　鍵盤(pán)事件包括：keydown、keypress、keyup。
　　事件順序：用戶按一次某字符按鍵時(shí)，會(huì)先后觸發(fā)以下事件：keydown、keypress、keyup。如果按一次某非字符按鍵時(shí)，會(huì)先后觸發(fā)以下事件：keydown、keyup。
　　3、HTML事件
　　HTML事件包括：load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。
　　4、變化事件
　　雖然變化事件已經(jīng)是DOM標(biāo)準(zhǔn)的一部分，但是目前還沒(méi)有任何主流的瀏覽器實(shí)現(xiàn)了它。因此這里只是列舉出來(lái)。
　　變化事件包括：DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument。

作者：Artwl
出處：http://artwl.cnblogs.com

您可能感興趣的文章: