JavaScript Element addEventListener() 方法

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

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

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

实例：

将单击事件附加到<button>元素。当用户单击按钮时，在id=“demo”的>p>元素中输出“Hello World”：

document.getElementById("myBtn").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()方法附加事件处理程序（有关跨浏览器的解决方案，请参阅下面的“更多示例”）。

语法

element.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

更多例子

您还可以参考外部“命名”功能。此示例演示如何在用户单击<button>元素时执行函数：

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

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

尝试一下

您可以向同一元素添加许多事件，而不会覆盖现有事件。此示例演示如何在同一<button>元素上添加两个单击事件：

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

尝试一下

您可以将不同类型的事件添加到同一元素。此示例演示如何在同一<button>元素上添加许多事件：

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

尝试一下

JavaScript Element addEventListener() 方法