时间戳

首页 > 解决方案 > 是否可以监视 HTML 元素中的事件侦听器以了解其中一个被删除的时间？

javascript - 是否可以监视 HTML 元素中的事件侦听器以了解其中一个被删除的时间？

问题描述

我在页面中遇到问题，在某些情况下未触发事件。这不是我的代码，我正在尝试调试缩小和模糊的 JavaScript 代码，我快疯了。

当回复我们网站上的评论时，如果回复的文本为空，则触发此事件（用于注册用户单击回复按钮的分析事件）。如果有文本，则不会触发该事件。

元素是一个<span>标签，但事件监听器实际上是附加到<body>标签上的。我目前的理论是，当回复中有实际文本时正在执行的某些代码正在删除该事件侦听器，因此它不会被触发。

那么，有没有办法监视事件侦听器<body>以了解该事件侦听器何时（以及在代码中的何处）被删除？

更新 我们发现了问题。我们用于评论的第三方库正在删除按钮的父元素，这使得事件无法传播到正文。

标签： javascripthtmlevent-listenerremoveeventlistener

解决方案

如果您可以在删除事件处理程序之前运行脚本代码，则可以用您自己的函数替换removeEventListeneron ：document.body

const original = document.body.removeEventListener;
document.body.removeEventListener = function(...args) {
  console.log("Removed");
  return original.apply(this, args);
};

function handler() {
  console.log("Clicked");
}
document.body.addEventListener("click", handler);
document.body.removeEventListener("click", handler);

（为了覆盖您的基础，您还可以将onclick（或正在使用的任何东西）转换为访问器，以便您可以在代码执行时捕获它document.body.onclick = null;）

还有其他方法可以添加和删除处理程序，但希望您使用的任何库都使用该标准。

旁注：要确认您关于处理程序被删除的理论，您可以在 Chrome 的 devtools 中检查元素上的处理程序：右键单击页面并选择“检查元素”，向上导航到body，然后查看“事件侦听器”选项卡。

推荐阅读