如何找到哪一行添加了特定的js事件处理程序？

13 浏览
0 Comments

如何找到哪一行添加了特定的js事件处理程序？

有一个特定的HTML元素，当点击时会执行某个操作。我找不到哪一行代码添加了这个点击事件。有没有什么工具可以帮助我找到呢？\n在Chrome开发者工具中，选择“元素”选项卡，然后选择该元素，右侧面板中可以找到“事件监听器”>“点击”选项，它会列出几个带有行号的JavaScript文件，但它们是JavaScript插件。我需要知道的是哪一行代码决定了该元素使用这些插件。\n我还尝试搜索.click(，但是1）有太多其他分配了点击事件的元素；2）相关的代码行可能是使用其他语法编写的，比如.on(\'click\'。

0

1 答案

0 Comments

如何找到添加特定js事件处理程序的行？

问题原因：

在调试代码时，有时我们需要找到特定的js事件处理程序是在哪一行添加的，以便进行进一步的分析和修复。然而，在大型项目中，这可能会变得非常困难，因为代码行数可能非常多，而且事件处理程序可能分散在不同的文件和函数中。因此，我们需要一种方法来快速准确地找到添加特定事件处理程序的代码行。

解决方法：

我们可以通过重写EventTarget的addEventListener原型来实现这一目的。首先，我们需要在添加任何事件之前添加以下代码：

EventTarget.prototype.addEventListener = function(type, listener, useCapture) {
  if (this.id === '要跟踪的元素的id') {
    console.log('breakpoint!');
  }
};

以上代码将重写addEventListener原型，并在每次调用addEventListener时检查元素的id是否匹配。如果匹配，则在控制台输出"breakpoint!"。然后，我们可以使用Chrome开发者工具的控制台，添加断点并查看堆栈跟踪，以找到添加事件处理程序的源代码行。

需要注意的是，在找到源代码行后，我们应该及时将以上重写的代码禁用，以免对正常的事件处理程序产生干扰。

通过这种方法，我们可以快速准确地找到特定事件处理程序的源代码行，从而更轻松地进行调试和修复。

0