JS事件在IE與FF中的區(qū)別詳細(xì)解析
之道的易搜項(xiàng)目中的搜索分類是通過JS動(dòng)態(tài)生成的，每個(gè)生成的元素都要?jiǎng)討B(tài)的添加屬性、事件。其中，添加屬性可以采用賦值的方式，這對(duì)IE和FF都是適用的。比如:
var element = document.createElement('select');
element.id = "myselect";
上面的語(yǔ)句在IE和FF中都會(huì)有同樣的效果，并且運(yùn)行正常。但是我們創(chuàng)建的元素，大部分是要給其動(dòng)態(tài)添加事件的，顯然，我們不能和添加屬性一樣，直接在后面打個(gè)dot，然后寫個(gè)事件名，然后后面跟著一串代碼，那樣是會(huì)報(bào)錯(cuò)的。所以我們可以采用如下的方法來(lái)添加事件：
首先：我們要判斷當(dāng)前的瀏覽器是什么瀏覽器，我們?nèi)匀谎佑弥暗亩x,
if( element.attachEvent ){
//為IE以及IE內(nèi)核的瀏覽器（1）
}else if( element.addEventListener){
//為FF以及NS內(nèi)核的瀏覽器（2）
}
上面的if語(yǔ)句塊就是幫我們完成當(dāng)前瀏覽器是IE還是FF的判斷。
瀏覽器判斷出來(lái)，然后我們要做的就是把函數(shù)注冊(cè)到元素里面。下面我們給出我們定義的一個(gè)功能函數(shù)：
function showElementId(elmt){
alert(elmt.id);
}
函數(shù)功能很簡(jiǎn)單，就是提示出參數(shù)里面的元素的ID。
如果是IE瀏覽器，我們把如下代碼插入到上面的注釋（1）處：
element.attachEvent( "onclick",function(){showElementId(elmt)});
如果是FF瀏覽器，我們把如下代碼插入到上面的注釋（2）處：
var eventName = "onclick".replace(/on(.*)/i,'$1');
element.addEventListener( eventName,function(){showElementId(elmt)},false);
因?yàn)樵贔F中給元素注冊(cè)事件的時(shí)候，不需要事件名稱前面的“on”，所以要把on給替換掉。
好啦，如果今后各位同行在開發(fā)項(xiàng)目中，遇到要用JS動(dòng)態(tài)給元素添加事件的時(shí)候，就可以采用上面的方法。那樣就可以避免用戶在用FF瀏覽器時(shí)候不能使用你幸苦開發(fā)的功能了。
相關(guān)文章
BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的方法
這篇文章主要為大家詳細(xì)介紹了BootStrap selectpicker后臺(tái)動(dòng)態(tài)綁定數(shù)據(jù)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
thinkjs微信中控之微信鑒權(quán)登陸的實(shí)現(xiàn)代碼
這篇文章主要介紹了thinkjs微信中控之微信鑒權(quán)登陸的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了JavaScript判斷對(duì)象是否為數(shù)組的三種方法,感興趣的小伙伴們可以參考一下2015-12-12
微信小程序數(shù)據(jù)監(jiān)聽器使用實(shí)例詳解
這篇文章主要介紹了微信小程序數(shù)據(jù)監(jiān)聽器使用實(shí)例，數(shù)據(jù)監(jiān)聽器用于監(jiān)聽和響應(yīng)任何屬性和數(shù)據(jù)字段的變化，從而執(zhí)行特定的操作。它的作用類似于vue中的watch偵聽器2023-04-04
原生js實(shí)現(xiàn)給指定元素的后面追加內(nèi)容
給指定元素的后面追加一些自己想要實(shí)現(xiàn)的效果或者是一些屬性之類的，有木有遇到過，接下來(lái)為大家詳細(xì)介紹下追加的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈2013-04-04
整理關(guān)于Bootstrap導(dǎo)航的慕課筆記
這篇文章主要為大家整理了關(guān)于Bootstrap導(dǎo)航的慕課筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
layui數(shù)據(jù)表格跨行自動(dòng)合并的例子
今天小編就為大家分享一篇layui數(shù)據(jù)表格跨行自動(dòng)合并的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-09-09
我們提倡盡可能使用CSS，而且我們常常能做到這一點(diǎn)。現(xiàn)代瀏覽器有很好的CSS支持-這無(wú)疑足夠好讓你使用CSS來(lái)控制布局和版面設(shè)計(jì)。但是有時(shí)候，某些網(wǎng)頁(yè)元素在不同的瀏覽器會(huì)出現(xiàn)不同。2010-01-01
這篇文章主要介紹了微信小程序日歷彈窗選擇器，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
TypeScript?類型斷言的幾種實(shí)現(xiàn)
本文主要介紹了TypeScript?類型斷言的實(shí)現(xiàn)，有使用關(guān)鍵字as和標(biāo)簽<>兩種方式，具有一定的參考價(jià)值，感興趣的可以了解一下2024-01-01