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()函式執行兩個語句，並更改主體和自身本身的背景顏色。