如何查看在Chrome DevTools中的元素上触发的事件？

 

我在库中的页面上有一个可自定义的表单元素。 我想查看当我与它交互时发生了什么JavaScript事件，因为我试图找出使用哪个事件处理程序。

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

  • 点击F12打开开发工具
  • 点击Sources选项卡
  • 在右侧，向下滚动到“Event Listener Breakpoints”，然后展开树
  • 点击你想听的事件。
  • 与目标元素进行交互，如果他们触发，您将在调试器中获得一个中断点

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

    你可以使用monitorEvents函数。

    只需检查你的元素（ right mouse click → Inspect可见元素或转到Chrome开发人员工具中的Elements选项卡并选择想要的元素），然后转到Console选项卡并编写： 

    monitorEvents($0)

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

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

    unmonitorEvents($0)

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

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

    monitorEvents(document.body, 'mouse')

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

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

    使用monitorEvents函数

    Visual Event是一个不错的小书签，您可以使用它来查看元素的事件处理程序。 在线演示可以在这里查看。

    链接地址: http://www.djcxy.com/p/83429.html

    上一篇: How do I view events fired on an element in Chrome DevTools?

    下一篇: How to find event listeners on a DOM node when debugging or from the JavaScript code?