javascript attachEvent綁定多個事件執行順序問題

來源:互聯網
上載者:User

常見的綁定事件有直接綁定在頁面元素中比如<div id="wrap" onclick="a();"></div>,這個換種方法也就是分離出來寫在js代碼裡如document.getElementById('wrap').onclick = function(){a();},此時如果需要綁定多個方法則直接寫在一起即可如document.getElementById('wrap').onclick = function(){a();b();}或<div id="wrap" onclick="a();b();"></div>。然而我們時常這樣來寫一個單獨的Binder 方法bind(el,name,fn),具體代碼如下。 複製代碼 代碼如下:function bind(el,name,fn){ //綁定事件
return el.addEventListener?el.addEventListener(name,fn,false):el.attachEvent('on'+name,fn);
}

這樣在一個dom對象上綁定多個click事件如 複製代碼 代碼如下:bind(document.getElementById('wrap'),'click',a);
bind(document.getElementById('wrap'),'click',b);

在ie6,7,8下面就會出現執行順序的問題(ie9下面暫時不清楚,沒有環境測試,希望有環境的朋友幫忙測試下),而其他瀏覽器ff,chrome,safari下則是按照順序執行。尋找資料得到的是ie8下會顛倒執行順序,ie6,ie7則是隨機執行的,這個我實在不明白ie怎麼會出現隨機執行?難不成是別有目的的?如果有知道這樣做的目的的朋友也能告知一聲,經過自己的測試證實ie8確實顛倒執行的順序而ie6,7則無規律的執行。我理解的隨機執行應該是每次執行都是不一樣的順序然而實際上只要寫的時候順序固定那麼執行的時候順序也是固定的(雖然無規律也或許是我沒找出規律)。

但是jQuery的$.bind(type, data, fn)方法則沒有這個問題,找jQuery的原代碼看了下,發現裡面也是用的 複製代碼 代碼如下:if (elem.addEventListener)
    elem.addEventListener(type, handle, false);
  else if (elem.attachEvent)
    elem.attachEvent("on" + type, handle);

這樣方法綁定的事件,但是在此之前會判斷該jquery對象上面是否已經同一個類型的handlers,如果有則不會重複綁定而是把該對象的handle合并到handlers中成為一個方法相當於這樣function c(){a();b();},按照順序的壓入方法這樣實現在ie下不會出現綁定多個方法時出現執行順序混亂了.

如下是網友的回複:

IE6 7 會隨機執行?我上次測試的時候貌似順序相反,沒有隨機執行這一說。
我特意去測試了 複製代碼 代碼如下:<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>

並無隨機一說 IE6。不知道你如何測試的。

作者的回答:
我拿你的代碼在ie6,ie7下測試也是無規律的執行順序,這裡是資料出處http://www.w3help.org/zh-cn/causes/SD9011,上面所謂的隨機執行我也覺得欠妥,就如我博文裡說的那樣,執行順序是沒有規律的,但是每次執行的順序是一樣的,如果是隨機那麼應該每次執行的順序都不一樣才對,這才是我想要說明的

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.