如何检查连接到元素/文档的JavaScript事件侦听器/处理程序？

当我们在编写前端代码时，经常需要为页面上的元素添加事件监听器或处理程序，以实现交互效果。但是，有时候我们可能会忘记已经添加了哪些事件监听器或处理程序，这会导致代码出现问题，难以调试和优化。

本文将介绍如何使用浏览器自带的开发者工具来检查连接到元素/文档的JavaScript事件侦听器/处理程序，并提供一些实用技巧和示例代码，帮助您更好地管理和调试前端代码。

1. 检查元素的事件监听器

首先，我们需要打开浏览器的开发者工具。一般情况下，可以通过按F12键或右键点击页面并选择“检查”来打开开发者工具。

接下来，切换到“Elements”选项卡，选择要检查的元素。然后，在右侧的“Event Listeners”面板中，查看该元素已经添加了哪些事件监听器。

例如，以下代码向一个按钮添加了click事件监听器：

<button id="myBtn">Click me</button>
<script>
document.getElementById("myBtn").addEventListener("click", function() {
  alert("Button clicked!");
});
</script>

现在，我们可以使用开发者工具检查该按钮是否已经添加了click事件监听器。在开发者工具中选中该按钮后，我们会看到如下图所示的事件监听器列表：

从上图可以看出，该按钮已经添加了一个click事件监听器，其处理程序为“function() { alert("Button clicked!"); }”。

2. 检查文档的事件监听器

除了检查元素的事件监听器外，我们还可以查看整个文档已经添加了哪些事件监听器。要查看文档的事件监听器，我们需要切换到“Event Listeners”选项卡。

例如，以下代码向整个文档添加了DOMContentLoaded事件监听器：

<script>
document.addEventListener("DOMContentLoaded", function() {
  alert("DOM content loaded!");
});
</script>

现在，我们可以使用开发者工具检查该文档是否已经添加了DOMContentLoaded事件监听器。在开发者工具中选择“Document”选项卡后，我们会看到如下图所示的事件监听器列表：

从上图可以看出，该文档已经添加了一个DOMContentLoaded事件监听器，其处理程序为“function() { alert("DOM content loaded!"); }”。

3. 使用控制台打印事件监听器

除了通过浏览器开发者工具查看事件监听器外，我们还可以使用JavaScript代码来打印元素或文档上的事件监听器。

例如，以下代码使用console.log()方法打印了一个按钮上的所有click事件监听器：

<button id="myBtn">Click me</button>
<script>
var listeners = getEventListeners(document.getElementById("myBtn"));
console.log(listeners.click);
</script>

在控制台中运行上述代码后，我们会看到如下输出：

[function()]

从上面的输出可以看出，该按钮上只添加了一个click事件监听器，其处理程序为“function() {}”。

4. 使用removeEventListener()方法移除事件监听器

最后，当我们需要移除元素或文档上的事件监听器时，我们可以使用removeEventListener()方法来实现。该方法接受两个参数：要移除的事件类型和要移除的处理程序。

例如，以下代码向一个按钮添加了一个click事件监听器，并在点击按钮后移除该监听器：

<button id="myBtn">Click me</button>
<script

> 来源：[JavaScript中文网](https://www.javascriptcn.com/post/11984) ，转载请注明来源
[https://www.javascriptcn.com/post/11984](https://www.javascriptcn.com/post/11984)