有没有办法知道事件正在调用哪个函数？

Posted 2023-03-07

【中文标题】有没有办法知道事件正在调用哪个函数？

【英文标题】：Is there a way to know which function an event is calling?

【发布时间】：2014-02-22 05:09:15

【问题描述】：

每隔一段时间我都会有大量的 jQuery 事件处理程序，例如：-

$(document).on("click",".some-class", function()
    //perform some action
);

附加到我页面上的元素。如果我的页面上的事件处理程序很少，这没问题，但是在一个巨大的应用程序上调试这些事件处理程序可能会让人头疼。我有时不知道在某些事件上调用了哪个回调。

所以，我的问题是，开发工具中是否有任何选项或技巧可以知道正在调用哪些函数？

它不一定是开发工具。它也可以是 javascript 或 jquery 技巧。

另外，我意识到我可以使用console.log、debugger; 甚至将console.trace() 放在我的回调函数中，但我想知道是否有更清洁和更智能的东西。

【问题讨论】：

这可能对你有帮助！ ***.com/questions/21181340/…

这有点帮助，但当同一个班级有多个事件时，这并不能准确定位。

How to find the original (Anonymous function) source of jQuery events?的可能重复

【参考方案1】：

您可以使用 Chrome 开发工具 Javascript CPU profiler。

它会告诉你哪些函数被调用，以及被哪些其他函数调用。

虽然我怀疑你会发现console.log 更容易。

【讨论】：

CPU Profiler 是我没想到的。如果它真的有帮助会很有趣。

Firefox 有一个很好的内置分析器，它甚至会显示一个图表来缩小在什么时间做许多操作的范围。

【参考方案2】：

来过这里很多次了，我推荐console.log()在每个函数的开头。然后查看这在控制台上创建的跟踪。对于选择不必要地多次触发的事件非常有用。

// Your function
function doSomething(event) 
 console.log("doSomething(event)", event.currentTarget);
 // code for doSomething


$('#mybutton').click(doSomething);

【讨论】：

只是希望有更简洁的方法来做到这一点，而不用到处都用日志填充代码。 ://

是的，同意。真可惜，您可以执行以下操作之一：a）在您的 prod 环境中运行 window.console = log: function() ; 语句以删除日志，b）创建一个带有 console.log 包装器的调试器类，然后调用它，或者 c）使用一个发布时间最小化器，自动剥离对console.log (see this link) 的所有调用。

【参考方案3】：

因此，我找到了一种无需使用任何类型的 console.log(s) 即可让开发工具执行此操作的方法。

这就是你所做的（我将谈论 Chrome 开发工具，但 Firefox 也应该类似）

打开开发工具并转到Source Panel。

在你的右边应该有Event Listener Breakpoints，继续并单击鼠标->单击以启用单击事件的任何断点。 （您可以为此选择自己的事件。在这种情况下，我正在做点击事件）

如果您的脚本是 minified 和 bundled，则跳过此过程。 继续并单击要在其上查找函数的元素。它应该触发breakpoint，您将被带到启用点击事件的脚本（在我的情况下通常是jquery，您可能需要执行几个Step Over才能到达jQuery文件）

李>

您的jQuery 可能是minified，但没关系，Chrome 开发工具上有一个prettifier（source panel 左下方的小 按钮） .

现在按 Ctrl+Shift+O （这会在开发工具上搜索您的函数名称） 并输入 dispatch（对我来说，这似乎是我们自定义函数的所有触发器发生的地方.

1234563这一行）.

现在只有很少的Step Ins （可能更多）它会带你到调用这个事件的函数。

这不是一个完美的解决方案，但它比搜索项目中的所有文件更胜一筹。

如果有人有更好的解决方案，那么我会将答案更改为最简单的答案。

【讨论】：

天哪。我找到了最终的解决方案。 ***.com/questions/2518421/…