JavaScript 事件处理：掌握点击与用户交互

介绍

欢迎来到 JavaScript 事件处理实验！事件是浏览器中发生的动作，例如用户点击按钮、移动鼠标或按下键盘。事件处理是编写响应这些事件的代码的过程，这使得你的网页具有交互性和动态性。

在本实验中，你将学习处理 JavaScript 中事件的基本方法。我们将从 HTML 中的基本 onclick 属性开始，然后过渡到更强大、更灵活的 addEventListener 方法。你还将学习如何使用 event 对象来控制事件行为并获取有关事件的信息。

在本实验结束时，你将能够：

将事件处理器附加到 HTML 元素。
将你的 JavaScript 逻辑与你的 HTML 结构分离开来。
阻止事件的默认浏览器行为。
识别哪个元素触发了事件。

让我们开始吧！

向 HTML 元素添加 onclick 属性

在本步骤中，你将学习处理事件最直接的方法：使用 HTML 事件处理器属性。onclick 属性允许你在元素被点击时运行一段 JavaScript 代码。虽然这种方法很简单，但通常最好将你的 HTML 和 JavaScript 分开，这将在后续步骤中介绍。

首先，让我们向按钮添加一个 onclick 属性。

在 WebIDE 左侧的文件浏览器中，找到并打开 index.html 文件。
定位到 <button> 元素。
修改按钮标签，包含一个显示警报的 onclick 属性。

你修改后的 <button> 元素应如下所示：

<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>

添加代码后，保存 index.html 文件。

要查看你的更改，请切换到界面顶部的 Web 8080 选项卡。点击“Click Me”按钮，你应该会看到一个浏览器警报弹出，显示消息“Button Clicked!”。

使用 addEventListener 处理 click 事件

在本步骤中，我们将使用现代且推荐的事件处理方法：addEventListener 方法。此方法允许你在不将 JavaScript 代码混入 HTML 标记的情况下，将事件处理器附加到元素上。这种做法被称为“非侵入式 JavaScript”（unobtrusive JavaScript），可以带来更清晰、更易于维护的代码。

首先，让我们通过删除上一步添加的 onclick 属性来清理我们的 HTML。

打开 index.html 文件。
从 <button> 元素中删除 onclick 属性。它应该再次看起来像这样：

<button id="myButton">Click Me</button>

现在，让我们使用 JavaScript 添加事件监听器。

从文件浏览器中打开 script.js 文件。它目前是空的。
将以下代码添加到 script.js：

const button = document.querySelector("#myButton");

button.addEventListener("click", () => {
  alert("Clicked with addEventListener!");
});

让我们来分析一下这段代码：

document.querySelector('#myButton'): 这行代码使用 ID myButton 从 DOM 中选择按钮元素。
addEventListener('click', ...): 这个方法在按钮元素上调用。它接受两个主要参数：
- 第一个参数是要监听的事件类型，这里是 'click'。
- 第二个参数是当事件发生时将执行的“处理器”或“监听器”函数。这里，我们使用的是一个匿名箭头函数 () => { ... }。

保存 script.js 文件并切换到 Web 8080 选项卡。点击按钮，现在你应该会看到一个显示消息“Clicked with addEventListener!”的警报。

定义事件处理函数

在本步骤中，你将学习如何通过为事件处理器定义一个命名函数，使你的代码更加整洁和可重用。与其直接在 addEventListener 内部使用匿名函数，不如定义一个单独的函数，然后将其名称传递给监听器。

当事件处理逻辑复杂，或者你想将同一个函数用于多个事件或元素时，这种方法非常有用。

让我们修改 script.js 文件来使用一个命名函数。

打开 script.js 文件。
用以下代码替换现有代码：

const button = document.querySelector("#myButton");

function handleClick() {
  button.textContent = "I was clicked!";
}

button.addEventListener("click", handleClick);

以下是发生的变化：

我们定义了一个名为 handleClick 的新函数。此函数包含按钮被点击时将运行的逻辑——在本例中，它会更改按钮的文本。
在 addEventListener 中，我们现在将函数名 handleClick 作为第二个参数传递。请注意，我们传递的是函数引用本身，而不是调用它（即 handleClick，而不是 handleClick()）。当点击事件发生时，浏览器将为我们调用该函数。

保存 script.js 文件并转到 Web 8080 选项卡。点击按钮。这次，你不会看到警报，而是会看到按钮的文本更改为“I was clicked!”。

Code snippet showing event handler function definition

使用 preventDefault 阻止默认行为

在本步骤中，我们将探索 event 对象及其最有用的方法之一：preventDefault()。当事件发生时，浏览器会自动将一个 event 对象传递给处理器函数。该对象包含有关事件的信息，并允许你控制其行为。

某些 HTML 元素具有默认行为。例如，链接（<a> 标签）的默认行为是导航到其 href 属性中指定的 URL。event.preventDefault() 方法允许你阻止此默认行为的发生。

我们的 index.html 文件已经包含一个带有 ID myLink 的链接。让我们为其添加一个事件监听器来阻止其导航。

打开 script.js 文件。
将以下代码添加到文件末尾：

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

让我们分析一下新代码：

我们选择 ID 为 myLink 的 <a> 元素。
我们定义了一个名为 handleLinkClick 的处理器函数，它接受一个参数，我们将其命名为 event。这将是浏览器提供的事件对象。
在函数内部，我们调用 event.preventDefault() 来阻止浏览器跟随链接。
我们还添加了一个 console.log 消息，以确认我们的处理器正在运行。

保存 script.js 文件。现在，转到 Web 8080 选项卡。

右键单击页面上的任意位置，然后选择“检查”（Inspect）以打开浏览器的开发者工具。
在开发者工具中切换到“控制台”（Console）选项卡。
单击“访问 LabEx (链接将被禁用)”（Visit LabEx (link will be disabled)）链接。

你会注意到两件事：页面没有导航到 labex.io，并且控制台中出现了消息“Link click detected, navigation prevented.”。

Console output showing link click prevented

使用 event.target 访问事件目标

在这个最后的步骤中，我们将学习 event 对象的另一个重要属性：event.target。此属性为你提供了触发事件的特定元素的引用。这非常有用，尤其是在父元素上有一个事件监听器来管理多个子元素的事件时（这项技术称为事件委托）。

对于本次实验，我们将 event.target 用于一个更简单的场景：直接修改被点击的元素，而无需为其设置单独的变量。

让我们修改按钮的 handleClick 函数，以使用 event.target。

打开 script.js 文件。
找到你在第 3 步编写的 handleClick 函数，并修改它以接受 event 参数并使用 event.target。

用这个新版本替换旧的 handleClick 函数：

function handleClick(event) {
  // event.target 指的是被点击的按钮
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

以下是详细说明：

handleClick 函数现在接受 event 对象作为参数。
我们不再使用 button 变量，而是使用 event.target 来引用被点击的元素。
event.target.style.backgroundColor = 'lightblue' 更改被点击元素的背景颜色。
event.target.textContent = 'My color changed!' 更改其文本内容。

你的完整的 script.js 文件现在应该看起来像这样：

const button = document.querySelector("#myButton");

function handleClick(event) {
  // event.target refers to the button that was clicked
  event.target.style.backgroundColor = "lightblue";
  event.target.textContent = "My color changed!";
}

button.addEventListener("click", handleClick);

const link = document.querySelector("#myLink");

function handleLinkClick(event) {
  console.log("Link click detected, navigation prevented.");
  event.preventDefault();
}

link.addEventListener("click", handleLinkClick);

保存文件并切换到 Web 8080 选项卡。点击按钮。你将看到它的背景颜色变为浅蓝色，文本更新为“My color changed!”。

Button background and text change after click

总结

恭喜你完成了 JavaScript 事件处理实验！你已经成功掌握了通过响应用户操作来制作交互式网页的核心概念。

在本实验中，你学习了：

HTML 中用于简单事件处理的基本 onclick 属性。
用于分离关注点和保持 JavaScript 代码整洁的现代且推荐的 addEventListener 方法。
如何定义和使用命名函数作为事件处理器，以实现更好的代码组织和可重用性。
功能强大的 event 对象，使用 event.preventDefault() 来阻止浏览器默认行为。
如何使用 event.target 属性识别触发事件的元素。

这些技能是前端 Web 开发的基础，并将成为创建丰富、动态和用户友好型 Web 应用程序的基石。请继续练习这些概念以熟练掌握它们。