Javascript 是否可以使用Chrome开发工具查看当前有多少事件侦听器处于活动状态？

例如，如果我在浏览器中运行以下代码并记录性能，在单击10次之后，Chrome Dev Tools会显示21个侦听器（请参见下面的屏幕截图），即使理论上每个侦听器在添加另一个侦听器之前都会被删除

为什么点击10次后会有21个听众？这表明页面加载时有一个侦听器（正确），每次单击时都会添加两个侦听器，即使我使用的是e.stopPropagation（）。为什么呢

我关心的是，如果在web应用程序中添加和删除大量元素和事件侦听器，如何在代码中发现内存泄漏

<div id="container"></div>

<script>
function addListener(){
    let container = document.getElementById("container");
    container.addEventListener("click", clickHandler, false);
}
function clickHandler(e){
    e.stopPropagation();
    let container = document.getElementById("container");
    container.removeEventListener("click", clickHandler, false);
    console.log("clicked"); 
    addListener();
}

addListener();
</script>

函数addListener（）{
let container=document.getElementById（“容器”）；
container.addEventListener（“单击”，clickHandler，false）；
}
函数clickHandler（e）{
e、 停止传播（）；
let container=document.getElementById（“容器”）；
removeEventListener（“单击”，clickHandler，false）；
控制台日志（“单击”）；
addListener（）；
}
addListener（）；

---

垃圾收集不会立即运行，根据内存压力的不同，可能需要几秒钟或几分钟才能启动。如果此代码是真实的，那么在同一元素上重新添加同一侦听器的目的是什么？如果这是一个真实代码的近似值，可能您将其过于简化，现在它无法反映实际发生的情况。点击垃圾桶图标并做一个简短的记录：你应该看到数字下降。嗨，wOxxOm，谢谢你的评论。是的，这是我为演示这个问题而编写的一段代码。这是毫无意义的代码，除了证明我在问题中的意思。我正在写的实际代码太长了，对于添加到stackoverflow来说不是很清楚。也许这会帮助你实现目标。wOxxOm，谢谢，我按照你说的做了-使用垃圾桶-数字确实减少到了一。我将在我的原始代码上运行相同的测试。非常感谢。你知道为什么每次点击都会添加两个事件监听器吗？谢谢EternalHour，在发布我的问题之前，我已经看过了这个问题，但我肯定会重新访问它和上面的链接，因为这将有助于我对事件监听器的全面理解。感谢您添加它。垃圾收集不会立即运行，它可能需要几秒钟或几分钟才能启动，具体取决于内存压力。如果此代码是真实的，那么在同一元素上重新添加同一侦听器的目的是什么？如果这是一个真实代码的近似值，可能您将其过于简化，现在它无法反映实际发生的情况。点击垃圾桶图标并做一个简短的记录：你应该看到数字下降。嗨，wOxxOm，谢谢你的评论。是的，这是我为演示这个问题而编写的一段代码。这是毫无意义的代码，除了证明我在问题中的意思。我正在写的实际代码太长了，对于添加到stackoverflow来说不是很清楚。也许这会帮助你实现目标。wOxxOm，谢谢，我按照你说的做了-使用垃圾桶-数字确实减少到了一。我将在我的原始代码上运行相同的测试。非常感谢。你知道为什么每次点击都会添加两个事件监听器吗？谢谢EternalHour，在发布我的问题之前，我已经看过了这个问题，但我肯定会重新访问它和上面的链接，因为这将有助于我对事件监听器的全面理解。谢谢你添加它。