JavaScript Event學(xué)習(xí)第六章 事件的訪問(wèn)
更新時(shí)間:2010年02月07日 10:42:46 作者:
在這一章我會(huì)講解如何去訪問(wèn)一個(gè)事件對(duì)象。
現(xiàn)在我們已經(jīng)注冊(cè)了事件處理程序,對(duì)于事件我們還想更深入的了解。我們想知道事件發(fā)生時(shí)候的鼠標(biāo)位置,我們想知道用戶按下了哪些鍵。這些都是可能的,雖然這部分有很多煩人的瀏覽器兼容性問(wèn)題。(這里可以快速查看瀏覽器兼容性列表)。
要讀出事件的屬性,必須要先能訪問(wèn)到事件。
瀏覽器兼容性
站在瀏覽器戰(zhàn)爭(zhēng)的角度看,Netscape實(shí)現(xiàn)了一個(gè)訪問(wèn)模型(后來(lái)被W3C做借鑒)和很多的事件屬性,同時(shí)微軟也做了同樣的事情。當(dāng)然這兩種模型是完全不兼容的。但是就像我們?cè)俸?jiǎn)介里面說(shuō)的,如果
if (W3C/Netscape) {
use W3C/Netscape model for access and property names
}
else if (Explorer) {
use Microsoft model for access and property names
}
這樣是不正確的解決兼容性問(wèn)題的辦法,他會(huì)讓一些能執(zhí)行大部分代碼但是沒(méi)有考慮到的瀏覽器失去作用。所以我們得先訪問(wèn)一個(gè)事件然后再分別讀取他的屬性。
我們先來(lái)討論訪問(wèn)事件的問(wèn)題,事件屬性會(huì)在后面討論。
W3C/Netscape
在W3C/Netscape事件訪問(wèn)模型中事件會(huì)被當(dāng)做一個(gè)參數(shù)傳遞給事件處理程序。所以如果你定義一個(gè)事件處理程序
element.onclick=doSomething;
doSomething()就會(huì)把事件當(dāng)做一個(gè)參數(shù)。習(xí)慣上保存在一個(gè)e變量中,當(dāng)然你可以改成任何名字:
function doSomething(e) {
// e gives access to the event
}
這是完全自動(dòng)的,不需要其他的代碼。在匿名函數(shù)中你可以這樣寫:
element.onclick = function (e) {alert('Event type is ' + e.type)}
微軟
在微軟的事件訪問(wèn)模型中有一個(gè)特別的屬性window.event包含最后一個(gè)發(fā)生的事件。
element.onclick = doSomething;
function doSomething() {
// window.event gives access to the event
}
或者
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開(kāi)頭的。
跨瀏覽器的事件訪問(wèn)
很幸運(yùn)的是要寫跨瀏覽器訪問(wèn)事件的腳本還是很簡(jiǎn)單的:
element.onclick = doSomething;
function doSomething(e) {
if (!e) var e = window.event;
// e gives access to the event in all browsers
}
如果e不存在那么就給他賦值window.event?,F(xiàn)在e在所有瀏覽器里面都表示事件。
與內(nèi)聯(lián)式的事件處理程序合并
在內(nèi)聯(lián)式的注冊(cè)模型中,你必須把event傳遞給函數(shù):
<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
要讀出事件的屬性,必須要先能訪問(wèn)到事件。
瀏覽器兼容性
站在瀏覽器戰(zhàn)爭(zhēng)的角度看,Netscape實(shí)現(xiàn)了一個(gè)訪問(wèn)模型(后來(lái)被W3C做借鑒)和很多的事件屬性,同時(shí)微軟也做了同樣的事情。當(dāng)然這兩種模型是完全不兼容的。但是就像我們?cè)俸?jiǎn)介里面說(shuō)的,如果
復(fù)制代碼 代碼如下:
if (W3C/Netscape) {
use W3C/Netscape model for access and property names
}
else if (Explorer) {
use Microsoft model for access and property names
}
這樣是不正確的解決兼容性問(wèn)題的辦法,他會(huì)讓一些能執(zhí)行大部分代碼但是沒(méi)有考慮到的瀏覽器失去作用。所以我們得先訪問(wèn)一個(gè)事件然后再分別讀取他的屬性。
我們先來(lái)討論訪問(wèn)事件的問(wèn)題,事件屬性會(huì)在后面討論。
W3C/Netscape
在W3C/Netscape事件訪問(wèn)模型中事件會(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)}
微軟
在微軟的事件訪問(wèn)模型中有一個(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開(kāi)頭的。
跨瀏覽器的事件訪問(wèn)
很幸運(yùn)的是要寫跨瀏覽器訪問(wè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?,F(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
相關(guān)文章
javascript實(shí)現(xiàn)的圖片預(yù)覽功能
這篇文章主要介紹了javascript實(shí)現(xiàn)的圖片預(yù)覽功能,結(jié)合實(shí)例形式分析了javascript針對(duì)圖片預(yù)覽相關(guān)功能實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2017-03-03document.createElement("A")比較不錯(cuò)的屬性
document.createElement("A")比較不錯(cuò)的屬性...2007-08-08小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)簡(jiǎn)單分頁(yè)組件,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08深入理解事件冒泡(Bubble)和事件捕捉(capture)
下面小編就為大家?guī)?lái)一篇深入理解事件冒泡(Bubble)和事件捕捉(capture)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05json_decode 索引為數(shù)字時(shí)自動(dòng)排序問(wèn)題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù),結(jié)果順序不對(duì),經(jīng)debug調(diào)試,發(fā)現(xiàn)是json_encode 函數(shù)的問(wèn)題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法
今天小編就為大家分享一篇Layui帶搜索的下拉框的使用以及動(dòng)態(tài)數(shù)據(jù)綁定方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09echarts中幾種漸變方式的具體實(shí)現(xiàn)方式
在使用echarts繪制圖表時(shí),有的時(shí)候需要使用漸變色,下面這篇文章主要給大家介紹了關(guān)于echarts中幾種漸變方式的具體實(shí)現(xiàn)方式,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JavaScript中undefined和is?not?defined的區(qū)別與異常處理
這篇文章主要給大家介紹了關(guān)于JavaScript中undefined和is?not?defined的區(qū)別與異常處理的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-03-03