addEventListener 和attachEvent用法

對於IE的attachEvent方法可能大家都比較熟，現在說說FireFox的addEventListener的用法。

addEventListener的參數一共有三個，文法為：

element.addEventListener(type,listener,useCapture)

下面是詳解

• 其中element是要綁定函數的對象。
• type是事件名稱，要注意的是"onclick"要改為"click","onblur"要改為"blur",也就是說事件名不要帶"on"。
• listener當然就是綁定的函數了，記住不要跟括弧
• 最後一個參數是個布爾值，表示該事件的響應順序,下面重點介紹一下addEventListener的第3個參數(useCapture)。

userCapture若為true,則瀏覽器採用Capture,若為false則採用bubbing方式。建議用false,看個例子吧。

html代碼

<div id="div_test"> <input type="button" id="btn_test" value="se4.cn技術基地" /> </div>

js代碼

window.onload=function(){ document.getElementById("div_test").addEventListener("click",test1,false); document.getElementById("btn_test").addEventListener("click",test2,false); } function test1(){ alert("外層div觸發") } function test2(){ alert("內層input觸發") }

自己體驗一下，如果userCapture是true則test1先觸發，如果userCapture是false則test2先觸發。

 

 

 

 

 

 

 

 

 

在近來的工作中，用到了attachEvent方法，該方法可以為某一事件附加其它的處理事件，有時候可能比較有用，這裡將其基本用法總結一下。

其文法可以查看《DHTML手冊》，裡面有詳細的說明，這裡貼一個例子，該例子來自互連網：

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;
如果這樣寫,那麼將會只有medhot3被執行

寫成這樣：
var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
執行順序為method3->method2->method1

如果是Mozilla系列，並不支援該方法，需要用到addEventListener
var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);
執行順序為method1->method2->method3