EventTarget.addEventListener() 方法將指定的監聽器註冊到 EventTarget 上，當該對象觸發指定的事件時，指定的回調函數就會被執行。 事件目標可以是一個文檔上的元素 Element,Document和Window或者任何其他支持事件的對象 (比如 XMLHttpRequest)。
addEventListener()的工作原理是將實現EventListener的函數或對象添加到調用它的EventTarget上的指定事件類型的事件偵聽器列表中。
語法
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
參數
type
表示監聽事件類型的字符串。
listener
當所監聽的事件類型觸發時，會接收到一個事件通知（實現了 Event 接口的對象）對象。listener 必須是一個實現了 EventListener 接口的對象，或者是一個函數，我們一般是傳入一個函數，也就是我們的回調函數。
- options 可選
這是一個指定有關listener屬性的可選參數對象。可用的選項如下：
capture:Boolean，爲true時表示事件捕獲，表示listener會在該類型的事件捕獲階段傳播到該EventTarget時觸發。除此之外的所有事件綁定均爲事件冒泡。once:Boolean，表示listener在添加之後最多隻調用一次。如果是true，listener會在其被調用之後自動移除。passive:Boolean，設置爲true時，表示listener永遠不會調用preventDefault()。如果 listener 仍然調用了這個函數，客戶端將會忽略它並拋出一個控制檯警告。mozSystemGroup: 只能在 XBL 或者是 Firefox' chrome 使用，這是個Boolean，表示listener被添加到 system group。
useCapture可選
Boolean，在DOM樹中，註冊了listener的元素， 是否要先於它下面的EventTarget，調用該listener。 當useCapture(設爲true) 時，沿着DOM樹向上冒泡的事件，不會觸發listener。當一個元素嵌套了另一個元素，並且兩個元素都對同一事件註冊了一個處理函數時，所發生的事件冒泡和事件捕獲是兩種不同的事件傳播方式。事件傳播模式決定了元素以哪個順序接收事件。進一步的解釋可以查看 事件流 及 JavaScript Event order 文檔。 如果沒有指定， useCapture 默認爲 false 。
- 返回值
返回的是undefined。
示例
添加一個簡單的監聽器
下面這個例子用來展示如何使用 addEventListener() 監聽鼠標點擊一個元素：
<table id="outside">
<tr><td id="t1">one</td></tr>
<tr><td id="t2">two</td></tr>
</table>
// 改變t2的函數
function modifyText() {
var t2 = document.getElementById("t2");
if (t2.firstChild.nodeValue == "three") {
t2.firstChild.nodeValue = "two";
} else {
t2.firstChild.nodeValue = "three";
}
}
// 爲table添加事件監聽器
var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);
在上個例子中，modifyText() 是一個 click 事件的監聽器，通過使用addEventListenter()註冊到table對象上。在表格中任何位置單擊都會觸發事件並執行modifyText()。
結果
