在 JavaScript 的 DOM 事件模型中，通過調(diào)用對(duì)象的 addEventListener() 方法注冊(cè)事件。用法如下：
element.addEventListener(String type, Function listener, boolean useCaptrue);
參數(shù)說明如下：
- type：注冊(cè)事件的類型名。事件類型與事件屬性不同，事件類型名沒有 on 前綴。例如，對(duì)于事件屬性 onclick 來說，所對(duì)應(yīng)的事件類型為 click。
- listener：監(jiān)聽函數(shù)，即事件處理函數(shù)。在指定類型的事件發(fā)生時(shí)將調(diào)用該函數(shù)。在調(diào)用這個(gè)函數(shù)時(shí)，默認(rèn)傳遞給它的唯一參數(shù)是 event 對(duì)象。
- useCaptrue：是一個(gè)布爾值。如果為 true，則指定的事件處理函數(shù)將在事件傳播的捕獲階段觸發(fā)；如果為 false，則事件處理函數(shù)將在冒泡階段觸發(fā)。
示例1
下面示例使用 addEventListener() 為所有按鈕注冊(cè) click 事件。首先，調(diào)用 document 的 getElementsByTagName() 方法捕獲所有按鈕對(duì)象；然后，使用 for 語(yǔ)句遍歷按鈕集（btn），并使用 addEventListener() 方法分別為每一個(gè)按鈕注冊(cè)事件函數(shù)，獲取當(dāng)前對(duì)象所顯示的文本。
|
1
2
3
4
5
6
7
8
9
10
|
<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); //為每個(gè)按鈕對(duì)象注冊(cè)一個(gè)事件處理函數(shù)，定義在捕獲階段進(jìn)行響應(yīng) }</script> |
在瀏覽器中預(yù)覽，單擊不同的按鈕，則瀏覽器會(huì)自動(dòng)顯示按鈕的名稱。效果如圖所示：
使用 addEventListener() 方法能夠?yàn)槎鄠€(gè)對(duì)象注冊(cè)相同的事件處理函數(shù)，也可以為同一個(gè)對(duì)象注冊(cè)多個(gè)事件處理函數(shù)。為同一個(gè)對(duì)象注冊(cè)多個(gè)事件處理函數(shù)對(duì)于模塊化開發(fā)非常有用。
示例2
在下面示例中，為段落文本注冊(cè)兩個(gè)事件：mouseover 和 mouseout。當(dāng)光標(biāo)移到段落文本上面時(shí)會(huì)顯示為藍(lán)色背景，而當(dāng)光標(biāo)移出段落文本時(shí)會(huì)自動(dòng)顯示為紅色背景。這樣就不需要破壞文檔結(jié)構(gòu)為段落文本增加多個(gè)事件屬性。
|
1
2
3
4
5
6
7
8
9
10
|
<p id="p1">為對(duì)象注冊(cè)多個(gè)事件</p><script> var p1 = document.getElementById("p1"); //捕獲段落元素的句柄 p1.addEventListener("mouseover", function () { this.style.background = 'blue'; }, true); //為段落元素注冊(cè)第1個(gè)事件處理函數(shù) p1.addEventListener("mouseout", function () { this.style.background = 'blue'; }, true); //為段落元素注冊(cè)第2個(gè)事件處理函數(shù)</script> |
IE 事件模型使用 attachEvent() 方法注冊(cè)事件。用法如下：
|
1
|
element.attachEvent(etype, eventName) |
參數(shù)列表如下：
- etype：設(shè)置事件類型，如 onclick、onkeyup、onmousemove 等。
- eventName：設(shè)置時(shí)間名稱，也就是事件處理函數(shù)。
示例3
在下面示例中，為段落標(biāo)簽 <p> 注冊(cè)兩個(gè)事件：mouseover 和 mouseout，設(shè)計(jì)當(dāng)光標(biāo)經(jīng)過時(shí)，段落文本背景色顯示為藍(lán)色，當(dāng)光標(biāo)移開之后，背景色顯示為紅色。
|
1
2
3
4
5
6
7
8
9
10
|
<p id="p1">為對(duì)象注冊(cè)多個(gè)事件</p><script> var p1 = document.getElementById("p1"); //捕獲段落元素 p1.attachEvent("onmouseover", function () { this.style.background = 'blue'; }); //注冊(cè)mouseover事件 p1.attachEvent("onmouseout", function () { this.style.background = 'red'; }); //注冊(cè)mouseout事件</script> |
使用 attachEvent() 注冊(cè)事件時(shí)，其事件處理函數(shù)的調(diào)用對(duì)象不再是當(dāng)前事件對(duì)象本身，而是 window 對(duì)象，因此事件函數(shù)中的 this 就指向 window，而不是當(dāng)前對(duì)象，如果要獲取當(dāng)前對(duì)象，應(yīng)該使用 event 的 srcElement 屬性。
IE 事件模型中的 attachEvent() 方法第 1 個(gè)參數(shù)為事件類型名稱，需要加上 on 前綴，而使用 addEventListener() 方法時(shí)，則不需要這個(gè) on 前綴，如 click。
到此這篇關(guān)于JS addEventListener()和attachEvent()方法實(shí)現(xiàn)注冊(cè)事件的文章就介紹到這了,更多相關(guān)JS addEventListener()和attachEvent()內(nèi)容請(qǐng)搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：http://c.biancheng.net/view/5940.html
