HTML DOM addEventListener() 方法

2018-03-06 15:46 更新

HTML DOM addEventListener() 方法

 Document 對(duì)象

實(shí)例

在文檔中添加點(diǎn)擊事件。當(dāng)用戶在文檔任何地方點(diǎn)擊時(shí)，在 id="demo" 的 <p> 元素上輸出 "Hello World"：

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

嘗試一下 ?

定義與用法

document.addEventListener() 方法用于向文檔添加事件句柄。

提示： 可以使用 document.removeEventListener() 方法來(lái)移除 addEventListener() 方法添加的事件句柄。

提示：使用 element.addEventListener() 方法為指定元素添加事件句柄。

瀏覽器支持

表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

方法          
addEventListener() 1.0 9.0 1.0 1.0 7.0

注意： Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 但是，對(duì)于這類瀏覽器版本可以使用 attachEvent() 方法來(lái)添加事件句柄（跨瀏覽器兼容問(wèn)題可以查看"更多實(shí)例"）。

語(yǔ)法

document.addEventListener(event, function, useCapture)

參數(shù)值

參數(shù) 描述
event必需。描述事件名稱的字符串。

注意： 不要使用 "on" 前綴。例如，使用 "click" 來(lái)取代 "onclick"。

提示： 所有 HTML DOM 事件，可以查看我們完整的 HTML DOM Event 對(duì)象參考手冊(cè)。
function必需。描述了事件觸發(fā)后執(zhí)行的函數(shù)。

當(dāng)事件觸發(fā)時(shí)，事件對(duì)象會(huì)作為第一個(gè)參數(shù)傳入函數(shù)。事件對(duì)象的類型取決于特定的事件。例如， "click" 事件屬于 MouseEvent(鼠標(biāo)事件) 對(duì)象。
useCapture可選。布爾值，指定事件是否在捕獲或冒泡階段執(zhí)行。

可能值：
  • true - 事件句柄在捕獲階段執(zhí)行
  • false- 默認(rèn)。事件句柄在冒泡階段執(zhí)行

技術(shù)細(xì)節(jié)

DOM 版本：DOM Level 2 Events
返回值：沒(méi)有返回值
修改記錄：在 Firefox 6 和 Opera 11.60 中 useCapture 參數(shù)是可選的。（在 Chrome、IE 和 Safari 中一直都是可選的）。

更多實(shí)例

實(shí)例

您可以通過(guò)函數(shù)名來(lái)引用外部函數(shù)：

document.addEventListener("click", myFunction);

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

嘗試一下 ?

實(shí)例

您可以在文檔中添加許多事件，添加的事件不會(huì)覆蓋已存在的事件。

該實(shí)例演示了如何在文檔中添加兩個(gè)點(diǎn)擊事件：

document.addEventListener("click", myFunction);
document.addEventListener("click", someOtherFunction);

嘗試一下 ?

實(shí)例

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

該實(shí)例演示了如何在文檔中添加多個(gè)事件：

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

嘗試一下 ?

實(shí)例

當(dāng)傳遞參數(shù)值時(shí)，使用"匿名函數(shù)"調(diào)用帶參數(shù)的函數(shù)：

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

嘗試一下 ? 

實(shí)例

修改 <body> 元素的背景：

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

嘗試一下 ?

實(shí)例

使用 removeEventListener() 方法移除通過(guò) addEventListener() 方法添加的事件句柄：

// 向文檔添加事件句柄
document.addEventListener("mousemove", myFunction);

// 移除文檔的事件句柄
document.removeEventListener("mousemove", myFunction);

嘗試一下 ?

實(shí)例

如果瀏覽器不支持 addEventListener() 方法, 你可以使用 attachEvent() 方法替代。

以下實(shí)例演示了跨瀏覽器的解決方法：

if (document.addEventListener) {                //所有主流瀏覽器，除了 IE 8 及更早 IE版本
    document.addEventListener("click", myFunction);
} else if (document.attachEvent) {             // IE 8 及更早 IE 版本
    document.attachEvent("onclick", myFunction);
}

嘗試一下 ?

相關(guān)頁(yè)面

JavaScript 教程：HTML DOM EventListener

JavaScript 參考手冊(cè)：element.addEventListener()

 Document 對(duì)象

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)