HTML DOM addEventListener() 方法

定义和用法

addEventListener() 方法将事件处理程序附加到元素。

实例

例子 1

向 <button> 元素添加 click 事件:

element.addEventListener("click", myFunction);

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

亲自试一试

例子 2

更紧凑的代码:

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

亲自试一试

您可以在页面下方找到更多实例。

语法

element.addEventListener(type, function, useCapture)

参数

参数 描述
type

必需。事件的名称。

请不要使用 "on" 前缀。

请使用 "click" 而不是 "onclick"。


DOM 事件的完整列表

function 必需。事件发生时运行的函数。
useCapture

可选(default = false)。

  • false - 处理程序在冒泡阶段执行。
  • true - 处理程序在捕获阶段执行。

返回值

无。

技术细节

该方法将把指定的事件监听器函数添加到当前节点的监听器集合中,以处理指定类型 type 的事件。如果 useCapture 为 true,则监听器被注册为捕捉事件监听器。如果 useCapture 为 false,它被注册为普通事件监听器。

addEventListener() 可能被调用多次,在同一个节点上为同一种类型的事件注册多个事件句柄。但要注意,DOM 不能确定多个事件句柄被调用的顺序。

如果一个事件监听器函数在同一个节点上用相同的 typeuseCapture 参数注册了两次,那么第二次注册将被忽略。如果正在处理一个节点上的事件时,在这个节点上注册了一个新的事件监听器,则不会为那个事件调用新的事件监听器。

当用 Node.cloneNode() 方法或 Document.importNode() 方法复制一个 Document 节点时,不会复制为原始节点注册的事件监听器。

这个方法也在 DocumentWindow 对象上定义了,而且工作方式类似。

更多实例

例子 3

您可以将许多事件添加到同一元素:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

亲自试一试

例子 4

您可以将不同的事件添加到同一元素:

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

亲自试一试

例子 5

如需传递参数值,请使用“匿名函数”:

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

亲自试一试

例子 6

更改 <button> 元素的背景颜色:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

亲自试一试

例子 7

冒泡和捕获的区别:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

亲自试一试

例子 8

删除事件处理程序:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

亲自试一试

浏览器支持

element.addEventListener() 是 DOM Level 2 (2001) 功能。

所有浏览器都完全支持它:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相关页面

元素方法:

addEventListener() 方法

removeEventListener() 方法

文档方法:

addEventListener() 方法

removeEventListener() 方法

教程:

HTML DOM EventListener

DOM 事件的完整列表