JS addEventListener()和attachEvent()方法：註冊事件

在 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> 

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

---