DOM 事件监听器

addEventListener() 提供了另一种为元素绑定/添加事件的方式，并允许设置事件的传播方式。

addEventListener() 提供了另一种为元素绑定/添加事件的方式，并允许设置事件的传播方式。

addEventListener() 方法

添加一个在用户单击按钮时触发的事件侦听器：

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

addEventListener() 方法将事件处理程序附加到指定的元素，添加事件并不覆盖现有的事件处理程序。

您可以向一个元素的同一个事件添加多个事件处理程序。

您可以将事件侦听器添加到任何 DOM 对象，而不仅仅是 HTML 元素，比如可以添加到 window 对象。

addEventListener() 方法可以更轻松地控制事件的传播方式。

使用 addEventListener() 方法，可以将JavaScript 与 HTML 标记分离，以提高可读性。

可以使用 removeEventListener() 方法轻松删除事件侦听器。

语法

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型（如 click， mousedown 或任何其他 HTML DOM 事件）。

第二个参数是我们要在事件发生时调用的函数。

第三个参数是一个布尔值，指定是事件的传播方式是向上冒泡还是捕获事件。该参数是可选的。

!! 请注意，您不要为事件使用 on 前缀；使用 click 而不是 onclick。

向元素添加事件处理程序

当用户点击一个元素时，提示 “Hello World!"：

element.addEventListener("click", function () {
  alert("Hello World!");
});

还可以使用命名函数：

element.addEventListener("click", myFunction);

function myFunction() {
  alert("Hello World!");
}

将多个事件处理程序添加到同一元素

addEventListener() 方法允许您向同一个元素添加多个事件，不会覆盖现有事件：

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

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

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

向 window 对象添加事件处理程序

addEventListener() 方法允许您在任何 HTML DOM 对象上添加事件侦听器，例如 HTML 元素、HTML 文档、窗口对象或其他支持事件的对象，如 xmlHttpRequest 对象。

添加一个在用户调整窗口大小时触发的事件侦听器：

window.addEventListener("resize", function () {
  document.getElementById("demo").innerHTML = sometext;
});

事件冒泡还是事件捕获？

HTML DOM 中有两种事件传播方式，冒泡和捕获。

事件传播是一种定义事件发生时元素顺序的方法。如果 <div> 元素中有一个 <p> 元素，并且用户单击了 <p> 元素，那么应该首先处理哪个元素的“单击”事件？

在冒泡中，最里面元素的事件首先被处理，然后是外部：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

在捕获最外层元素的事件时，首先处理最外层元素的事件，然后是内部：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

使用 addEventListener() 方法，您可以使用 useCapture 参数指定事件传播类型：

addEventListener(event, function, useCapture);

默认值为 false，将使用冒泡传播，当该值设置为 true 时，事件使用捕获传播。

document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);

removeEventListener() 方法

removeEventListener() 方法删除通过 addEventListener() 方法附加的事件处理程序：

element.removeEventListener("mousemove", myFunction);

示例：

<!DOCTYPE html>
<html>
<head>
<style>
#myDIV {
  background-color: coral;
  border: 1px solid;
  padding: 50px;
  color: white;
  font-size: 20px;
}
</style>
</head>
<body>

<h2>JavaScript removeEventListener()</h2>

<div id="myDIV">
  <p>这个 div 元素绑定了一个 onmousemove 事件：当鼠标进入橙色区域的时候，会显示随机数。</p>
  <p>点击下面的按钮删除 div 元素绑定的 onmousemove 事件</p>
  <button onclick="removeHandler()" id="myBtn">删除事件</button>
</div>

<p id="demo"></p>

<script>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = Math.random();
}

function removeHandler() {
  document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}
</script>

</body>
</html>
DOM 事件 DOM 节点导航