在 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 onclick='btn1();'>按 鈕 1</button><button 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', function () { this.style.background = ’blue’; }, 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()內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！