JavaScript中的EventListener（事件偵聽器）是指可以動(dòng)態(tài)添加到對(duì)象并在相應(yīng)事件發(fā)生時(shí)調(diào)用的一種函數(shù)。在眾多的事件監(jiān)聽函數(shù)中，常用的是addEventListener(). 本文就來(lái)詳細(xì)介紹一下JavaScript中addEventListener()函數(shù)的使用方法。

addEventListener()可以讓我們?cè)贒OM元素上添加監(jiān)聽器（listener），在特定事件發(fā)生時(shí)執(zhí)行回調(diào)函數(shù)（callback）。下面是addEventListener()最簡(jiǎn)單的使用方法：

document.getElementById("btn").addEventListener("click", function(){
alert("Hello World!");
})

上述代碼意為在ID為btn的元素上添加點(diǎn)擊事件監(jiān)聽器，當(dāng)用戶在該元素上點(diǎn)擊時(shí)，會(huì)彈出一個(gè)提示框，提示窗口上顯示Message為“Hello World!”的信息。這里我們介紹一下上述代碼參數(shù)的詳細(xì)介紹，如下：

• addEventListener(event, function, useCapture)
• event: 必須，字符串，指定監(jiān)聽哪些瀏覽器事件。如"click"、"mousedown"、"load"、"scroll"等等。
• function: 必須，指定在事件觸發(fā)時(shí)執(zhí)行的回調(diào)函數(shù)。
• useCapture: 可選，布爾值，指定事件是否在捕獲階段執(zhí)行，默認(rèn)為false。

了解了addEventListener的最簡(jiǎn)單用法后，我們來(lái)看看它的更多用途。如下代碼所示，我們可以使用addEventListener()給DOM元素添加任意事件類型的監(jiān)聽器：

var btn = document.getElementById("btn");
btn.addEventListener("mouseover", function(){
btn.style.backgroundColor = "red";
});
btn.addEventListener("mouseout", function(){
btn.style.backgroundColor = "";
});

這段代碼通過(guò)mouseover和mouseout事件來(lái)控制元素的背景顏色。當(dāng)鼠標(biāo)移入按鈕區(qū)域時(shí)，元素背景設(shè)為紅色；當(dāng)鼠標(biāo)移出按鈕時(shí)，元素背景重置。這樣的效果在網(wǎng)站中應(yīng)用廣泛。

addEventListener()還增加了一個(gè)新特性–事件委托（Event Delegation）。事件委托的原理是把原本需要綁定到子元素的事件監(jiān)聽器綁定到父元素上。由于大多數(shù)事件都是從內(nèi)向外 (從子元素到父元素) 傳播的，所以事件委托比直接在子元素上綁定事件監(jiān)聽器，具有更好的性能。

我們來(lái)看一個(gè)事件委托的例子。假設(shè)我們有一個(gè)包含多個(gè)按鈕的父元素，每個(gè)按鈕都有一個(gè)不同的ID。我們可以使用一個(gè)事件監(jiān)聽器來(lái)響應(yīng)所有的按鈕點(diǎn)擊事件，如下所示：

var parent = document.getElementById("parent");
parent.addEventListener("click", function(event){
if(event.target.id.indexOf("btn_") ===0){
var btnId = event.target.id.substring(4);
alert("您點(diǎn)擊的是按鈕：" + btnId);
}
});

上述代碼中，我們監(jiān)聽了父元素parent上所有的點(diǎn)擊事件，一旦點(diǎn)擊事件發(fā)生，便會(huì)檢查事件目標(biāo)元素（event.target）的ID是否以btn_為前綴。如果是，則提取按鈕ID，彈出提示框。

總而言之，addEventListener()是一個(gè)非常實(shí)用的JavaScript函數(shù)，它提供了多種監(jiān)聽器類型，使編程變得更加靈活和易于維護(hù)。通過(guò)事件委托，可以有效減少監(jiān)聽器注冊(cè)數(shù)，提高頁(yè)面性能。希望本文對(duì)您有所幫助。