[JavaScript進階程式設計]之事件篇01

標籤：

事件流

IE提出的是事件冒泡流，而Netscape提出的是事件捕獲流。

• 事件冒泡流
  即當事件開始時，由具體的節點接收，然後逐級向上傳播到較為不具體的節點。
  
• 事件捕獲流
  即由不具體的節點逐級向下傳播到具體的節點。
  事件捕獲的起點和事件冒泡的中終點都是window對象。低版本IE除外。
• DOM事件流
  DOM2級事件分為三個階段：捕獲階段、處於目標階段、冒泡階段。
  

事件處理

• DOM0級事件處理
  將一個函數賦值給一個事件處理常式的屬性，回調中的this為當前元素，只能綁定一個回調，只執行最後一次綁定的回調
  

  1 //綁定事件2 var btn = document.getElementById(‘mybtn‘);3 btn.onclick = function () {4     console.info(this.id)  //mybtn5 }6 7 //刪除事件8 var btn = document.getElementById(‘mybtn‘);9 btn.onclick = null;

 

• DOM2級事件處理
  addEventListener：綁定事件程式，removeEventListener：刪除事件程式
  文法:target.addEventListener(type, listener[, useCapture]);

  target.removeEventListener(type, listener[, useCapture]);
  type: 事件名稱;listener: 事件的回調;useCapture：true，冒泡，false，捕獲，預設false
  DOM2級可以為一個元素繫結多個回調，按照綁定的順序依次執行。回調中的this為當前元素；removeEventListener的參數必須和addEventListener保持一致才可刪除事件。

• IE事件處理
  attachEvent：綁定事件，detachEvent：刪除程式
  IE8以下的瀏覽器只支援事件冒泡，只接受兩個參數（type，listener），type = "on" + type;回調中的this為window對象；可以綁定多個回調，不過執行的順序與綁定的順序是相反的。
• 跨瀏覽器事件處理
  

   1 var EventUtil = { 2     addHandler: function (element, type, handler) { 3         if (element.addEventListener) { 4             element.addEventListener(type, handler, false); 5         } else if (element.attachEvent) { 6             element.attachEvent(‘on‘ + type, handler); 7         } else { 8             element[‘on‘ + type] = handler; 9         }10     },11     removeHandler: function (element, type, handler) {12         if (element.removeEventListener) {13             element.removeEventListener(type, handler, false);14         } else if (element.detachEvent) {15             element.detachEvent(‘on‘ + type, handler);16         } else {17             element[‘on‘ + type] = handler;18         }19     }20 }

事件對象

• DOM中的事件對象
  常見的幾種event存取方法，事件的回調中都包含event對象，this為currentTarget
  

   1 var btn = document.getElementById(‘myBtn‘); 2  3 //方式一 4 btn.onclick = function (event) { 5     console.info(event.type); //‘click‘ 6 }; 7  8 //方式二 9 btn.addEventListener(‘click‘, function (event) {10     console.info(event.type); //‘click‘11 });12 13 //方式三14 <input type="button" value="click me" onclick="alert(event.type)"> //‘click‘

  event對象包含以下屬性和方法，具體可參考Event
  
• IE中的事件對象
  事件回呼函數的範圍會變，this值不固定
  

   1 var btn = document.getElementById(‘mybtn‘); 2  3 //方式一 4 btn.onclick = function () { 5     var event = window.event; 6     console.info(event.type); //‘click‘ 7 }; 8  9 //方式二，也可以使用window.event來訪問10 btn.attachEvent(‘onclick‘, function (event) {11     console.info(event.type); //‘click‘12 });13 14 //方式三15 <input type="button" value="click me" onclick="alert(event.type)"> //‘click‘

   

  event都有以下的屬性和方法
  
  
  
• 跨瀏覽器處理
  

   1 var EventUtil = { 2     addHandler: function (element, type, handler) { 3         if (element.addEventListener) { 4             element.addEventListener(type, handler, false); 5         } else if (element.attachEvent) { 6             element.attachEvent(‘on‘ + type, handler); 7         } else { 8             element[‘on‘ + type] = handler; 9         }10     },11     removeHandler: function (element, type, handler) {12         if (element.removeEventListener) {13             element.removeEventListener(type, handler, false);14         } else if (element.detachEvent) {15             element.detachEvent(‘on‘ + type, handler);16         } else {17             element[‘on‘ + type] = handler;18         }19     },20     getEvent: function (event) {21         return event ? event : window.event;22     },23     getTarget: function (event) {24         return event.target || event.srcElement;25     },26     //阻止預設事件27     preventDefault: function (event) {28         if (event.preventDefault) {29             event.preventDefault();30         } else {31             event.returnValue = false;32         }33     },34     //阻止捕獲、冒泡35     stopPropagation: function (event) {36         if (event.stopPropagation) {37             event.stopPropagation();38         } else {39             event.cancelBubble = true;40         }41     }42 }

   

[JavaScript進階程式設計]之事件篇01