事件监听的艺术：掌握`addEventListener`的魅力

🤍 前端开发工程师（主业）、技术博主（副业）、已过CET6
🍨 阿珊和她的猫_CSDN个人主页
🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》
🍚 蓝桥云课签约作者、已在蓝桥云课上架的前后端实战课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

一、引言

介绍addEventListener的基本概况。

addEventListener 是 JavaScript 中的一个重要方法，它允许用户在特定事件发生时执行自定义的回调函数。

以下是 addEventListener 的基本概念、语法和常见事件类型的介绍。

一、基本概念

1. addEventListener 用于向事件目标添加事件监听器。
2. 事件监听器是一个回调函数，当事件发生时，该函数将被调用。
3. 事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

二、语法

addEventListener(eventType, listener, useCapture)

1. eventType：事件类型，如 “click”、“keydown”、“mousemove” 等。
2. listener：事件发生时执行的回调函数。
3. useCapture：布尔值，表示是否使用事件捕获。事件捕获是指在事件冒泡阶段触发时执行的监听器。默认值为 false，表示使用事件冒泡。

三、常见事件类型

1. “click”：当用户点击元素时触发。
2. “keydown”：当用户按下键盘上的键时触发。
3. “mousemove”：当用户在元素上移动鼠标时触发。
4. “scroll”：当用户在页面滚动时触发。
5. “focus”：当元素获得焦点时触发。
6. “blur”：当元素失去焦点时触发。

四、应用场景

addEventListener 在各种场景下都有广泛应用，以下是其中一些：

1. 表单验证：当用户在表单中输入内容时，可以使用 addEventListener 监听 “input” 事件，并在事件处理函数中验证输入值。
2. 页面滚动：使用 addEventListener 监听 “scroll” 事件，可以实现页面滚动时加载更多内容的功能。
3. 窗口大小调整：使用 addEventListener 监听 “resize” 事件，可以实现窗口大小调整时调整页面布局的功能。
4. 键盘事件：使用 addEventListener 监听 “keydown” 事件，可以实现键盘快捷键的功能。
5. 鼠标事件：使用 addEventListener 监听 “mousemove”、“mouseover”、“mouseout” 等事件，可以实现鼠标悬停、鼠标移入移出等功能。

总之，addEventListener 是一个强大且灵活的方法，可以用于监听各种类型的事件，从而实现丰富的交互功能。

二、 addEventListener的基本概念

解释addEventListener的作用。

addEventListener 是 JavaScript 中的一个方法，它允许开发者向事件目标添加事件监听器。事件监听器是一个回调函数，当事件发生时，该函数将被调用。事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

addEventListener 的作用主要可以概括为以下几点：

1. 添加事件监听器：addEventListener 方法允许开发者向事件目标添加事件监听器，以便在事件发生时执行相应的操作。
2. 监听事件类型：addEventListener 方法接受两个参数，第一个参数表示要监听的事件类型，如 “click”、“keydown”、“mousemove” 等。
3. 设置事件处理函数：第二个参数是一个回调函数，当事件发生时，该函数将被调用，执行相应的操作。
4. 设置事件捕获：addEventListener 方法第三个参数是一个布尔值，表示是否使用事件捕获。事件捕获是指在事件冒泡阶段触发时执行的监听器。默认值为 false，表示使用事件冒泡。

addEventListener 的应用场景非常广泛，如表单验证、页面滚动、窗口大小调整、键盘事件、鼠标事件等。通过使用 addEventListener，开发者可以实现丰富的交互功能，提高用户体验。

三、 addEventListener的语法

详细介绍addEventListener的语法。

addEventListener 是 JavaScript 中的一个方法，用于向事件目标添加事件监听器。事件监听器是一个回调函数，当事件发生时，该函数将被调用。事件目标是指可以触发事件的 HTML 元素或 JavaScript 对象。

addEventListener 的语法如下：

element.addEventListener(eventType, listener, useCapture);

其中，element 表示事件目标，可以是 HTML 元素或 JavaScript 对象；eventType 表示要监听的事件类型，如 “click”、“keydown”、“mousemove” 等；listener 表示事件发生时执行的回调函数；useCapture 表示是否使用事件捕获，默认值为 false，表示使用事件冒泡。

下面是一个具体的例子，演示如何向一个按钮添加一个点击事件监听器：

// 获取按钮元素
var button = document.getElementById("myButton");

// 定义事件处理函数
function handleClick() {
 alert("按钮被点击了！");
}

// 向按钮添加点击事件监听器
button.addEventListener("click", handleClick, false);

在这个例子中，我们首先获取了 id 为 “myButton” 的按钮元素，然后定义了一个名为 handleClick 的函数，用于处理按钮被点击的事件。接着，我们使用 addEventListener 方法向按钮添加了一个点击事件监听器，第三个参数 false 表示我们不想使用事件捕获，而是使用事件冒泡。

当用户点击按钮时，handleClick 函数将被调用，弹出一个警告框提示 “按钮被点击了！”。

提供示例代码，展示如何使用addEventListener监听不同类型的事件。

下面是一些使用 addEventListener 监听不同类型事件的示例代码：

1. 监听点击事件：

// 获取按钮元素
var button = document.getElementById("myButton");

// 定义事件处理函数
function handleClick() {
 alert("按钮被点击了！");
}

// 向按钮添加点击事件监听器
button.addEventListener("click", handleClick, false);

2. 监听键盘事件：

// 获取输入框元素
var input = document.getElementById("myInput");

// 定义事件处理函数
function handleKeyDown(event) {
 if (event.key === "Enter") {
   alert("用户按下 Enter 键！");
 }
}

// 向输入框添加键盘事件监听器
input.addEventListener("keydown", handleKeyDown, false);

3. 监听鼠标事件：

// 获取图像元素
var image = document.getElementById("myImage");

// 定义事件处理函数
function handleMouseMove(event) {
 if (event.buttons === 1) { // 左键
   image.style.left = event.clientX + "px";
   image.style.top = event.clientY + "px";
 }
}

// 向图像添加鼠标事件监听器
image.addEventListener("mousemove", handleMouseMove, false);

4. 监听窗口大小调整事件：

// 获取窗口对象
var window = window;

// 定义事件处理函数
function handleResize(event) {
 alert("窗口大小已调整！");
}

// 向窗口添加窗口大小调整事件监听器
window.addEventListener("resize", handleResize, false);

这些示例代码展示了如何使用 addEventListener 监听不同类型的事件，并根据事件类型执行相应的处理函数。