HTML DOM ɗanar addEventListener() ɗanar

定义和用法

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

实例

例子 1

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

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

Try It Yourself

例子 2

更紧凑的代码：

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

Try It Yourself

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

语法

element.addEventListener(type, function, useCapture)

参数

参数 描述
type

必需。事件的名称。

请不要使用 "on" 前缀。

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


DOM Event Complete List
function 必需。事件发生时运行的函数。
useCapture

可选（default = false）。

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

返回值

无。

技术细节

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

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

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

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

这个方法也在 Document 和 Window 对象上定义了，且工作方式类似。

更多实例

例子 3

您可以向同一元素添加许多事件：

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

Try It Yourself

例子 4

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

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

Try It Yourself

Example 5

If you need to pass parameter values, please use "Anonymous Function":

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

Try It Yourself

Example 6

Change <button> Element Background Color:

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

Try It Yourself

Example 7

Difference Between Bubbling and Capturing:

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

Try It Yourself

Example 8

Delete Event Handler:

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

Try It Yourself

Browser Support

element.addEventListener() Is DOM Level 2 (2001) Feature.

All Browsers Fully Support It:

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

Related Pages

Element Method:

addEventListener() Method

removeEventListener() Method

Document Method:

addEventListener() Method

removeEventListener() Method

Tutoriyya:

HTML DOM EventListener

DOM Event Complete List