《javascript進階程式設計》學習筆記（十）：也說事件

 

想學好javascript必須學會處理各種各樣的事件(event)。
關於各種各樣的事件以及瀏覽器的支援程度，可以在internet上查詢官方文檔。
這裡只記錄一些個人認為有必要說明的東西。

1.事件流（envent flow）,說白了就是一系列的事件響應。當你點擊了頁面上的一個按鈕，會發生什麼?實際上，是點擊了該按鈕、按鈕的容器以及整個頁面，每一個元素都按照特定順序響應這個事件。按照事件的響應順序，事件分為：冒泡型事件和捕獲型事件.

(1).冒泡型事件。以IE為代表的解決方案。事件是按照DOM的階層由底端升至頂端。
事件的回應程式式如（IE6中）：

(2).捕獲型事件。以Netscape Navigator4.0為代表的解決方案。事件自頂向下。
事件的回應程式式如：

2.DOM事件流
DOM標準，要求同時支援兩種事件模型，順序如。

注意：
<1>.DOM事件模型中，文本節點text也觸發事件（IE不支援）。
<2>.在IE中，要阻止時間進一步冒泡，使用oEvent.cancelBubble = true;
  在mozilla中,使用 oEvent.stopPropagation()方法即可。

3.需要特別指明的是，IE和其他支援標準的瀏覽器對添加刪除事件的不同處理。（為了支援IE我們總是需要再寫一份代碼......）

聲明：以下內容是轉自他人的blog，本文只是以學習為目的加以引用。
\\------------- start ----------------
attachEvent() / addEventListener() 為對象添加觸發事件
有時候當某一對象的某一事件被觸發時，它所要執行的程式可能是一大串，有可能是要呼叫某一函數，也有可能同時又要呼叫另一函數。

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

在IE中使用attachEvent ,

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)}}
\\------------- end ----------------