最新的Web開發教程
 

HTML DOM addEventListener() Method

<文檔對象

例

附上一個click事件的文件。 當用戶點擊該文檔，輸出中的任意位置"Hello World"在<p> id為“演示”元素：

document.addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
試一試»

更多"Try it Yourself"下面的例子。

定義和用法

該document. addEventListener() document. 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) 。

句法

document.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"功能：

document.addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
試一試»

例

您可以將許多事件添加到文檔中，而不會覆蓋現有的事件。

這個例子演示了如何將兩個click事件添加到文檔：

document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);
試一試»

例

您可以添加不同類型的事件文件。

這個例子演示了如何對許多事件添加到文檔：

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
試一試»

例

當傳遞的參數值，使用"anonymous function"調用與參數中指定的功能：

document.addEventListener("click", function() {
    myFunction(p1, p2);
});
試一試»

例

更改文檔的背景顏色<body>元素：

document.addEventListener("click", function(){
    document.body.style.backgroundColor = "red";
});
試一試»

例

使用removeEventListener()方法，以除去已附接有一個事件處理程序addEventListener()方法：

// Attach an event handler to the document
document.addEventListener("mousemove", myFunction);

// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction);
試一試»

例

對於不支持的瀏覽器addEventListener()方法，你可以使用attachEvent()方法。

本實施例說明跨瀏覽器的解決方案：

if (document.addEventListener) {                // For all major browsers, except IE 8 and earlier
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) {              // For IE 8 and earlier versions
    document.attachEvent("onclick", myFunction);
}
試一試»

相關頁面

JavaScript的教程： HTML DOM事件監聽

HTML DOM參考： 元素 。 addEventListener()

<文檔對象