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