监听事件的 addEventListener 方法

在 JavaScript 中，addEventListener 方法是一种很重要的监听事件的方式。它可以让我们在特定的事件发生时执行一些代码。

使用方法

addEventListener 方法可以被添加到绝大多数的 DOM 元素上，例如 <button> 、<input>、 <div> 等等。

方法有三个参数：

1. 事件的类型（如 click，keyup，mouseover 等等）。
2. 事件触发时需要执行的函数。
3. 是否在捕获阶段调用函数。

下面是一个简单的 JavaScript 函数示例，演示如何向指定的元素添加事件监听：

let myButton = document.querySelector('button');

function myFunction() {
  alert('Hello World');
}

myButton.addEventListener('click', myFunction);

在这个例子中，addEventListener()方法被用来为myButton元素添加了一个点击事件监听器。每当用鼠标单击这个按钮时，myFunction()函数就会被调用并弹出一个alert窗口。

事件传递说明

当一个事件发生在某个元素上时，这个事件会向上冒泡到它所有的父元素，一直到文档对象。所以，如果你在文档对象上添加一个事件监听器，那么这个事件会触发文档的每一个 element 上。

除了冒泡阶段，还有一种叫做捕获阶段的流程，事件首先被传递到最外层元素，然后再向祖先元素进行传递。默认情况下，addEventListener 方法是在冒泡阶段调用函数，如果希望在捕获阶段调用函数需要将后面的参数设置为 true。

一些常用的事件类型

下面是一些经常监听的常用事件类型:

• click: 鼠标点击事件。
• dblclick: 鼠标双击事件。
• mouseover: 鼠标移到一个元素上时发生的事件。
• mouseout: 鼠标从一个元素移动到另一个元素时发生的事件。
• keydown: 键盘按下事件。
• keyup: 键盘松开事件。

总结

addEventListener() 是 JavaScript 中一个非常方便的方法，可以让我们在特定的事件发生时执行一些操作。我们可以将一个函数（或函数的名称）封装在 addEventListener() 中，以响应特定的事件，从而增强 JavaScript 的交互性。