掌握 HTML 事件属性

介绍

HTML 事件属性（HTML Event Attributes）用于为 HTML 元素添加功能。当某个事件发生时，例如用户点击按钮或提交表单，可以执行 JavaScript 代码。在本实验中，你将学习如何使用 HTML 事件属性为网页添加交互性。

注意：你可以在 index.html 中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签页以预览网页。

创建 HTML 文档

创建一个名为 index.html 的新文件，并添加基本的 HTML 结构。

<!doctype html>
<html>
  <head>
    <title>HTML Event Attributes Lab</title>
  </head>
  <body></body>
</html>

添加按钮

在 HTML 文档的 body 中添加一个 button 元素。为其添加显示文本，并设置一个 id 属性，以便我们可以在 JavaScript 代码中引用它。

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

添加事件属性

为 button 元素添加一个 onclick 属性。在该属性中，我们将指定按钮被点击时应执行的 JavaScript 代码。

<button id="myButton" onclick="alert('Hello, World!')">Click Here</button>

添加更多功能

在 HTML 文档的 body 中添加一个 div 元素。该元素将用于在按钮被点击时显示文本。

<div id="myDiv"></div>

接下来，添加 JavaScript 代码，以便在按钮被点击时更新 div 元素的文本。

<button
  id="myButton"
  onclick="document.getElementById('myDiv').innerHTML = 'Hello, World!'"
>
  Click Here
</button>
<div id="myDiv"></div>

处理表单提交

在 HTML 文档的 body 中添加一个 HTML 表单。同时，为表单添加一个 onsubmit 属性，以指定表单提交时应执行的 JavaScript 代码。

<form onsubmit="alert('Form Submitted!')">
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

使用事件监听器

我们可以使用 JavaScript 为 HTML 元素附加事件监听器，而不是直接在 HTML 中使用事件属性。

首先，从 HTML 元素中移除 onclick 和 onsubmit 属性。

<button id="myButton">Click Here</button>
<div id="myDiv"></div>

<form>
  <input type="text" name="firstName" placeholder="First Name" />
  <input type="text" name="lastName" placeholder="Last Name" />
  <br />
  <button type="submit">Submit</button>
</form>

接下来，创建一个 JavaScript 函数，该函数将在按钮被点击时调用。此函数应更新 div 元素的文本。

<script>
  function handleButtonClick() {
    document.getElementById("myDiv").innerHTML = "Hello, World!";
  }
</script>

最后，使用 JavaScript 为按钮附加事件监听器。

<button id="myButton">Click Here</button>
<div id="myDiv"></div>
<script>
  document
    .getElementById("myButton")
    .addEventListener("click", handleButtonClick);
</script>

移除事件监听器

我们也可以使用 JavaScript 移除事件监听器。

在 HTML 文档中添加一个新按钮。该按钮将移除第一个按钮的点击事件监听器。

<button id="removeButton">Remove Click Event Listener</button>

接下来，创建一个新的 JavaScript 函数，该函数将移除第一个按钮的点击事件监听器。

<script>
  function removeClickListener() {
    document
      .getElementById("myButton")
      .removeEventListener("click", handleButtonClick);
  }
</script>

最后，为新按钮附加一个事件监听器，该监听器将在按钮被点击时调用 removeClickListener() 函数。

<button id="removeButton">Remove Click Event Listener</button>
<script>
  document
    .getElementById("removeButton")
    .addEventListener("click", removeClickListener);
</script>

总结

在本实验中，你学习了如何使用 HTML 事件属性为网页添加交互性。你还学习了如何使用 JavaScript 为 HTML 元素附加和移除事件监听器。通过这些工具，你可以创建能够响应用户输入的动态网页。