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";
});
尝试一下 »
下面还有更多示例。
描述
The addEventListener() 方法将事件处理程序附加到元素。
元素方法
文档方法
教程
语法
element.addEventListener(event, function, useCapture)
参数
| 参数 | 描述 |
| event | 必需的。 事件的名称。 不要使用 "on" 前缀。 使用 "click" 而不是 "onclick"。 DOM 事件的完整列表. |
| function | 必需的。 当事件发生时要运行的函数。 |
| useCapture | 可选（默认值 = false）。false - 处理程序在冒泡阶段执行。true - 处理程序在捕获阶段执行。 |
返回值
| 无 |
更多示例
你可以将多个事件添加到同一个元素
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
尝试一下 »
你可以将不同的事件添加到同一个元素
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
尝试一下 »
更改 <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 |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
