协慌网

我在库的页面上有一个可定制的表单元素。我想查看与之交互时触发了哪些 javascript 事件，因为我试图找出要使用的事件处理程序。

如何使用 Chrome Web Developer 做到这一点？

• 点击F12打开开发工具
• 点击来源标签
• 在右侧，向下滚动到 “事件侦听器断点”，然后展开树
• 单击您想听的事件。
• 与目标元素进行交互，如果它们触发，您将在调试器中得到一个断点

同样，您可以右键单击目标元素 -> 选择 “检查元素”。在 dev 框架的右侧向下滚动，底部是 “事件侦听器”。展开树以查看将哪些事件附加到元素。不知道这是否适用于通过冒泡处理的事件（我猜不是）

您可以使用monitorEvents函数。

只需检查您的元素（ right mouse click → Inspect可见元素，或转到Elements标签，然后选择所需的元素），然后转到 “ Console标签并输入以下内容：

monitorEvents($0)

现在，当您将鼠标移到该元素上，进行焦点或单击时，将显示触发事件的名称及其数据。

要停止获取此数据，只需将其写入控制台：

unmonitorEvents($0)

$0只是 Chrome 开发者工具选择的最后一个 DOM 元素。您可以在那里传递任何其他 DOM 对象（例如getElementById或querySelector结果）。

您还可以将事件 “类型” 指定为第二个参数，以将监视的事件缩小到某个预定义的集合。例如：

monitorEvents(document.body, 'mouse')

这些可用类型的列表在这里。

我做了一个小 gif，说明了此功能的工作原理：

视觉事件是一个不错的小书签，可用于查看元素的事件处理程序。在线演示可以在这里查看。