JavaScript Event學習第六章:事件的訪問

來源:互聯網
上載者:User

在這一章我會講解如何去訪問一個事件對象。

現在我們已經註冊了事件處理常式,對於事件我們還想更深入的瞭解。我們想知道事件發生時候的滑鼠位置,我們想知道使用者按下了哪些鍵。這些都是可能的,雖然這部分有很多煩人的瀏覽器安全色性問題。(這裡可以快速查看瀏覽器安全色性列表)。

要讀出事件的屬性,必須要先能訪問到事件。

瀏覽器安全色性
站在瀏覽器戰爭的角度看,Netscape實現了一個訪問模型(後來被W3C做借鑒)和很多的事件屬性,同時微軟也做了同樣的事情。當然這兩種模型是完全不相容的。但是就像我們再簡介裡面說的,如果

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

這樣是不正確的解決相容性問題的辦法,他會讓一些能執行大部分代碼但是沒有考慮到的瀏覽器失去作用。所以我們得先訪問一個事件然後再分別讀取他的屬性。

我們先來討論訪問事件的問題,事件屬性會在後面討論。

W3C/Netscape
在W3C/Netscape事件訪問模型中事件會被當做一個參數傳遞給事件處理常式。所以如果你定義一個事件處理常式

1 element.onclick=doSomething;<BR>

doSomething()就會把事件當做一個參數。習慣上儲存在一個e變數中,當然你可以改成任何名字:

1 function doSomething(e) {<BR>    // e gives access to the event<BR>}<BR>

這是完全自動的,不需要其他的代碼。在匿名函數中你可以這樣寫:

1 element.onclick = function (e) {alert('Event type is ' + e.type)}<BR>

微軟
在微軟的事件訪問模型中有一個特別的屬性window.event包含最後一個發生的事件。

1 element.onclick = doSomething;<BR><BR>function doSomething() {<BR>    // window.event gives access to the event<BR>}<BR>

或者

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

Event和event
注意到還有一個古老的Netscape屬性window.Event。IE不認識這個,Netscape 4也會曲解他。所以寫的時候一定要確保event是小寫e開頭的。

跨瀏覽器的事件訪問
很幸運的是要寫跨瀏覽器訪問事件的指令碼還是很簡單的:

1 element.onclick = doSomething;<BR><BR>function doSomething(e) {<BR>    if (!e) var e = window.event;<BR>    // e gives access to the event in all browsers<BR>}<BR>

如果e不存在那麼就給他賦值window.event。現在e在所有瀏覽器裡面都表示事件。

與內聯式的事件處理常式合并
在內聯式的註冊模型中,你必須把event傳遞給函數:

1 <pre onclick="doSomething(event)"><BR><BR>function doSomething(e) {<BR>    alert(e.type);<BR>}<BR>

雖然在微軟模型裡(window.)event是正確的屬性,其他瀏覽器也能識別。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.