JavaScript 事件监听器列表

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

JavaScript 事件监听器列表

作者：迹忆客最近更新：2023/03/10 浏览次数：

一个网站有许多使网页更具交互性的事件。例如，你单击联系我们按钮，由于事件侦听器，它会快速打开一个表单供你联系。

本教程将学习如何集体和单独列出 JavaScript 事件侦听器。我们可以使用 Chrome Developer Tools Console 使用不同的方法和技术，并通过相应的示例进行讨论。

让我们先了解基本代码（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。共有三个事件，keypress、click 和 onload。

如果你在停留在 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");
    });
 }

如果我们在名字或姓氏文本框中按 Enter 键，它会显示带有属性的 KeyboardEvent。如果我们点击 Submit 按钮，PointerEvent 会监听。

这样，我们就知道哪个元素有哪个事件监听器了。你可以使用 console.log(event.target); 而不是 console.log(event); 如果你想知道附加特定事件的元素，请在上面的代码中。

我们在两个文本字段上按下 Enter 键并单击按钮。现在，请参阅以下输出。打印完整的 HTML 元素。

输出：

javascript 事件侦听器列表 - 单独列出元素

当我们知道事件但需要调试时，这种情况很有用。

如果我们有数百个事件怎么办？我们如何知道哪个 HTML 元素的事件是什么？

转到页面，在元素上右键单击，然后选择检查选项。然后，选择 Event Listeners 标签页并检查附加到该特定 HTML 元素的事件列表。

观察以下输出。

输出：

javascript 事件侦听器列表 - 与检查一起列出事件侦听器

在上面给出的输出中，你可能已经注意到我们有三个事件侦听器：单击 Submit 按钮时的 click、keypress 和 load，而 keypress 和 load 用于 <输入> 元素。

我们还可以使用 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)
  }
});