JavaScript HTML DOM addEventListener() 方法

HTML DOM addEventListener() 方法

document.addEventListener()方法将事件处理程序附加到文档。

提示：使用document.removeEventListener()方法删除已使用addEventListener()方法附加的事件处理程序。

提示：使用element.addEventListener()方法将事件处理程序附加到指定的元素。

实例：

将单击事件附加到文档。当用户单击文档中的任何位置时，在id=“demo”的<p>元素中输出“Hello World”：

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

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
addEventListener()	9.0+	1.0+	1.0+	1.0+	7.0+

注意： Internet Explorer 8及早期版本以及Opera 6.0及更早版本不支持addEventListener()方法。但是，对于这些特定的浏览器版本，您可以使用attachEvent()方法附加事件处理程序（有关跨浏览器的解决方案，请参阅下面的“更多示例”）。

语法

document.addEventListener(event, function, useCapture)

参数值

参数	描述
event	必需的。一个字符串，指定事件的名称。注意：请勿使用“on”前缀。例如，使用“click”而不是“onclick”。有关所有HTML DOM事件的列表，请查看完整的HTML DOM 事件（Event）对象参考。
function	必需的。指定事件发生时要运行的函数。事件发生时，事件对象将作为第一个参数传递给函数。事件对象的类型取决于指定的事件。例如，“click”事件属于MouseEvent对象。
useCapture	可选的。一个布尔值，指定是在捕获阶段还是在冒泡阶段执行事件。可能的值： true - 事件处理程序在捕获阶段执行 false - 默认。事件处理程序在冒泡阶段执行

useCapture参数在Firefox 6和Opera 11.60中变为可选（Chrome，IE和Safari一直是可选的）

技术细节

项目	描述
返回值：	无返回值
DOM版本	Core Level 2

更多例子

您还可以参考外部“命名”功能：

document.addEventListener("click", myFunction);

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

尝试一下

您可以向文档添加许多事件，而不会覆盖现有事件。此示例演示如何向文档添加两个单击事件：

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

尝试一下

您可以向文档添加不同类型的事件。此示例演示如何向文档添加许多事件：

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

尝试一下

传递参数值时，使用“匿名函数”，使用以下参数调用指定的函数：

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 addEventListener() 方法

HTML DOM addEventListener() 方法

浏览器支持

语法

参数值

技术细节

更多例子

相关页面