最新的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()

<文档对象