怎么在JavaScript中利用addEventListener()與attachEvent()實現(xiàn)一個注冊事件

這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在JavaScript中利用addEventListener()與attachEvent()實現(xiàn)一個注冊事件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

在 JavaScript 的 DOM 事件模型中，通過調(diào)用對象的 addEventListener() 方法注冊事件。用法如下：
element.addEventListener(String type, Function listener, boolean useCaptrue);

參數(shù)說明如下：

• type：注冊事件的類型名。事件類型與事件屬性不同，事件類型名沒有 on 前綴。例如，對于事件屬性 onclick 來說，所對應(yīng)的事件類型為 click。

• listener：監(jiān)聽函數(shù)，即事件處理函數(shù)。在指定類型的事件發(fā)生時將調(diào)用該函數(shù)。在調(diào)用這個函數(shù)時，默認(rèn)傳遞給它的唯一參數(shù)是 event 對象。

• useCaptrue：是一個布爾值。如果為 true，則指定的事件處理函數(shù)將在事件傳播的捕獲階段觸發(fā)；如果為 false，則事件處理函數(shù)將在冒泡階段觸發(fā)。

示例1

下面示例使用 addEventListener() 為所有按鈕注冊 click 事件。首先，調(diào)用 document 的 getElementsByTagName() 方法捕獲所有按鈕對象；然后，使用 for 語句遍歷按鈕集（btn），并使用 addEventListener() 方法分別為每一個按鈕注冊事件函數(shù)，獲取當(dāng)前對象所顯示的文本。

<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);  //為每個按鈕對象注冊一個事件處理函數(shù)，定義在捕獲階段進行響應(yīng)
  }
</script>

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

使用 addEventListener() 方法能夠為多個對象注冊相同的事件處理函數(shù)，也可以為同一個對象注冊多個事件處理函數(shù)。為同一個對象注冊多個事件處理函數(shù)對于模塊化開發(fā)非常有用。

示例2

在下面示例中，為段落文本注冊兩個事件：mouseover 和 mouseout。當(dāng)光標(biāo)移到段落文本上面時會顯示為藍色背景，而當(dāng)光標(biāo)移出段落文本時會自動顯示為紅色背景。這樣就不需要破壞文檔結(jié)構(gòu)為段落文本增加多個事件屬性。

<p id="p1">為對象注冊多個事件</p>
<script>
  var p1 = document.getElementById("p1"); //捕獲段落元素的句柄
  p1.addEventListener("mouseover", function () {
    this.style.background = 'blue';
  }, true); //為段落元素注冊第1個事件處理函數(shù)
  p1.addEventListener("mouseout", function () {
    this.style.background = 'blue';
  }, true); //為段落元素注冊第2個事件處理函數(shù)
</script>

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

element.attachEvent(etype, eventName)

參數(shù)列表如下：

• etype：設(shè)置事件類型，如 onclick、onkeyup、onmousemove 等。

• eventName：設(shè)置時間名稱，也就是事件處理函數(shù)。

示例3

在下面示例中，為段落標(biāo)簽 <p> 注冊兩個事件：mouseover 和 mouseout，設(shè)計當(dāng)光標(biāo)經(jīng)過時，段落文本背景色顯示為藍色，當(dāng)光標(biāo)移開之后，背景色顯示為紅色。

<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() 注冊事件時，其事件處理函數(shù)的調(diào)用對象不再是當(dāng)前事件對象本身，而是 window 對象，因此事件函數(shù)中的 this 就指向 window，而不是當(dāng)前對象，如果要獲取當(dāng)前對象，應(yīng)該使用 event 的 srcElement 屬性。

IE 事件模型中的 attachEvent() 方法第 1 個參數(shù)為事件類型名稱，需要加上 on 前綴，而使用 addEventListener() 方法時，則不需要這個 on 前綴，如 click。

上述就是小編為大家分享的怎么在JavaScript中利用addEventListener()與attachEvent()實現(xiàn)一個注冊事件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。