例
附加點擊事件到<button>元素。 當用戶點擊該按鈕時，輸出"Hello World"在<p> id為“演示”元素：
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); 試一試» 更多"Try it Yourself"下面的例子。
定義和用法
所述addEventListener()方法附加一個事件處理程序指定的元素。
提示：使用removeEventListener()方法來刪除已安裝有一個事件處理程序addEventListener()方法。
提示：使用文件。 addEventListener()方法將事件處理程序附加到文檔。
瀏覽器支持
在表中的數字規定，完全支持方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9 | 1.0 | 1.0 | 7 |
注意： addEventListener()在Internet Explorer 8和更早的版本，以及Opera 6.0及更早版本不支持的方法。 然而，對於這些特定的瀏覽器版本，你可以使用attachEvent()方法附加的事件處理程序(see "More Examples" below for a cross-browser solution) 。
句法
element .addEventListener( event , function ,
useCapture )
參數值
| 參數 | 描述 |
|---|---|
| event | 需要。 指定事件的名稱的字符串。 注意：不要使用"on"前綴。 例如，使用"click" ，而不是"onclick" 。 對於所有的HTML DOM事件的列表，看看我們的完整的HTML DOM事件對象參考 。 |
| function | 需要。 當事件發生時運行的功能。 當事件發生時，事件對象被傳遞給函數作為第一個參數。 類型的事件對象的取決於指定的事件。 例如， "click"事件屬於MouseEvent對象。 |
| useCapture | 可選的。 一個布爾值，指定該事件是否應在捕獲或在冒泡階段來執行。 可能的值：
|
技術細節
| DOM版本： | 2級DOM事件 |
|---|---|
| 返回值： | 無返回值 |
| 更新日誌： | 在將useCapture參數在Firefox 6和Opera 11.60成為可選的(has always been optional for Chrome, IE and Safari) |
更多示例
例
您也可以參照一個外部的"named"功能。
該實施例證實了如何當用戶點擊一個上執行一個功能<button>元素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
試一試» 例
您可以將許多事件添加到相同的元素，而不會覆蓋現有的事件。
這個例子演示了如何添加相同的兩個click事件<button>元素：
document.getElementById("myBtn").addEventListener("click",
myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction); 試一試» 例
您可以添加不同類型的活動，以相同的元素。
這個例子演示了如何添加相同的許多事件<button>元素：
document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction); 試一試» 例
當傳遞的參數值，使用"anonymous function"調用與參數中指定的功能：
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
}); 試一試» 例
改變的背景顏色<button>元素：
document.getElementById("myBtn").addEventListener("click", function(){
this.style.backgroundColor = "red";
}); 試一試» 例
使用可選的參數將useCapture證明冒泡和捕獲之間的區別：
document.getElementById("myDiv").addEventListener("click", myFunction,
true); 試一試» 例
使用removeEventListener()方法，以除去已附接有一個事件處理程序addEventListener()方法：
// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove",
myFunction);
// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction); 試一試» 例
對於不支持的瀏覽器addEventListener()方法，你可以使用attachEvent()方法。
本實施例說明跨瀏覽器的解決方案：
var x = document.getElementById("myBtn");
if (x.addEventListener) {
// For all major browsers, except IE 8 and earlier
x.addEventListener("click", myFunction);
} else if (x.attachEvent) {
// For IE 8 and earlier versions
x.attachEvent("onclick", myFunction);
} 試一試» 相關頁面
JavaScript的教程： HTML DOM事件監聽
HTML DOM參考： 文件。 addEventListener()