JS事件流與事件處理程序的示例分析

這篇文章主要介紹JS事件流與事件處理程序的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1.事件流：從頁面中接收事件的順序

1.1 IE ：事件冒泡流
1.2 Netscape ：事件捕獲
1.3 DOM事件流 ：事件捕獲階段——事件目標階段——事件冒泡階段
DOM2級事件規定 ：捕獲階段不會涉及目標事件。

2.事件處理程序

事件 ：用戶或者瀏覽器自身執行的 某種動作
事件處理程序 ：響應某個事件的 函數 。

2.1 HTML事件處理程序

用一個與該事件處理程序同名的HTML特性來指定。

2.1.1包含要執行的具體動作

<input type="button" value="Click me" onclick="alert('Clicked')"/>

2.1.2 調用其他地方定義的腳本

<input type="button" value="Click me" onclick="showMessage()"/>

2.1.3 缺點

• 1.時差問題：使用try-catch塊捕捉錯誤。onclick="try { showMessage() ;} catch(ex) {} "
 

• 2.程序的作用域鏈在不同瀏覽器中會導致不同結果

• 3.HTML和JS代碼耦合緊密

2.2 DOM0級事件處理程序

將一個函數賦值給一個事件處理程序屬性，例如：onclick。

為事件處理程序賦值。

btn.onclick = function() {
  alert( this.id );
};

事件處理程序在元素的作用域中運行，this指向當前元素。

刪除事件處理程序：

btn.onclick = null;

2.3 DOM2級事件處理程序

addEventListener(處理的事件名，事件處理程序函數，布爾值)；

removeEventListener(處理的事件名，事件處理程序函數，布爾值)；

布爾值：捕獲階段調用事件處理程序：true。冒泡階段調用：false。大多數情況下用false。

btn.addEventListener("click" , function() {
  alert(this.id);
}, false);

好處：可以添加多個事件處理程序。事件按照添加先后順序執行。

問題：匿名函數無法移除。

最好寫成

var handler = function(){
  alert(this.id);
};
btn.addEventListener("click", handler, false);
btn.removeEventListener("click", handler, false);

2.4 IE事件處理程序

attachEvent(事件處理程序名稱，事件處理程序函數)；
detachEvent(事件處理程序名稱，事件處理程序函數)；

通過該方法添加的事件處理程序，都會被添加到冒泡階段。

btn.attachEvent("onclick",function(){
  alert("clicked");
});

注意：使用DOM級方法時，事件會在所屬元素的作用域內運行；使用attachEvent()方法，事件處理程序會在全局作用域運行，this==window。

好處：可以添加多個事件處理程序。后添加先執行。

問題：匿名函數無法移除。

var handler = function(){
  alert(this.id);
};
btn.attachEvent ("onclick", handler);
btn.detachEvent ("onclick", handler);

2.5跨瀏覽器事件處理程序

• 1.創建一個方法addHandler():區分使用哪種方法來添加事件；

• 2.創建一個對象EventUtil。擁有兩個方法。

• 3.addHandler(要操作的元素，事件名稱，事件處理函數)。

• 4.removeHandler(要操作的元素，事件名稱，事件處理函數)。

var EventUtil = {
  addHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.addEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.attachEvent("on"+type, handler);
    }else {
      element.["on"+type] =handler;
    }
  },
  removeHandler: function(element,type,handler){
    if(element.addEventLister) {
      element.removeEventListener(type,handler,false);
    } else if(element.attachEvent) {
      element.detachEvent("on"+type, handler);
    }else {
      element.["on"+type] = null;
    }
  }
};

使用：

EventUtil.addHandler(btn ,"click",handler);
EventUtil.removeHandler(btn ,"click",handler);

以上是“JS事件流與事件處理程序的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！