欢迎来到 JavaScript 事件处理实验！事件是浏览器中发生的动作，例如用户点击按钮、移动鼠标或按下键盘。事件处理是编写响应这些事件的代码的过程，这使得你的网页具有交互性和动态性。
在本实验中，你将学习处理 JavaScript 中事件的基本方法。我们将从 HTML 中的基本 onclick 属性开始，然后过渡到更强大、更灵活的 addEventListener 方法。你还将学习如何使用 event 对象来控制事件行为并获取有关事件的信息。
在本实验结束时，你将能够：
让我们开始吧！
在本步骤中，你将学习处理事件最直接的方法：使用 HTML 事件处理器属性。onclick 属性允许你在元素被点击时运行一段 JavaScript 代码。虽然这种方法很简单，但通常最好将你的 HTML 和 JavaScript 分开，这将在后续步骤中介绍。
首先，让我们向按钮添加一个 onclick 属性。
index.html 文件。<button> 元素。onclick 属性。你修改后的 <button> 元素应如下所示：
<button id="myButton" onclick="alert('Button Clicked!')">Click Me</button>添加代码后，保存 index.html 文件。
要查看你的更改，请切换到界面顶部的 Web 8080 选项卡。点击“Click Me”按钮，你应该会看到一个浏览器警报弹出，显示消息“Button Clicked!”。
在本步骤中，我们将使用现代且推荐的事件处理方法：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!”。
在本步骤中，我们将探索 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);让我们分析一下新代码：
myLink 的 <a> 元素。handleLinkClick 的处理器函数，它接受一个参数，我们将其命名为 event。这将是浏览器提供的事件对象。event.preventDefault() 来阻止浏览器跟随链接。console.log 消息，以确认我们的处理器正在运行。保存 script.js 文件。现在，转到 Web 8080 选项卡。
你会注意到两件事：页面没有导航到 labex.io，并且控制台中出现了消息“Link click detected, navigation prevented.”。
在这个最后的步骤中，我们将学习 event 对象的另一个重要属性：event.target。此属性为你提供了触发事件的特定元素的引用。这非常有用，尤其是在父元素上有一个事件监听器来管理多个子元素的事件时（这项技术称为事件委托）。
对于本次实验，我们将 event.target 用于一个更简单的场景：直接修改被点击的元素，而无需为其设置单独的变量。
让我们修改按钮的 handleClick 函数，以使用 event.target。
script.js 文件。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!”。
恭喜你完成了 JavaScript 事件处理实验！你已经成功掌握了通过响应用户操作来制作交互式网页的核心概念。
在本实验中，你学习了：
onclick 属性。addEventListener 方法。event 对象，使用 event.preventDefault() 来阻止浏览器默认行为。event.target 属性识别触发事件的元素。这些技能是前端 Web 开发的基础，并将成为创建丰富、动态和用户友好型 Web 应用程序的基石。请继续练习这些概念以熟练掌握它们。
