快捷導(dǎo)航

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)寫在js代碼里如document.getElementById('wrap').onclick = function(){a();}，此時(shí)如果需要綁定多個(gè)方法則直接寫在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>。然而我們時(shí)常這樣來(lái)寫一個(gè)單獨(dú)的綁定方法bind(el,name,fn)，具體代碼如下。

復(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í)際上只要寫的時(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ō)明的

您可能感興趣的文章: