JavaScript 事件監聽器列表

Mehvish Ashiq 2023年1月30日 2022年5月10日
  1. 獲取 JavaScript 事件監聽器列表
  2. 使用 Chrome 開發者工具控制檯獲取 JavaScript 事件監聽器列表
JavaScript 事件監聽器列表

一個網站有許多使網頁更具互動性的事件。例如,你單擊聯絡我們按鈕,由於事件偵聽器,它會快速開啟一個表單供你聯絡。

本教程將學習如何集體和單獨列出 JavaScript 事件偵聽器。我們可以使用 Chrome Developer Tools Console 使用不同的方法和技術,並通過相應的示例進行討論。

獲取 JavaScript 事件監聽器列表

讓我們先了解基本程式碼(HTML 和 JavaScript)。

HTML 程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Get a list of event listeners</title>
 <script src="./eventList.js"></script>
</head>
<body>
 <label>First name:</label>
 <input type="text" id="firstname" name="first-name">
 <br />

 <label>Last name:</label>
 <input type="text" id="lastname" name="last-name">
 <br />

 <button id="btn">Submit</button>

</body>
</html>

JavaScript 程式碼:

window.onload = function(){
 document.addEventListener('keypress', e => {
 if (e.key === "Enter") {
 e.preventDefault();
 return false;
       }
    });

 document.getElementById('btn').addEventListener('click', function(){
 console.log("You have clicked the submit button");
    });
}

輸出:

javascript 事件監聽器列表 - 基本輸出

我們有兩個 text 型別的 <input> 元素和一個附加事件的 button。共有三個事件,keypressclickonload

如果你在停留在 document 的任何位置時按 Enter 鍵,keypress 事件將被觸發。當你單擊 Submit 按鈕時,click 事件會被觸發。

並且,當整個頁面被載入時,onload 事件被觸發。現在,我們如何知道事件監聽器?

複製以下 JavaScript 程式碼進行練習。

window.onload = function(){

 document.addEventListener('keypress', e => {
 console.log(e);
 if (e.key === "Enter") {
 e.preventDefault();
 return false;
       }
    });

 document.getElementById('btn').addEventListener('click', function(event){
 console.log(event);
 console.log("You have clicked the submit button");
    });
 }

輸出:

javascript event listeners list - 單獨列出事件

如果我們在名字或姓氏文字框中按 Enter 鍵,它會顯示帶有屬性的 KeyboardEvent。如果我們點選 Submit 按鈕,PointerEvent 會監聽。

這樣,我們就知道哪個元素有哪個事件監聽器了。你可以使用 console.log(event.target); 而不是 console.log(event); 如果你想知道附加特定事件的元素,請在上面的程式碼中。

我們在兩個文字欄位上按下 Enter 鍵並單擊按鈕。現在,請參閱以下輸出。列印完整的 HTML 元素。

輸出:

javascript 事件偵聽器列表 - 單獨列出元素

當我們知道事件但需要除錯時,這種情況很有用。

如果我們有數百個事件怎麼辦?我們如何知道哪個 HTML 元素的事件是什麼?

轉到頁面,在元素上右鍵單擊,然後選擇檢查選項。然後,選擇 Event Listeners 標籤頁並檢查附加到該特定 HTML 元素的事件列表。

觀察以下輸出。

輸出:

javascript 事件偵聽器列表 - 與檢查一起列出事件偵聽器

在上面給出的輸出中,你可能已經注意到我們有三個事件偵聽器:單擊 Submit 按鈕時的 clickkeypressload,而 keypressload 用於 <輸入> 元素。

使用 Chrome 開發者工具控制檯獲取 JavaScript 事件監聽器列表

我們還可以使用 Chrome 開發者工具控制檯上的 getEventListeners(Object) 方法來獲取事件監聽器。檢查以下輸出。

輸出:

javascript 事件監聽器列表 - geteventlisteners 控制檯函式

如果我們想一次性獲得完整的事件列表怎麼辦?你可以在任何網站上執行此操作,以瞭解哪個事件正在偵聽哪個 HTML 元素。

在控制檯上鍵入以下命令。

Array.from(document.querySelectorAll("*")).forEach(e => {
 const ev = getEventListeners(e);
 if (Object.keys(ev).length !== 0){
 console.log(e, ev)
  }
});

輸出:

javascript event listeners list - 在任何站點上一起列出事件偵聽器並進行檢查

上面的輸出並排為所有事件偵聽器提供了它們各自的 HTML 元素。

Mehvish Ashiq avatar Mehvish Ashiq avatar

Mehvish Ashiq is a former Java Programmer and a Data Science enthusiast who leverages her expertise to help others to learn and grow by creating interesting, useful, and reader-friendly content in Computer Programming, Data Science, and Technology.

LinkedIn GitHub Facebook

相關文章 - JavaScript Event