JavaScript HTML DOM 事件監聽程序

addEventListener() 方法

實例

添加當用戶點擊按鈕時觸發的事件監聽器：

document.getElementById("myBtn").addEventListener("click", displayDate);

親自試一試

addEventListener() 方法為指定元素指定事件處理程序。

addEventListener() 方法為元素附加事件處理程序而不會覆蓋已有的事件處理程序。

您能夠向一個元素添加多個事件處理程序。

您能夠向一個元素添加多個相同類型的事件處理程序，例如兩個 "click" 事件。

您能夠向任何 DOM 對象添加事件處理程序而非僅僅 HTML 元素，例如 window 對象。

addEventListener() 方法使我們更容易控制事件如何對冒泡作出反應。

當使用 addEventListener() 方法時，JavaScript 與 HTML 標記是分隔的，已達到更佳的可讀性；即使在不控制 HTML 標記時也允許您添加事件監聽器。

您能夠通過使用 removeEventListener() 方法輕松地刪除事件監聽器。

語法

element.addEventListener(event, function, useCapture);

第一個參數是事件的類型（比如 "click" 或 "mousedown"）。

第二個參數是當事件發生時我們需要調用的函數。

第三個參數是布爾值，指定使用事件冒泡還是事件捕獲。此參數是可選的。

注意：請勿對事件使用 "on" 前綴；請使用 "click" 代替 "onclick"。

向元素添加事件處理程序

實例

當用戶點擊某個元素時提示 "Hello World!"：

element.addEventListener("click", function(){ alert("Hello World!"); });

親自試一試

您也可以引用外部“命名”函數：

實例

當用戶點擊某個元素時提示 "Hello World!"：

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

親自試一試

向相同元素添加多個事件處理程序

addEventListener() 方法允許您向相同元素添加多個事件，同時不覆蓋已有事件：

實例

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

親自試一試

您能夠向相同元素添加不同類型的事件：

實例

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

親自試一試

向 Window 對象添加事件處理程序

addEventListener() 允許您將事件監聽器添加到任何 HTML DOM 對象上，比如 HTML 元素、HTML 對象、window 對象或其他支持事件的對象，比如 xmlHttpRequest 對象。

實例

添加當用戶調整窗口大小時觸發的事件監聽器：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

親自試一試

傳遞參數

當傳遞參數值時，請以參數形式使用調用指定函數的“匿名函數”：

實例

element.addEventListener("click", function(){ myFunction(p1, p2); });

親自試一試

事件冒泡還是事件捕獲？

在 HTML DOM 中有兩種事件傳播的方法：冒泡和捕獲。

事件傳播是一種定義當發生事件時元素次序的方法。假如 <div> 元素內有一個 <p>，然后用戶點擊了這個 <p> 元素，應該首先處理哪個元素“click”事件？

在冒泡中，最內側元素的事件會首先被處理，然后是更外側的：首先處理 <p> 元素的點擊事件，然后是 <div> 元素的點擊事件。

在捕獲中，最外側元素的事件會首先被處理，然后是更內側的：首先處理 <div> 元素的點擊事件，然后是 <p> 元素的點擊事件。

在 addEventListener() 方法中，你能夠通過使用“useCapture”參數來規定傳播類型：

addEventListener(event, function, useCapture);

默認值是 false，將使用冒泡傳播，如果該值設置為 true，則事件使用捕獲傳播。

實例

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

親自試一試

removeEventListener() 方法

removeEventListener() 方法會刪除已通過 addEventListener() 方法附加的事件處理程序：

實例

element.removeEventListener("mousemove", myFunction);

親自試一試

瀏覽器支持

表格中的數字規定了完全支持這些方法的首個瀏覽器版本。

方法
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

注釋：IE 8、Opera 6.0 及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。不過，對于這些特殊的瀏覽器版本，您可以使用 attachEvent() 方法向元素添加事件處理程序，并由 detachEvent() 方法刪除：

element.attachEvent(event, function);
element.detachEvent(event, function);

實例

跨瀏覽器解決方案：

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 針對主流瀏覽器，除了 IE 8 及更正版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // 針對 IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

親自試一試

HTML DOM Event 對象參考手冊

如需所有 HTML DOM 事件的列表，請訪問我們完整的 HTML DOM Event 對象參考手冊。