最新的Web開發教程
 

JavaScript HTML DOM事件監聽

❮上一頁 下一頁章❯

在addEventListener()方法

例

添加事件偵聽器，當用戶點擊一個按鈕觸發：

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

在addEventListener()方法附加一個事件處理程序到指定元素。

在addEventListener()方法附加一個事件處理程序的元素，而不會覆蓋現有的事件處理程序。

您可以添加許多事件處理的一個元素。

您可以添加許多同一類型的事件處理程序的一個元素，即2 "click"事件。

您可以事件偵聽器添加到任何DOM對象不僅HTML元素。 即窗口對象。

所述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文件，窗口對象或其他對象xmlHttpRequest對象。

例

添加事件偵聽器，當用戶調整窗口觸發：

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

傳遞參數

當傳遞的參數值，請使用“匿名函數”調用與參數中指定的功能：

例

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

事件冒泡或事件捕獲？

有事件傳播的兩種方式中的HTML DOM，鼓泡和捕捉。

事件的傳播是在事件發生時確定元素順序的一種方式。 如果你有一個<p>一個元素中<div>元素，用戶點擊的<p>元素，元素的"click"事件應當首先處理？

在冒泡最內部元素的事件處理，然後再外：在<p>元素的單擊事件首先處理，那麼<div>元素的click事件。

在捕捉最外層的元素的事件處理，然後再內部：在<div>元素的click事件將被優先處理，那麼<p>元素的click事件。

隨著addEventListener()方法，你可以通過使用指定的傳播類型， "useCapture"參數：

addEventListener( event , function , useCapture );

默認值是假的，這將使用發泡傳播，當該值被設置為真，該事件使用捕獲傳播。

例

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

注意： addEventListener()和removeEventListener()方法不是在IE 8和更早版本和支持的Opera 6.0及更早版本。 然而，對於這些具體的瀏覽器版本，您可以使用attachEvent()方法將一個事件處理程序附加到元素，和detachEvent()方法來刪除它：

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

例

跨瀏覽器的解決方案：

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);
}
試一試»

HTML DOM事件對象參考

對於所有的HTML DOM事件的列表，看看我們完整的HTML DOM事件對象參考 。


❮上一頁 下一頁章❯