JavaScript 獲取事件對(duì)象的注意點(diǎn)
更新時(shí)間：2009年07月29日 16:30:49 作者：
平時(shí)我們獲取事件對(duì)象一定要將firefox考慮進(jìn)去。
平時(shí)我們獲取事件對(duì)象一般寫法如下：
復(fù)制代碼 代碼如下:
function getEvent(event) {
return event || window.event // IE:window.event
}
如果沒有參數(shù)，也可寫成（非IE ：事件對(duì)象會(huì)自動(dòng)傳遞給對(duì)應(yīng)的事件處理函數(shù)，且為第一個(gè)參數(shù)）：
復(fù)制代碼 代碼如下:
function getEvent() {
return arguments[0] || window.event // IE:window.event
}
這樣的寫法在除 Firefox（測(cè)試版本：3.0.12，下同） 外的瀏覽器上運(yùn)行都不會(huì)有問題，但 Firefox 為什么例外呢？讓我們這樣一種情形：
復(fù)制代碼 代碼如下:
<button id="btn" onclick="foo()">按鈕</button>
<script>
function foo(){
var e = getEvent();
alert(e);}
</script>
運(yùn)行結(jié)果在 Firefox 中是 undefined，為什么呢？
在 Firefox 中調(diào)用其實(shí)是這樣的，先調(diào)用執(zhí)行的是：
復(fù)制代碼 代碼如下:
function onclick(event) {
foo();
}
然后調(diào)用執(zhí)行的是：
復(fù)制代碼 代碼如下:
function foo(){
var e = getEvent();
alert(e);
}
會(huì)發(fā)現(xiàn)在 Firefox 下 onclick="foo()" 中的 foo() 無法自動(dòng)傳入事件對(duì)象參數(shù)，而默認(rèn)傳遞給了系統(tǒng)生成的 onclick 函數(shù)，那本例我們可以通過getEvent.caller.caller.arguments[0] 獲得事件對(duì)象。
因此，我們的 getEvent 可以優(yōu)化成（參照 yui_2.7.0b 中的 event/event-debug.js 中 getEvent 方法）：
復(fù)制代碼 代碼如下:
function getEvent(event) {
var ev = event || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && (Event == ev.constructor || MouseEvent == ev.constructor)) { /懌飛注：YUI 源碼 BUG，ev.constructor 也可能是 MouseEvent，不一定是 Event
break;
}
c = c.caller;
}
}
return ev;
}
當(dāng)然還有一個(gè)很簡單的解決方法，就是手動(dòng)將參數(shù)傳遞給 onclick="foo()"：
復(fù)制代碼 代碼如下:
<button id="btn" onclick="foo(event)">按鈕</button>
相關(guān)文章
網(wǎng)上找的，經(jīng)我整理添加demo如下2009-06-06
客戶端腳本JavaScript在寫法上其實(shí)有很多種方法，它們的放置位置也非常之多。2009-10-10
webpack中使用iconfont字體圖標(biāo)的方法
下面小編就為大家分享一篇webpack中使用iconfont字體圖標(biāo)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
在Threejs中類似于我們現(xiàn)實(shí)世界,物體顯示的顏色是由物體本身的顏色及光照的顏色相互疊加而得到的,這篇文章主要給大家介紹了關(guān)于threejs太陽光與陰影效果的相關(guān)資料,需要的朋友可以參考下2022-04-04
這篇文章主要介紹了JS加載解析Markdown文檔過程詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
js最實(shí)用string(字符串)類型的使用及截取與拼接詳解
這篇文章主要介紹了js string使用截取與拼接，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
JavaScript 組件之旅（一）分析和設(shè)計(jì)
毫無疑問，JavaScript 是一種非常靈活的腳本語言，有時(shí)候它像一只難以馴服的野馬——你受益于它的靈活性的同時(shí)，也要時(shí)刻提防它變得失去控制2009-10-10
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)超級(jí)瑪麗小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例
這篇文章主要介紹了JS通用方法觸發(fā)點(diǎn)擊事件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02
在JavaScript開發(fā)中，被人問到：null與undefined到底有啥區(qū)別？ 一時(shí)間不好回答，特別是undefined，因?yàn)檫@涉及到undefined的實(shí)現(xiàn)原理2012-04-04