如何找出觸發了哪些 JavaScript 事件？

在本教程中，我們將學習如何找出觸發或激發了哪些 JavaScript 事件。我們可以向 HTML 元素新增事件，以便在網頁上執行某些操作，例如更改文字、提交表單等。

有兩種方法可以找出觸發了哪些 JavaScript 事件：

  • 使用開發者工具
  • 使用檢查元素

讓我們逐一討論它們，並給出程式碼示例。

使用開發者工具

我們可以使用瀏覽器中的開發者工具找出觸發了哪些 JavaScript 事件。要開啟開發者工具，需要按 **Ctrl + Shift + I**；開啟開發者工具後，請按照以下步驟操作：

  • 轉到 **Sources**（原始碼）選項卡。
  • 單擊右側的 **Event Listener Breakpoints**（事件監聽器斷點）。
  • 然後執行將觸發該事件的操作，例如，如果使用的事件是 click，則單擊；如果是 dblclick 事件，則雙擊。

步驟

  • **步驟 1** - 在第一步中，我們將透過其 **ID** 訪問使用該事件的元素，並將其儲存在一個變數中。
  • **步驟 2** - 在下一步中，我們將宣告一個函式，當觸發特定事件時將呼叫該函式。
  • **步驟 3** - 在最後一步中，我們將向該函式新增功能，以便在觸發事件時在網頁上執行該功能。

示例 1

下面的示例將演示使用方法開發者工具方法來找出觸發了哪些 JavaScript 事件：

<!DOCTYPE html>
<html>
<body>
   <h3>Finding out which JavaScript events fired</h3>
   <p id="para">Here, we will add event to element and then will see how
   can we findout it in browser.</p>
   <button id="btn" onclick="display()">click me!</button>
   <script>
      let btn = document.getElementById("btn");
      function display() {
         let para = document.getElementById("para");
         para.innerHTML = "<b>Text changed!!!</b>";
      }
   </script>
</body>
</html>

讓我們看看如何使用上述步驟，在上面的示例中找出觸發了哪些 JavaScript 事件：

  • 第一步，我們將開啟 **開發者工具** 並轉到 **Sources**（原始碼）選項卡，如下所示：

  • 下一步，我們將開啟上圖右側顯示的 **Event Listener Breakpoints**（事件監聽器斷點），然後單擊事件類別（在本例中為 **Mouse**（滑鼠）），然後單擊按鈕以觸發或激發事件；它將突出顯示右側觸發的事件，如下面的圖片所示：

在上面的示例中，我們學習瞭如何使用開發者工具方法找出在 **button** 標籤上使用的 **click** 事件。

使用檢查元素

這是另一種查詢觸發 JavaScript 事件的方法。要實現此方法，首先我們需要透過右鍵單擊瀏覽器來開啟 **Inspect**（檢查），然後按照以下步驟操作：

  • 轉到 **Elements**（元素）選項卡。
  • 單擊使用事件的標籤。
  • 之後，單擊下面的 **Event Listener**（事件監聽器）選項卡。

讓我們透過一個程式碼示例來討論一下：

演算法

  • **步驟 1** - 在第一步中，我們需要透過它們各自的 ID 獲取輸入標籤和我們想要新增事件的元素。
  • **步驟 2** - 在這一步中，我們將使用 JavaScript 的 **addEventListener()** 方法向元素新增事件，該方法將事件名稱作為字串和一個回撥函式，當事件觸發時將呼叫該回調函式。
  • **步驟 3** - 在最後一步中，我們定義回撥函式並提供將在事件觸發時執行的功能。

示例

下面的示例將解釋使用檢查元素方法來找出觸發了哪些 JavaScript 事件：

<!DOCTYPE html>
<html>
<body>
   <h3>Find out which JavaScript events fired</h3>
   <p id="para">Here, we will add event to element and then will see how
   can we findout it in browser.</p>
   <form id="form">
      <input type="text" id="inp">
      <button id="btn">Change text</button>
   </form>
   <script>
      let inp = document.getElementById("inp");
      let btn = document.getElementById("btn");
      btn.addEventListener('click',
         function (event) {
            event.preventDefault();
            let para = document.getElementById("para");
            para.innerHTML = "<b>" + inp.value + "</b>";
         }
      );
   </script>
</body>
</html>

以下是此方法將告訴您觸發的 JavaScript 事件的方法：

  • 首先，我們將開啟檢查元素，然後轉到元素選項卡，如下所示：
  • 下一步，我們將在輸入框中寫一些內容，然後單擊觸發事件的 **change text**（更改文字）按鈕，然後手動搜尋並單擊包含事件的標籤，然後單擊下面的 **Event Listeners**（事件監聽器）選項卡以檢視觸發的事件，下圖將解釋所有內容：

在這個例子中，我們在 **button** 標籤上使用了 **click** 事件，然後查看了使用檢查元素方法查詢觸發或激發事件的過程。

在本教程中，我們討論了兩種查詢觸發或激發的 JavaScript 事件的方法。您可以在上面的示例中使用任何 JavaScript 事件，然後嘗試任何討論過的方法來找出觸發的事件。

更新於：2022年10月31日

14K+ 次瀏覽

啟動您的 職業生涯

透過完成課程獲得認證

開始學習
廣告
© . All rights reserved.