javascript attachEvent綁定多個(gè)事件執(zhí)行順序問(wèn)題
更新時(shí)間:2010年10月20日 15:11:33 作者:
執(zhí)行順序是沒(méi)有規(guī)律的,但是每次執(zhí)行的順序是一樣的,如果是隨機(jī)那么應(yīng)該每次執(zhí)行的順序都不一樣才對(duì),這才是我想要說(shuō)明的
常見(jiàn)的綁定事件有直接綁定在頁(yè)面元素中比如<div id="wrap" onclick="a();"></div>,這個(gè)換種方法也就是分離出來(lái)寫(xiě)在js代碼里如document.getElementById('wrap').onclick = function(){a();},此時(shí)如果需要綁定多個(gè)方法則直接寫(xiě)在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>。然而我們時(shí)常這樣來(lái)寫(xiě)一個(gè)單獨(dú)的綁定方法bind(el,name,fn),具體代碼如下。
function bind(el,name,fn){ //綁定事件
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on'+name,fn);
}
這樣在一個(gè)dom對(duì)象上綁定多個(gè)click事件如
bind(document.getElementById('wrap'),'click',a);
bind(document.getElementById('wrap'),'click',b);
在ie6,7,8下面就會(huì)出現(xiàn)執(zhí)行順序的問(wèn)題(ie9下面暫時(shí)不清楚,沒(méi)有環(huán)境測(cè)試,希望有環(huán)境的朋友幫忙測(cè)試下),而其他瀏覽器ff,chrome,safari下則是按照順序執(zhí)行。查找資料得到的是ie8下會(huì)顛倒執(zhí)行順序,ie6,ie7則是隨機(jī)執(zhí)行的,這個(gè)我實(shí)在不明白ie怎么會(huì)出現(xiàn)隨機(jī)執(zhí)行?難不成是別有目的的?如果有知道這樣做的目的的朋友也能告知一聲,經(jīng)過(guò)自己的測(cè)試證實(shí)ie8確實(shí)顛倒執(zhí)行的順序而ie6,7則無(wú)規(guī)律的執(zhí)行。我理解的隨機(jī)執(zhí)行應(yīng)該是每次執(zhí)行都是不一樣的順序然而實(shí)際上只要寫(xiě)的時(shí)候順序固定那么執(zhí)行的時(shí)候順序也是固定的(雖然無(wú)規(guī)律也或許是我沒(méi)找出規(guī)律)。
但是jQuery的$.bind(type, data, fn)方法則沒(méi)有這個(gè)問(wèn)題,找jQuery的原代碼看了下,發(fā)現(xiàn)里面也是用的
if (elem.addEventListener)
elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
elem.attachEvent("on" + type, handle);
這樣方法綁定的事件,但是在此之前會(huì)判斷該jquery對(duì)象上面是否已經(jīng)同一個(gè)類型的handlers,如果有則不會(huì)重復(fù)綁定而是把該對(duì)象的handle合并到handlers中成為一個(gè)方法相當(dāng)于這樣function c(){a();b();},按照順序的壓入方法這樣實(shí)現(xiàn)在ie下不會(huì)出現(xiàn)綁定多個(gè)方法時(shí)出現(xiàn)執(zhí)行順序混亂了.
如下是網(wǎng)友的回復(fù):
IE6 7 會(huì)隨機(jī)執(zhí)行?我上次測(cè)試的時(shí)候貌似順序相反,沒(méi)有隨機(jī)執(zhí)行這一說(shuō)。
我特意去測(cè)試了
<script type="text/javascript">
var bind = function(e,t,fn){
if(e.addEventListener){
e.addEventListener(t, fn, false);
}else if(e.attachEvent){
e.attachEvent('on'+ t, fn);
}
}
</script>
<a href="#" id="test1">test</a>
<script type="text/javascript">
var e = document.getElementById('test1');
bind(e,'click',function(){alert(1)});
bind(e,'click',function(){alert(2)});
bind(e,'click',function(){alert(3)});
bind(e,'click',function(){alert(4)});
bind(e,'click',function(){alert(5)});
</script>
并無(wú)隨機(jī)一說(shuō) IE6。不知道你如何測(cè)試的。
作者的回答:
我拿你的代碼在ie6,ie7下測(cè)試也是無(wú)規(guī)律的執(zhí)行順序,這里是資料出處http://www.w3help.org/zh-cn/causes/SD9011,上面所謂的隨機(jī)執(zhí)行我也覺(jué)得欠妥,就如我博文里說(shuō)的那樣,執(zhí)行順序是沒(méi)有規(guī)律的,但是每次執(zhí)行的順序是一樣的,如果是隨機(jī)那么應(yīng)該每次執(zhí)行的順序都不一樣才對(duì),這才是我想要說(shuō)明的
復(fù)制代碼 代碼如下:
function bind(el,name,fn){ //綁定事件
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on'+name,fn);
}
這樣在一個(gè)dom對(duì)象上綁定多個(gè)click事件如
復(fù)制代碼 代碼如下:
bind(document.getElementById('wrap'),'click',a);
bind(document.getElementById('wrap'),'click',b);
在ie6,7,8下面就會(huì)出現(xiàn)執(zhí)行順序的問(wèn)題(ie9下面暫時(shí)不清楚,沒(méi)有環(huán)境測(cè)試,希望有環(huán)境的朋友幫忙測(cè)試下),而其他瀏覽器ff,chrome,safari下則是按照順序執(zhí)行。查找資料得到的是ie8下會(huì)顛倒執(zhí)行順序,ie6,ie7則是隨機(jī)執(zhí)行的,這個(gè)我實(shí)在不明白ie怎么會(huì)出現(xiàn)隨機(jī)執(zhí)行?難不成是別有目的的?如果有知道這樣做的目的的朋友也能告知一聲,經(jīng)過(guò)自己的測(cè)試證實(shí)ie8確實(shí)顛倒執(zhí)行的順序而ie6,7則無(wú)規(guī)律的執(zhí)行。我理解的隨機(jī)執(zhí)行應(yīng)該是每次執(zhí)行都是不一樣的順序然而實(shí)際上只要寫(xiě)的時(shí)候順序固定那么執(zhí)行的時(shí)候順序也是固定的(雖然無(wú)規(guī)律也或許是我沒(méi)找出規(guī)律)。
但是jQuery的$.bind(type, data, fn)方法則沒(méi)有這個(gè)問(wèn)題,找jQuery的原代碼看了下,發(fā)現(xiàn)里面也是用的
復(fù)制代碼 代碼如下:
if (elem.addEventListener)
elem.addEventListener(type, handle, false);
else if (elem.attachEvent)
elem.attachEvent("on" + type, handle);
這樣方法綁定的事件,但是在此之前會(huì)判斷該jquery對(duì)象上面是否已經(jīng)同一個(gè)類型的handlers,如果有則不會(huì)重復(fù)綁定而是把該對(duì)象的handle合并到handlers中成為一個(gè)方法相當(dāng)于這樣function c(){a();b();},按照順序的壓入方法這樣實(shí)現(xiàn)在ie下不會(huì)出現(xiàn)綁定多個(gè)方法時(shí)出現(xiàn)執(zhí)行順序混亂了.
如下是網(wǎng)友的回復(fù):
IE6 7 會(huì)隨機(jī)執(zhí)行?我上次測(cè)試的時(shí)候貌似順序相反,沒(méi)有隨機(jī)執(zhí)行這一說(shuō)。
我特意去測(cè)試了
復(fù)制代碼 代碼如下:
<script type="text/javascript">
var bind = function(e,t,fn){
if(e.addEventListener){
e.addEventListener(t, fn, false);
}else if(e.attachEvent){
e.attachEvent('on'+ t, fn);
}
}
</script>
<a href="#" id="test1">test</a>
<script type="text/javascript">
var e = document.getElementById('test1');
bind(e,'click',function(){alert(1)});
bind(e,'click',function(){alert(2)});
bind(e,'click',function(){alert(3)});
bind(e,'click',function(){alert(4)});
bind(e,'click',function(){alert(5)});
</script>
并無(wú)隨機(jī)一說(shuō) IE6。不知道你如何測(cè)試的。
作者的回答:
我拿你的代碼在ie6,ie7下測(cè)試也是無(wú)規(guī)律的執(zhí)行順序,這里是資料出處http://www.w3help.org/zh-cn/causes/SD9011,上面所謂的隨機(jī)執(zhí)行我也覺(jué)得欠妥,就如我博文里說(shuō)的那樣,執(zhí)行順序是沒(méi)有規(guī)律的,但是每次執(zhí)行的順序是一樣的,如果是隨機(jī)那么應(yīng)該每次執(zhí)行的順序都不一樣才對(duì),這才是我想要說(shuō)明的
您可能感興趣的文章:
- JS中動(dòng)態(tài)添加事件(綁定事件)的代碼
- JavaScript給按鈕綁定點(diǎn)擊事件(onclick)的方法
- Javascript 事件流和事件綁定
- javascript事件委托的方式綁定詳解
- js移除事件 js綁定事件實(shí)例應(yīng)用
- js 綁定帶參數(shù)的事件以及手動(dòng)觸發(fā)事件
- JS 事件綁定函數(shù)代碼
- javascript閉包傳參和事件的循環(huán)綁定示例探討
- javascript 處理事件綁定的一些兼容寫(xiě)法
- JS中批量給元素綁定事件過(guò)程中的相關(guān)問(wèn)題使用閉包解決
- JavaScript三種綁定事件方式及相互之間的區(qū)別分析
相關(guān)文章
js生成的驗(yàn)證碼的實(shí)現(xiàn)與技術(shù)分析
本文主要是分享了一段由JS生成驗(yàn)證碼并驗(yàn)證的代碼,非常簡(jiǎn)單,并分析了此方法的實(shí)用性,提供給大家參考下2014-09-09JavaScript中for..in循環(huán)陷阱介紹
for...in循環(huán)中的循環(huán)計(jì)數(shù)器是字符串,而不是數(shù)字它包含當(dāng)前屬性的名稱或當(dāng)前數(shù)組元素的索引,下面有個(gè)不錯(cuò)的示例大家可以參考下2013-11-11原生JS實(shí)現(xiàn)《別踩白塊》游戲(兼容IE)
本文主要介紹了原生JS實(shí)現(xiàn)《別踩白塊》游戲(兼容IE)的示例代碼。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼
最近在項(xiàng)目中經(jīng)常遇到使用富文本框的情況,下面這篇文章主要給大家介紹了關(guān)于javascript實(shí)現(xiàn)富文本框選中對(duì)齊的思路與代碼,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03Three.js如何用軌跡球插件(trackball)增加對(duì)模型的交互功能詳解
這篇文章主要給大家介紹了關(guān)于Three.js如何用軌跡球插件,也就是trackball增加對(duì)模型的交互功能的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起看看吧。2017-09-09JS畫(huà)布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果
這篇文章主要為大家詳細(xì)介紹了JS畫(huà)布動(dòng)態(tài)實(shí)現(xiàn)黑客帝國(guó)背景效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11微信小程序中多個(gè)頁(yè)面?zhèn)鲄⑼ㄐ诺膶W(xué)習(xí)與實(shí)踐
剛接觸微信小程序,對(duì)里面的語(yǔ)法和屬性還不怎么了解,最近正在努力學(xué)習(xí)中,下面這篇文章主要給大家介紹了微信小程序中多個(gè)頁(yè)面?zhèn)鲄⑼ㄐ诺南嚓P(guān)資料,是最近學(xué)習(xí)的一個(gè)內(nèi)容總結(jié),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-05-05