火狐和ie下獲取javascript 獲取event的方法(推薦)
javascript 獲取event
先從一個(gè)簡(jiǎn)單的例子說(shuō)起，一個(gè)簡(jiǎn)單的button控件如下:
<input type='button' name='mybtn' id='mybtn' onclick='myFunc()'/>
然后為其注冊(cè)事件，這樣的情況，怎么在javascript里獲取event呢，特別是firefox的情況。請(qǐng)看:
<script type='text/javascript'>
function myFunc(){
var ev = window.event || arguments.callee.caller.arguments[0]
,et = ev.srcElement || ev.target;
alert(et.tagName);
}
</script>
不出意外的話，在ie/ff下，上面例子都將輸出INPUT,即是觸發(fā)click事件節(jié)點(diǎn)的標(biāo)簽名，ie的event獲取這里就不說(shuō)了，重點(diǎn)說(shuō)說(shuō)ff下的情況。
這里的arguments.callee.caller.arguments[0]看起來(lái)又長(zhǎng)又怪，為什么在firefox的情況下，這個(gè)東西就是event呢？
首先得了解arguments.callee是什么東西,caller又是什么樣的屬性？
argments.callee就是函數(shù)體本身，arguments.callee.caller就是函數(shù)體的調(diào)用函數(shù)體
簡(jiǎn)單例子如下:
<script type='text/javascript'>
function a(){
b();
}
function b(){
alert(b === arguments.callee)
alert(b.caller === a)
alert(arguments.callee.caller === a)
}
a();
</script>
不出意外，上面的例子將輸出3個(gè)true,表明當(dāng)a()調(diào)用時(shí)，函數(shù)b與函數(shù)a的關(guān)系。
好，弄清楚了arguments.callee與caller，我們?cè)侔言鹊睦痈母?br />
<script type='text/javascript'>
function myFunc(){
alert(arguments.callee.caller.toString())
var ev = window.event || arguments.callee.caller.arguments[0]
,et = ev.srcElement || ev.target;
}
</script>
我們把a(bǔ)rgument.callee.caller的函數(shù)體輸出，看看到底在ie和ff下有何區(qū)別.
可以看到ie下輸出為
function anonymous(){
myFunc()
}
ff下輸出為
function onclick(event){
myFunc();
}
由此看出在html控件中直接注冊(cè)事件在ie/ff下表現(xiàn)的不同， ie下定義了一個(gè)匿名函數(shù)，內(nèi)部再執(zhí)行用戶定制的函數(shù)(myFunc)，而ff下則有所
不同，首先f(wàn)f下定義了一個(gè)與節(jié)點(diǎn)事件同名的函數(shù),這里是onclick事件，所以是function onclick,然后event作為一個(gè)參數(shù)傳入，內(nèi)部再執(zhí)行myFunc.
所以當(dāng)事件觸發(fā)時(shí)，在myFunc里，argument.callee.caller就是指向function onclick，當(dāng)然，argument.callee.caller.arguments[0]即為event了.
以上這篇火狐和ie下獲取javascript 獲取event的方法(推薦)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Webpack中SplitChunksPlugin 配置參數(shù)詳解
這篇文章主要介紹了Webpack中SplitChunksPlugin 配置參數(shù)詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
js函數(shù)一般都是返回一個(gè)值，在本例教程中將為大家介紹下如何返回多個(gè)返回值，喜歡的朋友可以了解下2013-11-11
本文是javascript插件化開(kāi)發(fā)系列教程的第六篇文章，還是重點(diǎn)對(duì)上一篇文章不足的地方進(jìn)行改進(jìn)重構(gòu)，逐步分析讓大家能有一個(gè)新的認(rèn)識(shí)，希望小伙伴們能夠喜歡。2015-02-02
這篇文章主要介紹了小程序橫屏方案對(duì)比，實(shí)現(xiàn)橫屏的方案也有多種，但是每種方案都有一定的缺陷，恰巧最近也在橫屏方案上踩了不少坑，本文就一起來(lái)介紹一下吧2020-06-06
js實(shí)現(xiàn)上傳圖片之上傳前預(yù)覽圖片
此功能用js實(shí)現(xiàn)，然后在fileupload控件的change事件中調(diào)用，這樣當(dāng)用fileupload選擇完圖片以后，圖片就會(huì)自動(dòng)顯示出來(lái)了，感興趣的各位可以參考下哈2013-03-03
GWT中復(fù)制到剪貼板 js+flash實(shí)現(xiàn)復(fù)制 兼容性比較好
今天看到有個(gè)Google Code的項(xiàng)目，叫ZeroClipboard，大意是使用flash作為媒介，將內(nèi)容復(fù)制到剪貼板。這比用純javascript好，因?yàn)椴煌瑸g覽器會(huì)出于安全的原因，有不同反應(yīng)，例如IE會(huì)給出提示，有的瀏覽器不支持復(fù)制到剪貼板。2010-03-03
Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)
這篇文章主要介紹了Bootstrap-table自定義可編輯每頁(yè)顯示記錄數(shù)的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09
JavaScript操作localStorage實(shí)現(xiàn)保存本地json文件
這篇文章主要為大家詳細(xì)介紹了JavaScript如何操作localStorage實(shí)現(xiàn)保存本地json文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
詳解釘釘小程序組件之自定義模態(tài)框（彈窗封裝實(shí)現(xiàn)）
這篇文章主要介紹了釘釘小程序組件之自定義模態(tài)框（彈窗封裝實(shí)現(xiàn)）的相關(guān)知識(shí)，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
javascript中的相等操作符(==與===區(qū)別)
這篇文章主要介紹了javascript中的相等操作符(==與===區(qū)別),需要的朋友可以參考下2019-12-12