Chrome 开发者工具：如何知道点击元素时触发的事件？

Posted 2023-02-22

【中文标题】Chrome 开发者工具：如何知道点击元素时触发的事件？

【英文标题】：Chrome Developer Tools : How to know the event triggered when click a element?

【发布时间】：2016-05-15 16:55:13

【问题描述】：

当我在任何网站时，我如何使用 Chrome 开发者工具来找出当我点击一个元素时调用的 JS 函数？

例如，我在一个具有 DIV 元素的网站上。当我单击此 DIV 时，它会执行一些操作。我想知道什么 JS 函数做了这些动作，所以我可以在控制台中以编程方式调用这个 JS 函数，而无需手动点击 DIV。

谢谢！

【问题讨论】：

How to find what code is run by a button/element in Chrome using Developer Tools的可能重复

【参考方案1】：

一个元素的所有事件侦听器都显示在“事件侦听器”面板中。如果您展开“点击”事件部分，您将看到正在播放的脚本。

找到可能的脚本后，展开其对象以查看函数名称（当然，匿名函数除外）和其他属性。

【讨论】：

这将显示 JS 文件名。有没有更简单的方法可以知道调用的函数，所以我可以简单地从控制台调用它？

问题是我监控的网页很大，也是JS文件。有没有类似“javascript 函数日志”的东西，我可以在其中看到所有调用的函数？

在Event Listeners 窗格中，右键单击handler 属性值并在弹出菜单中选择Show Function Definition。