学习笔记（2）_2008-07-03_about attachEvent and addEventListener()

有时候当某一对象的某一事件被触发时，它所要执行的程序可能是一大串，有可能是要呼叫某一函数，也有可能同时又要呼叫另一函数。



document.getElementById("btn").onclick = method1;

document.getElementById("btn").onclick = method2;

document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行



在IE中使用addachEvent ,



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



看看gmail的代码



var Ka=navigator.userAgent.toLowerCase();

var rt=Ka.indexOf("opera")!=-1;

var r=Ka.indexOf("msie")!=-1&&(document.all&&!rt);



function Zl(a,b,c)
{
    if(r)
     {
       a.attachEvent("on"+b,c)
      }
     else
       {
          a.addEventListener(b,c,false)
        }
}
addEventListener的第三個參數介绍：
這個參數叫做useCapture，是一個boolean值，
就是true or false，如果送出true的話就是瀏覽器會使用Capture方式，
false的話是Bubbling，只有在特定狀況下才會有影響，通常建議是false，
而會有影響的情形是目標元素(target element)有祖先元素(ancestor element)，
而且也有同樣的事件對應函數

一般來說，如果我在內層藍色的元素上click不只會觸發藍色元素的click事件，
還會同時觸發紅色元素的click事件，
而useCapture這個參數就是在控制這時候兩個click事件的先後順序。
如果是false，那就會使用bubbling，他是從內而外的流程，
所以會先執行藍色元素的click事件再執行紅色元素的click事件，
如果是true，那就是capture，和bubbling相反是由外而內，
會先執行紅色元素的click事件才執行藍色元素的click事件。
如果不同層的元素使用的useCapture不同呢？就是會先從最外層元素往目標元素尋找設定
為capture的事件，到達目標元素執行目標元素的事件後，再尋原路往外尋找設定為bubbling的事件。