js事件繫結

事件繫結，常見的是odiv.οnclick=function(); 這種方式繫結事件太單一，如果繫結多個，那麼最後乙個事件會覆蓋掉之前的，也就是說只執行最後一次繫結的事件，這裡要說的是addeventlistener方法，和ie下的attachevent方法：

html**如下：

box son1 son2

介面如下圖：

下面是中的**(非ie瀏覽器下addeventlistener)：

window.οnlοad=function())
oson1.addeventlistener('click',function())
obox.addeventlistener('click',function())
}

上述**的addeventlistener（）只有兩個引數，其實還有第三個引數：true/false 。預設的是false，代表在冒泡階段呼叫事件處理程式，true代表在事件捕獲階段處理程式，

生活中還是以冒泡階段處理為多。下面是ie下：

window.οnlοad=function())
oson1.attachevent('onclick',function())
obox.attachevent('onclick',function())
}

ie下attachevent()只有兩個引數，沒有第三個引數的true或false。因為ie預設的就只能是冒泡階段捕獲，這是當年瀏覽器大戰的原因，個人猜測，可能是因為ie使用者量多吧，導致現在預設的都是在冒泡階段處理。

事件繫結最大的好處是可以繫結多個事件，對同乙個元素物件上繫結的多個事件來說，非ie下這些事件的處理順序是符合**繫結的先後順序的，但在ie下對於多個事件繫結的處理順序正好相反。如：

非ie：

oson2.addeventlistener('click',function(),true);  //先彈出 first
oson2.addeventlistener('click',function(),true); //後彈出 second

ie：

oson2.attachevent('onclick',function());      //後彈出first
oson2.attachevent('onclick',function()); //先彈出second

既然能繫結事件，肯定能取消繫結事件，非ie下為removeeventlistener(),ie 下為detachevent() ，這裡需要注意的是括號內的引數必須和事件繫結時的引數一樣，但對於匿名函式來說，哪怕函式一樣也取消不了繫結，因為兩者被認為是不同的，如下**就取消不了繫結：

oson2.addeventlistener('click',function()); 
oson2.removeeventlistener('click',function()) //取消繫結不成功

本人又用了函式宣告式嘗試一下發現也不行：

oson2.addeventlistener('click',function test());   
oson2.removeeventlistener('click',function test());

如上面兩段**所述把匿名函式function () 改為function test()一樣不行。

結論：不管是匿名函式，還是函式宣告都視為不同引數，不能成功取消繫結。

解決方法就是先宣告乙個函式，兩者傳入共同的函式名即可：

先宣告函式：

var test=function();

再把函式名當引數傳入：

oson2.addeventlistener('click',test);
oson2.removeeventlistener('click',test); //成功取消繫結

以上**是能成功的，但還要注意第三個引數也要一致，上述**沒有第三個引數則預設都是false，如果乙個為true，那也不能取消成功：

oson2.addeventlistener('click',t,true); //第三個引數為true表示 捕獲時執行事件程式
oson2.removeeventlistener('click',t);   //預設為false ，不同的引數，不能取消繫結

兩者都為true即可：

oson2.addeventlistener('click',t,true);
oson2.removeeventlistener('click',t,true);

下面是為解決瀏覽器相容封裝事件繫結：

function addevent(element,event,fun)
else if(element.attachevent)
}

下面是取消事件繫結的封裝：

function removeevent(element,event,fun)
else if(element.detachevent)
}

封裝後再使用事件繫結和取消繫結就方便很多：

var t=function();
var t1=function();
var t2=function();

繫結：

addevent(obox,'click',t);
addevent(oson1,'click',t1);
addevent(oson2,'click',t2);

取消繫結：

removeevent(obox,'click',t);
removeevent(oson1,'click',t1);
removeevent(oson2,'click',t2);

以上就是事件繫結的內容，也是自己的一次回顧。