快捷導(dǎo)航

JavaScript Event學(xué)習(xí)第六章事件的訪問

更新時(shí)間：2010年02月07日 10:42:46 作者：

在這一章我會(huì)講解如何去訪問一個(gè)事件對(duì)象。

現(xiàn)在我們已經(jīng)注冊(cè)了事件處理程序，對(duì)于事件我們還想更深入的了解。我們想知道事件發(fā)生時(shí)候的鼠標(biāo)位置，我們想知道用戶按下了哪些鍵。這些都是可能的，雖然這部分有很多煩人的瀏覽器兼容性問題。（這里可以快速查看瀏覽器兼容性列表）。
要讀出事件的屬性，必須要先能訪問到事件。
瀏覽器兼容性
站在瀏覽器戰(zhàn)爭(zhēng)的角度看，Netscape實(shí)現(xiàn)了一個(gè)訪問模型（后來被W3C做借鑒）和很多的事件屬性，同時(shí)微軟也做了同樣的事情。當(dāng)然這兩種模型是完全不兼容的。但是就像我們?cè)俸?jiǎn)介里面說的，如果

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

 
if (W3C/Netscape) { 
use W3C/Netscape model for access and property names 
} 
else if (Explorer) { 
use Microsoft model for access and property names 
} 

這樣是不正確的解決兼容性問題的辦法，他會(huì)讓一些能執(zhí)行大部分代碼但是沒有考慮到的瀏覽器失去作用。所以我們得先訪問一個(gè)事件然后再分別讀取他的屬性。
我們先來討論訪問事件的問題，事件屬性會(huì)在后面討論。
W3C/Netscape
在W3C/Netscape事件訪問模型中事件會(huì)被當(dāng)做一個(gè)參數(shù)傳遞給事件處理程序。所以如果你定義一個(gè)事件處理程序
element.onclick=doSomething;

doSomething()就會(huì)把事件當(dāng)做一個(gè)參數(shù)。習(xí)慣上保存在一個(gè)e變量中，當(dāng)然你可以改成任何名字：

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

 
function doSomething(e) { 
// e gives access to the event 
} 

這是完全自動(dòng)的，不需要其他的代碼。在匿名函數(shù)中你可以這樣寫：
element.onclick = function (e) {alert('Event type is ' + e.type)}

微軟
在微軟的事件訪問模型中有一個(gè)特別的屬性window.event包含最后一個(gè)發(fā)生的事件。

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

 
element.onclick = doSomething; 

function doSomething() { 
// window.event gives access to the event 
} 

或者

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

element.onclick = function () {alert('Event type is ' + window.event.type)}

Event和event
注意到還有一個(gè)古老的Netscape屬性window.Event。IE不認(rèn)識(shí)這個(gè)，Netscape 4也會(huì)曲解他。所以寫的時(shí)候一定要確保event是小寫e開頭的。
跨瀏覽器的事件訪問
很幸運(yùn)的是要寫跨瀏覽器訪問事件的腳本還是很簡(jiǎn)單的：

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

 
element.onclick = doSomething; 

function doSomething(e) { 
if (!e) var e = window.event; 
// e gives access to the event in all browsers 
} 

如果e不存在那么就給他賦值window.event。現(xiàn)在e在所有瀏覽器里面都表示事件。
與內(nèi)聯(lián)式的事件處理程序合并
在內(nèi)聯(lián)式的注冊(cè)模型中，你必須把event傳遞給函數(shù)：

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

 
<pre onclick="doSomething(event)"> 

function doSomething(e) { 
alert(e.type); 
} 

雖然在微軟模型里(window.)event是正確的屬性，其他瀏覽器也能識(shí)別。
繼續(xù)
如果你想繼續(xù)學(xué)習(xí)，請(qǐng)看下一章。
原文地址：http://www.quirksmode.org/js/events_access.html
第一次翻譯大家多包含我的twitter：@rehawk