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

5 回答

• 24

  • 点击F12打开Dev Tools

  • 单击“源”选项卡

  • 在右侧，向下滚动到"Event Listener Breakpoints"，然后展开树

  • 单击要收听的事件 .

  • 与目标元素交互，如果它们触发，您将在调试器中获得一个断点

  类似地，您可以右键单击目标元素 - >选择“检查元素”向下滚动开发框架的右侧，底部是“事件监听器” . 展开树以查看附加到元素的事件 . 不确定这是否适用于通过冒泡处理的事件（我猜不是）

  回复于 2024-04-28T03:26:37+08:00
• 649

  Visual Event是一个很好的小书签，可用于查看元素的事件处理程序 . 在线演示可以查看here .

  回复于 2024-04-28T03:26:37+08:00
• 14

  对于jQuery（至少版本1.11.2），以下过程适用于我 .

  • 右键单击元素并打开'Chrome Developer Tools'

  • 在'Console'中键入 $._data(($0), 'events');

  • 展开附加的对象，然后双击 handler: 值 .

  • 这显示附加功能的源代码，使用'Search'选项卡搜索其中的一部分 .

  现在是时候停止重新发明轮子并开始使用vanilla JS事件...... :)

  回复于 2024-04-28T03:26:37+08:00
• 741

  您可以使用monitorEvents功能 .

  只需检查您的元素（ right mouse click → Inspect 在可见元素上或转到Chrome开发者工具中的 Elements 标签并选择想要的元素）然后转到 Console 标签并写入：

  monitorEvents($0)
  

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

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

  unmonitorEvents($0)
  

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

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

  monitorEvents(document.body, 'mouse')
  

  此可用类型的列表是here .

  我做了一个小gif，说明了这个功能是如何工作的：

  

  回复于 2024-04-28T03:26:37+08:00
• 17

  如果它是一个jquery插件，这将不会显示脚本可能创建的自定义事件 . 例如 ：

  jQuery(function($){
   var ThingName="Something";
  
   $("body a").live('click', function(Event){
     var $this = $(Event.target);
         $this.trigger(ThingName + ":custom-event-one");
   });
  
   $.on(ThingName + ":custom-event-one", function(Event){
     console.log(ThingName, "Fired Custom Event: 1", Event);
   })
  
  });
  

  Chrome开发人员工具中Scripts下的事件面板不会显示“Something：custom-event-one”

  回复于 2024-04-28T03:26:37+08:00