JavaScript/事件处理

到目前为止，所示的 JS 程序在 HTML 页面加载时自动启动。这使一切都保持小巧、简单和直接。

现在我们想引入一个机制，在特定的时间点有意地启动程序。当用户输入一些内容时，可能需要对其进行评估；当用户点击一个按钮时，可能需要启动一个复杂的操作，例如数据库查询。这些操作（验证、数据库查询）将在 JS 函数中处理，一些 HTML 代码将启动对这些 JS 函数的调用。为了理解它是如何工作的，我们必须了解事件。在后面的章节中，我们将详细解释事件。

假设用户点击了一个按钮。这会生成一个onclick事件。这种事件的发生以声明方式与对命名 JS 函数的调用相结合。浏览器会调用这个 JS 函数。JS 函数运行。

包含嵌入 JS 的完整 HTML 代码如下：

<!DOCTYPE html>
<html>
<head>
  <title>Testing an event</title>
  <script>
  function showSomething() {
    alert("Someone clicked the button.");
  }
  </script>
</head>
<body>
  <h1>Click the button</h1>
  <button type="button" onclick="showSomething()">A button</button>
</body>
</html>

与之前的例子相比，页面加载时不会发生任何事情。这是因为alert()命令嵌入在 JS 函数showSomething()中。这个函数只是被定义，但没有启动。
HTML 元素<button>有一个属性onclick，其值为showSomething()。
当点击按钮时，会发生onclick事件。事件绑定到按钮。
浏览器处理事件。它注意到应该运行具有给定名称的函数。
浏览器在所有可用的 JS 脚本中搜索该函数（请注意，该名称以及所有 JS 代码都区分大小写！）。
在<script>...</script>部分中找到具有此确切名称的函数后，浏览器将启动该函数。
该函数执行并显示消息。

本质上，只要用户点击按钮，就会运行具有显示消息行为的 JS 函数。

第二个示例

此示例提供了更改某些 HTML 元素背景颜色的可能性。它使用 3 个按钮、2 个 JS 函数和 1 个事件类型（onclick；还有许多其他类型）。此外，它引入了元素 ID的概念。

<!DOCTYPE html>
<html>
<head>
  <title>Second test for events</title>
  <script>
  function makeGreen() {
    document.getElementById("mainPart")
            .style.background = "green";
  }
  function makeBlue() {
    document.getElementById("mainPart")
            .style.background = "blue";
    document.getElementById("blueButton")
            .style.background = "aqua";
  }
  </script>
</head>
<body id="mainPart">
  <h1>Click the buttons</h1>
  <button type="button" onclick="makeGreen()">GREEN</button>
  <button type="button" onclick="makeBlue()"
          id="blueButton">BLUE</button>
  <button type="button">Nothing</button>
</body>
</html>

与第一个示例有什么区别？

有 3 个按钮。前两个与 JS 函数相关联；第三个没有。
<body>和第二个<button>元素包含一个属性id="..."。这为它们分配了一个标识符。它可以在 JS 中用于定位它们。
<script>元素包含两个具有不同名称的函数。
当您点击其中一个按钮时，会调用相关的 JS 函数。因为第三个按钮没有关联的 JS 函数，所以那里不会发生任何事情。
在 JS 中，代码部分document.getElementById("...")定位具有此 ID 的元素。代码部分.style.background = "..."修改此元素的背景颜色。请忽略这两个部分是分别写在不同的行上的。这只是为了在小型设备上更好地阅读源代码。您可以将这两行链接在一起。
makeBlue()函数执行两个语句，并更改主体和自身本身的背景颜色。