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

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

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

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

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

使用開發者工具

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

  • 轉到 **原始碼** 選項卡。
  • 單擊右側的 **事件偵聽器斷點**。
  • 然後執行將觸發事件的操作，例如，如果使用的事件是點選，則點選；如果事件是雙擊，則雙擊。

步驟

  • **步驟 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 事件：

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

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

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

使用檢查元素

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

  • 轉到 **元素** 選項卡。
  • 單擊使用事件的標籤。
  • 之後，單擊下面的 **事件偵聽器** 選項卡

讓我們用一個程式碼示例來討論它：

演算法

  • **步驟 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 事件：

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

在此示例中，我們在 **按鈕** 標籤上使用了 **點選** 事件，然後檢視使用檢查元素方法查詢觸發或觸發的事件的過程。

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

更新於： 2022-10-31

14K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告