协慌网

登录 贡献 社区

如何查看 Chrome DevTools 中某个元素上触发的事件?

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

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

答案

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

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

您可以使用monitorEvents函数。

只需检查您的元素( right mouse clickInspect可见元素,或转到Elements标签,然后选择所需的元素),然后转到 “ Console标签并输入以下内容:

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

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

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

monitorEvents函数的用法

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