事件綁定的執行次序

在W3C的標準下，事件綁定使用的是addEventLisenter。

但微軟這家伙經常不按常理出牌。它提供的事件綁定方法是attachEvent。

關于attachEvent的種種不足，先不一一列舉?；蛟S我們已經忍受著用attachEvent來綁定事件。 //object.attachEvent(event, function);

el.attachEvent('onclick', method);

但當在同一元素上綁定多次，你就會知道，微軟的這個私人的方法又是多么“不可理喻”。 el.attachEvent("onclick", method1);

el.attachEvent("onclick", method2);

el.attachEvent("onclick", method3);

el.attachEvent("onclick", method4);

在各個IE下運行，點擊el后，各個方法的執行次序是：

IE6/IE7: method2 -> method4 -> method3 -> method1

IE8: method4 -> method3 -> method2 -> method1

IE9: method1 -> method2 -> method3 -> method4

IE6/7是一種看不出規律的隨機執行，IE8是逆序執行，IE9是順序執行。

無論常識還是W3C標準，這種同一個事件綁定了多個方法的情況，方法的執行次序都應該是先綁定先執行。從IE6－IE9的演變，可以看得出微軟還是有在不斷改進的。但畢竟各個版本的IE存在，使得我們不得不注意綁定在同一事件上的多個方法之間不要有順序依賴。

YUI2的事件綁定并沒有對執行次序做兼容，如果有些場景的確需要綁定多個方法且方法間需要順序執行。那我們就只能自己實現了，大致思路是：在先判斷綁定的el對象上是否已經同一個事件類型的handlers，如果有則不會重復綁定而是把該對象的handler合并到handlers中成為一個方法，相當于這樣function c(){ a(); b();}，按照順序的壓入方法實現在IE下不會出現綁定多個方法時能順序執行。 functionaddEvent(el, type, handler){

if(el.attachEvent){// IE

// 為元素的事件類型創建一個哈希表

el._events=el._events||{};

if(!handler){return;}

// 取得事件處理函數的數組的引用

var handlers =el._events[type];

if(handlers){

if(typeofhandler._index==='undefined'||

handlers[handler._index]!== handler){

// 將事件處理函數存入數組