JS 基础 — 事件：让你的 Web 页面交互起来

前言

在 Web 开发中，我们经常需要处理用户与网页之间的交互，比如点击、鼠标移动、键盘输入等。为了捕捉这些交互并进行相应的处理，JavaScript 中提供了强大的事件处理机制。

认识事件

事件是指发生在某个对象上的特定动作，它可以是用户的操作，也可以是系统或其他对象的行为。例如，当用户点击某个按钮时，就会触发一个 click 事件；当鼠标移动到某个元素上时，就会触发一个 mouseover 事件；当页面加载完成时，就会触发一个 load 事件。

监听事件

为了处理事件，我们需要在事件发生时执行相应的代码。为此，我们可以使用 JavaScript 的 addEventListener() 方法为某个元素添加事件监听器。事件监听器是一个函数，它将在事件发生时被调用。

以下是如何为某个元素添加事件监听器的示例：

const button = document.getElementById('my-button');
button.addEventListener('click', () => {
  alert('Button clicked!');
});

上面的代码为按钮元素添加了一个 click 事件监听器。当用户点击该按钮时，addEventListener() 方法将调用传入的函数，并显示一个警报框，提示“Button clicked!”。

事件对象

当事件发生时，JavaScript 会创建一个事件对象，并将其作为参数传递给事件监听器函数。事件对象包含了有关事件的详细信息，比如事件类型、目标元素、鼠标位置等。

我们可以使用事件对象来获取这些详细信息，并根据需要执行相应的代码。例如，我们可以使用事件对象的 target 属性来获取触发事件的元素：

const button = document.getElementById('my-button');
button.addEventListener('click', (event) => {
  const target = event.target;
  console.log(`Target: ${target}`);
});

上面的代码将输出触发 click 事件的按钮元素。

事件类型

JavaScript 中有许多内置的事件类型，可以用于处理各种各样的用户交互和系统行为。以下是一些常用的事件类型：

• click：当用户点击某个元素时触发。
• mouseover：当鼠标移动到某个元素上时触发。
• mouseout：当鼠标移出某个元素时触发。
• keydown：当用户按下键盘上的某个键时触发。
• keyup：当用户松开键盘上的某个键时触发。
• load：当页面加载完成时触发。
• resize：当窗口大小发生变化时触发。

阻止事件传播

在某些情况下，我们可能希望阻止事件在 DOM 树中向上传播。我们可以使用事件对象的 stopPropagation() 方法来实现这一点。

以下是如何阻止事件传播的示例：

const button = document.getElementById('my-button');
button.addEventListener('click', (event) => {
  event.stopPropagation();
});

上面的代码将阻止 click 事件向上传播到父元素。

总结

事件处理是 JavaScript 中一个非常重要的概念，它允许我们处理用户与网页之间的交互，并根据需要执行相应的代码。通过本文，你已经了解了事件的基本概念、如何监听事件、如何获取事件对象以及如何阻止事件传播。这些知识将帮助你构建出更具交互性的 Web 页面。