在 JavaScript 的 DOM 事件模型中，通過呼叫物件的 addEventListener() 方法註冊事件。用法如下：
element.addEventListener(String type,Function listener,boolean useCaptrue);

引數說明如下：

• type：註冊事件的型別名。事件型別與事件屬性不同，事件型別名沒有 on 字首。例如，對於事件屬性 onclick 來說，所對應的事件型別為 click。
• listener：監聽函式，即事件處理函式。在指定型別的事件發生時將呼叫該函式。在呼叫這個函式時，預設傳遞給它的唯一引數是 event 物件。
• useCaptrue：是一個布林值。如果為 true，則指定的事件處理函式將在事件傳播的捕獲階段觸發；如果為 false，則事件處理函式將在冒泡階段觸發。

示例1

下面示例使用 addEventListener() 為所有按鈕註冊 click 事件。首先，呼叫 document 的 getElementsByTagName() 方法捕獲所有按鈕物件；然後，使用 for 語句遍歷按鈕集（btn），並使用 addEventListener() 方法分別為每一個按鈕註冊事件函式，獲取當前物件所顯示的文字。

<button id="btn1" onclick="btn1();">按 鈕 1</button>
<button id="btn2" onclick="btn2(event);">按 鈕 2</button>
<script>
  var btn = document.getElementsByTagName("button"); //捕獲所有按鈕
  for(var i in btn){          //遍歷按鈕集合
   btn[i].addEventListener("click",function(){
    alert(this.innerHTML);
  },true);  //為每個按鈕物件註冊一個事件處理函式，定義在捕獲階段進行響應
  }
</script> 

在瀏覽器中預覽，單擊不同的按鈕，則瀏覽器會自動顯示按鈕的名稱。效果如圖所示：

使用 addEventListener() 方法能夠為多個物件註冊相同的事件處理函式，也可以為同一個物件註冊多個事件處理函式。為同一個物件註冊多個事件處理函式對於模組化開發非常有用。

示例2

在下面示例中，為段落文字註冊兩個事件：mouseover 和 mouseout。當游標移到段落文字上面時會顯示為藍色背景，而當游標移出段落文字時會自動顯示為紅色背景。這樣就不需要破壞文件結構為段落文字增加多個事件屬性。

<p id="p1">為物件註冊多個事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕獲段落元素的控制代碼
  p1.addEventListener("mouseover",function () {
    this.style.background = 'blue';
  },true); //為段落元素註冊第1個事件處理函式
  p1.addEventListener("mouseout",true); //為段落元素註冊第2個事件處理函式
</script>

IE 事件模型使用 attachEvent() 方法註冊事件。用法如下：

element.attachEvent(etype,eventName)

引數列表如下：

• etype：設定事件型別，如 onclick、onkeyup、onmousemove 等。
• eventName：設定時間名稱，也就是事件處理函式。

示例3

在下面示例中，為段落標籤 <p> 註冊兩個事件：mouseover 和 mouseout，設計當游標經過時，段落文字背景色顯示為藍色，當游標移開之後，背景色顯示為紅色。

<p id="p1">為物件註冊多個事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕獲段落元素
  p1.attachEvent("onmouseover",function () {
    this.style.background = 'blue';
  }); //註冊mouseover事件
  p1.attachEvent("onmouseout",function () {
    this.style.background = 'red';
  }); //註冊mouseout事件
</script>

使用 attachEvent() 註冊事件時，其事件處理函式的呼叫物件不再是當前事件物件本身，而是 window 物件，因此事件函式中的 this 就指向 window，而不是當前物件，如果要獲取當前物件，應該使用 event 的 srcElement 屬性。

IE 事件模型中的 attachEvent() 方法第 1 個引數為事件型別名稱，需要加上 on 字首，而使用 addEventListener() 方法時，則不需要這個 on 字首，如 click。

到此這篇關於JS addEventListener()和attachEvent()方法實現註冊事件的文章就介紹到這了,更多相關JS addEventListener()和attachEvent()內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！