JS 入门：事件侦听 — 解读网页交互的艺术

前端

2023-12-17 06:40:07

简介

在 JS 中，事件是指发生在文档或浏览器窗口中的特定交互瞬间。我们可以通过事件监听器（或处理程序）来预先注册事件，以便在事件发生时执行相应的代码。这些事件可以是用户在页面中进行的点击、鼠标移动、网页页面加载完成等动作。

事件侦听的类型

在 JS 中，有两种类型的事件侦听：

同步事件侦听： 当事件发生时，浏览器会立即执行事件监听器中定义的代码。这是最常见的事件侦听类型。
异步事件侦听： 当事件发生时，浏览器会将事件监听器中定义的代码添加到事件队列中，然后继续执行其他任务。当事件队列中的代码执行时，才会执行事件监听器中的代码。这种事件侦听类型主要用于处理需要较长时间执行的任务，例如网络请求。

事件侦听器的使用

要使用事件监听器，我们需要首先获取要侦听的元素。然后，我们可以使用 addEventListener() 方法来注册事件监听器。该方法的第一个参数是事件类型，第二个参数是事件处理程序，第三个参数是可选的布尔值，用于指定是否在捕获阶段还是冒泡阶段执行事件处理程序。

例如，要注册一个在页面加载完成后执行的事件监听器，我们可以使用以下代码：

window.addEventListener("load", function() {
  // 代码
});

事件处理程序

事件处理程序是当事件发生时执行的代码。它可以是一个函数或一个方法。事件处理程序通常会包含以下代码：

获取事件对象
从事件对象中提取相关信息
根据提取的信息执行相应的操作

例如，要创建一个在鼠标点击时执行的事件处理程序，我们可以使用以下代码：

function handleClick(event) {
  // 获取鼠标点击的位置
  const x = event.clientX;
  const y = event.clientY;

  // 在控制台中打印鼠标点击的位置
  console.log(`鼠标点击位置：(${x}, ${y})`);
}

// 注册鼠标点击事件监听器
document.addEventListener("click", handleClick);

事件委托

事件委托是一种优化事件处理程序性能的技术。它允许我们为一个父元素注册事件监听器，然后在子元素上发生事件时执行事件处理程序。这样，我们就只需要注册一个事件监听器，就可以处理多个子元素上的事件。

例如，要为页面中的所有按钮注册一个点击事件监听器，我们可以使用以下代码：

document.addEventListener("click", function(event) {
  // 获取事件目标元素
  const target = event.target;

  // 检查目标元素是否为按钮
  if (target.tagName === "BUTTON") {
    // 执行按钮的点击事件处理程序
    handleClick(target);
  }
});

function handleClick(button) {
  // 获取按钮的 ID
  const id = button.id;

  // 根据按钮的 ID 执行相应的操作
  switch (id) {
    case "button1":
      // 执行按钮 1 的点击事件处理程序
      break;
    case "button2":
      // 执行按钮 2 的点击事件处理程序
      break;
    default:
      // 执行默认的点击事件处理程序
      break;
  }
}