Javascript 瀏覽器事件小結(jié)

2019-11-21 00:44:44

字體：大中小

供稿：網(wǎng)友

事件本身相當(dāng)直觀(guān)，常用的有：

事件	描述
abort	圖片被阻止而不能加載
blur,focus	失去焦點(diǎn)，獲得焦點(diǎn)
change	適用于表單元素，當(dāng)元素使其焦點(diǎn)的時(shí)候判斷是否發(fā)生改變
click,dblclick	單擊，雙擊
keydown,keyup,keypress	按下鍵，鍵離開(kāi)，按下鍵的時(shí)候觸發(fā)，注意keypress只對(duì)數(shù)字字母鍵有效
load	加載圖片或者頁(yè)面的時(shí)候
mousedown,mouseup	按下鍵，放開(kāi)鍵
mouseover,mouseout	over是當(dāng)鼠標(biāo)進(jìn)入的時(shí)候出發(fā)，out是離開(kāi)的時(shí)候觸發(fā)
mousemove	鼠標(biāo)移動(dòng)
reset,submit	重置和提交表單

以上僅僅是常用的事件的列表，完整具體的列表可以查找相關(guān)手冊(cè)。

1. 0級(jí)DOM上的事件處理
0級(jí)DOM上的事件處理方法是比較早的，目前也廣泛應(yīng)用，從IE4.0開(kāi)始就支持這類(lèi)方法。

1.1 事件注冊(cè)
下面主要介紹如何添加響應(yīng)事件，也就是為事件添加處理程序。

（1）內(nèi)聯(lián)注冊(cè)（inline registration)

這是最簡(jiǎn)單的一種，將事件響應(yīng)程序作為html標(biāo)簽的一個(gè)屬性來(lái)設(shè)置，如下例，可以是代碼，當(dāng)然更多情況下是一個(gè)函數(shù)調(diào)用。事件的句柄一般就是事件的名稱(chēng)加上前綴on。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

這種方法很簡(jiǎn)單，任何瀏覽器都支持，缺點(diǎn)是將Javascript代碼和HTML代碼混雜在一起，而且不能動(dòng)態(tài)添加事件響應(yīng)程序，也不能添加多個(gè)響應(yīng)程序。

（2）傳統(tǒng)模式(traditional registration)

這種模式將事件作為對(duì)象的屬性進(jìn)行添加。例如：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

1.2 事件的參數(shù)（Event對(duì)象）
有些事件處理程序需要一些關(guān)于事件更多的信息，比如click事件發(fā)生的位置等。這些信息是通過(guò)事件參數(shù)傳給事件處理程序的。IE事件模型和W3C事件模型對(duì)此的實(shí)現(xiàn)是不同的。

IE把event對(duì)象作為window對(duì)象的一個(gè)屬性，而W3C把event對(duì)象作為處理程序的一個(gè)參數(shù)。下面以click事件為例，分別寫(xiě)一個(gè)程序用于IE和支持W3C標(biāo)準(zhǔn)的瀏覽器。

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

這一段頁(yè)面代碼可以把click事件對(duì)象的所有屬性都展示出來(lái)。上面的例子是W3C的瀏覽器所用的方法，要在IE下使用，只要改成onclick=”IEClick()”.注意，W3CClick中的參數(shù)名，只能是event。打印出來(lái)的屬性很多，我分別用FF3.5，Chrome3，IE8（標(biāo)準(zhǔn)模式和兼容模式）運(yùn)行，他們共有的屬性并不多，其實(shí)也就這些共有的屬性才有意義，他們是:

altKey,shiftKey,ctrlKey:是否按下alt,shift,ctrl鍵

clientX,clientY:客戶(hù)區(qū)坐標(biāo)（瀏覽器窗口）,screenX,screenY：屏幕區(qū)坐標(biāo)

type:事件類(lèi)型

雖然事件的參數(shù)的傳遞方式有點(diǎn)不同，但是對(duì)于寫(xiě)跨瀏覽器的代碼也沒(méi)有造成太多的麻煩，只需要在函數(shù)一開(kāi)始判斷下window.event有沒(méi)有定義即可。

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

 
function BothClick(args) { 
var evnt = window.event ? window.event : args; 
alert(evnt.clientX); 
} 

注冊(cè)句柄為:<div id="adiv" onclick="BothClick(event)" >a</div>如果采用第二種方式注冊(cè)句柄，則不需要什么特別處理。

1.3 事件的浮升
頁(yè)面上的對(duì)象通常是重疊的，比如一個(gè)div中可以包括若干div或者其他元素。當(dāng)某一事件觸發(fā)的時(shí)候，同時(shí)有多個(gè)元素受影響，并且它們都有相應(yīng)的事件處理程序，那么這些事件處理程序執(zhí)行哪些？以何種順序執(zhí)行？這就是本節(jié)要討論的問(wèn)題。通常情況下，一個(gè)事件被多個(gè)句柄捕獲的情形并不多見(jiàn)。先看一個(gè)例子(CSS省略)：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

在body，外層div和內(nèi)層div都響應(yīng)了click事件，結(jié)果如下：

可見(jiàn)，事件是由內(nèi)向外層的元素依次觸發(fā)的。（一般教材上的說(shuō)法是向上浮升，bubbling,我覺(jué)得這個(gè)向上是有歧義的，我一開(kāi)始就誤認(rèn)為內(nèi)層的元素是上面的，因?yàn)樗芨采w外層的元素）用0級(jí)DOM注冊(cè)的事件，它的浮升方法無(wú)論是IE還是W3C都是統(tǒng)一的。

1.4 浮升的取消
有時(shí)候我們需要在響應(yīng)了一個(gè)事件之后，就不需要外層的元素再響應(yīng)了，可以取消事件的浮升。取消的方法IE和W3C是不一致的。IE是通過(guò)設(shè)置事件對(duì)象的cancelBubble屬性來(lái)實(shí)現(xiàn)，W3C則是調(diào)用事件對(duì)象的stopPropagation方法。

例如上面的例子改為：

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

 
function inner_click(arg){ 
var evnt=window.event?window.event:arg; 
var dis=document.getElementById("res"); 
dis.innerHTML+="Inner Click <br/>"; 
if(evnt.stopPropagation){ 
evnt.stopPropagation(); 
}else{ 
evnt.cancelBubble=true; 
} 
}<div id="innerdiv" onclick="inner_click(event)" > 

其他不變，這樣就只能看到一行輸出。

1.5 事件處理函數(shù)中的this
這個(gè)this指向的是觸發(fā)事件的對(duì)象。

下面介紹2級(jí)DOM的事件句柄。這種方式是比較新的方式，它不依賴(lài)于任何特定的事件句柄屬性。W3C規(guī)定的方式是

object.addEventListener(‘event',function,boolean)

第一個(gè)參數(shù)是事件名，第二個(gè)是事件響應(yīng)函數(shù)，第三個(gè)變量如果是true，則事件函數(shù)在事件冒泡階段被觸發(fā)，否則是在事件的捕獲階段被觸發(fā)。W3C規(guī)定事件的發(fā)生有兩個(gè)階段，首先是捕獲，即事件以此從最外層層的元素向內(nèi)層傳遞，相應(yīng)的事件處理函數(shù)被依次觸發(fā)，然后是冒泡階段，事件從最內(nèi)層的元素向外層傳遞。看一個(gè)例子：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

點(diǎn)擊灰色框，會(huì)依次彈出body true,div true,div false,body false. 很遺憾，IE不支持這種方式,最新的IE8也不支持。不過(guò)IE也有類(lèi)似的注冊(cè)事件的方法，名字是attachEvent.不過(guò)這個(gè)方法沒(méi)有第三個(gè)參數(shù)，它支持冒泡階段的事件響應(yīng)。attachEvent函數(shù)傳遞事件參數(shù)的時(shí)候是和W3C一致的，也是通過(guò)event參數(shù)傳遞，但是，其函數(shù)內(nèi)部的this指向的不是觸發(fā)事件對(duì)象，而永遠(yuǎn)指向window。在event對(duì)象中有一個(gè)屬性指向觸發(fā)該事件的對(duì)象，W3C中是target,IE中是srcElement, 在符合W3C規(guī)范的瀏覽器中，事件處理函數(shù)中的this和event.target指向的是同一個(gè)對(duì)象。下面的程序展示了一個(gè)IE和W3C兼容的事件處理程序：

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

事件處理程序中W3C和IE還有諸多不一致之處，十分麻煩。好在大多都有較好的解決方案。更多信息請(qǐng)參考http://www.quirksmode.org/js/events_events.html

上一篇：JS getMonth()日期函數(shù)的值域是0-11

下一篇：不同瀏覽器對(duì)回車(chē)提交表單的處理辦法