如何找出触发了哪些 JavaScript 事件?

Posted

技术标签:

【中文标题】如何找出触发了哪些 JavaScript 事件?【英文标题】:How to find out which JavaScript events fired? 【发布时间】:2011-04-16 19:08:58 【问题描述】:

我有一个选择列表:

<select id="filter">
  <option value="Open" selected="selected">Open</option>
  <option value="Closed">Closed</option>
</select>

当我选择Closed 时,页面会重新加载。在这种情况下,它显示关闭的票证(而不是打开的票证)。当我手动执行时,它工作正常。

问题是当我用Watir选择Closed时页面没有重新加载:

browser.select_list(:id => "filter").select "Closed"

这通常意味着某些 javascript 事件不会被触发。我可以用 Watir 触发事件:

browser.select_list(:id => "filter").fire_event "onclick"

但我需要知道要触发哪个事件。

有没有办法找出为元素定义了哪些事件?

【问题讨论】:

本题列出了更多工具:***.com/questions/570960/… 视觉事件,sprymedia.co.uk/article/Visual+Event 。我相信这将帮助一半的人登陆这个 *** 页面:) 【参考方案1】:

看起来Firebug(Firefox 插件)有答案:

打开 Firebug 右键单击 html 选项卡中的元素 点击Log Events 启用控制台选项卡 在Console选项卡中单击Persist(否则重新加载页面后Console选项卡将清除) 选择Closed(手动)

在控制台选项卡中会有这样的东西:

...
mousemove clientX=1097, clientY=292
popupshowing
mousedown clientX=1097, clientY=292
focus
mouseup clientX=1097, clientY=292
click clientX=1097, clientY=292
mousemove clientX=1096, clientY=293
...

来源:Firebug Tip: Log Events

【讨论】:

非常感谢,我不知道 Firebug 的功能。也许我需要一些时间来真正地进行 RTFM。 直到几分钟前我才知道这件事。我正在写这个问题,并在此过程中找到了答案。 :) Firebug 开发者最近的一篇博文:softwareishard.com/blog/firebug/firebug-tip-log-dom-events 您好,我尝试右键单击萤火虫,但找不到日志事件选项,您能帮我找到这个选项吗? 嗨,Firbug 插件已不复存在。那么我应该如何实现呢?请帮助我【参考方案2】:

只是想补充一点,您也可以在 Chrome 中执行此操作:

Ctrl + Shift + I(开发人员工具)> Sources> 事件监听器断点(右侧)。

您还可以通过简单地右键单击元素然后浏览其属性(右侧面板)来查看已附加的所有事件。

例如:

右键点击左侧的upvote按钮 选择检查元素 折叠样式部分(最右侧部分 - 双 V 形) 展开事件侦听器选项 现在您可以看到与投票相关的事件

不确定它是否和 firebug 选项一样强大,但对于我的大部分内容来说已经足够了。

另一个有点不同但非常棒的选项是视觉事件: http://www.sprymedia.co.uk/article/Visual+Event+2

它突出显示页面上所有已绑定的元素,并有弹出框显示被调用的函数。非常漂亮的书签!如果您更喜欢,还有一个 Chrome 插件 - 不确定其他浏览器。

AnonymousAndrew还指出了monitorEvents(window);here

【讨论】:

我无法弄清楚如何查看使用您建议的任何一种方式触发的事件。 更新:Dev tools(或inspector)里面不是Scripts,你必须进入Sources然后看右边的菜单。 @aledalgrande 谢谢,已更新。 (对于任何阅读的人,这仅适用于第一个解决方案,第二个仍然使用检查器)。 您选择upvote按钮作为示例是否有特定原因? :P @GeorgeDimitriadis 哈哈:P【参考方案3】:

关于 Chrome,通过命令行 API 检出 monitorEvents()。

通过菜单 > 工具 > JavaScript 控制台打开控制台。

输入monitorEvents(window);

查看充斥着事件的控制台

 ...
 mousemove MouseEvent dataTransfer: ...
 mouseout MouseEvent dataTransfer: ...
 mouseover MouseEvent dataTransfer: ...
 change Event clipboardData: ...
 ...

documentation 中还有其他示例。我猜这个功能是在上一个答案之后添加的。

【讨论】:

不错!结合jQuery:monitorEvents($('#element').get()) 停止监控使用unmonitorEvents(window)【参考方案4】:

您可以在 Google Chrome 开发者控制台中使用getEventListeners。

getEventListeners(object) 返回注册的事件监听器 指定的对象。

getEventListeners(document.querySelector('option[value=Closed]'));

【讨论】:

【参考方案5】:

@Himaas -- Firebug 已被 Firefox 开发者版取代。如果您继续安装它,您可以通过打开开发工具(右键单击 > 检查)来记录事件,然后选择调试器,然后在页面底部您应该会看到“事件侦听器断点”,其中未选中名为“日志”。选中该复选框。现在您所要做的就是在“事件侦听器断点”下的列表中选择要记录的事件。从那里您将看到记录到控制台的选定事件。

这是帮助说明的图像:

【讨论】:

以上是关于如何找出触发了哪些 JavaScript 事件?的主要内容,如果未能解决你的问题,请参考以下文章

jQuery - 找出触发事件的原因[重复]

JavaScript 事件日志

如何在 JavaScript 中触发事件?

在 WPF 中找出 OnPropertyChanged 事件的接收者

如何在调试时或从JavaScript代码中在DOM节点上查找事件侦听器?

Javascript中的事件委托机制