目录

HTML DOM 元素 addEventListener()

❮上一节 ❮ 元素对象参考下一节❯

示例

向 <button> 元素添加点击事件：

element.addEventListener("click", myFunction);

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

亲自试一试 »

更紧凑的代码：

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

亲自试一试 »

下面有更多示例。

描述

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

元素方法

addEventListener() 方法

removeEventListener() 方法

记录方法

addEventListener() 方法

removeEventListener() 方法

教程

HTML DOM 事件监听器

DOM 事件的完整列表

语法

element.addEventListener( event, function, useCapture)

参数

Parameter	Description
event	Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events.
function	Required. The function to run when the event occurs.
useCapture	Optional (default = false). `false` - The handler is executed in the bubbling phase. `true` - The handler is executed in the capturing phase.

返回值

没有任何

更多示例

您可以将多个事件添加到同一元素：

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

亲自试一试 »

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

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

亲自试一试 »

要传递参数值，请使用"anonymous function"：

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

亲自试一试 »

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

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

亲自试一试 »

冒泡和捕获的区别：

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

亲自试一试 »

删除事件处理程序：

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

亲自试一试 »

浏览器支持

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

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


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11

❮上一节 ❮ 元素对象参考下一节❯