如何找出哪些JavaScript事件触发？

100

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

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

的问题是，当我选择Closed与Watir的页面不会重新加载：

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

这通常意味着一些JavaScript事件，不会触发。我可以用Watir发射事件：

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

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

有没有办法找出哪些事件是为一个元素定义的？

来源

2010-09-24 Željko Filipin

此问题列出了更多工具：http://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool – 2010-09-24 14:11:09

Visual Event，http： //www.sprymedia.co.uk/article/Visual+Event。我相信，这将有助于一半人登陆这个stackoverflow页面:) – Cedric 2012-07-25 01:40:17

111

貌似Firebug（Firefox插件）给出了答案：

打开Firebug
右键单击HTML选项卡中的元素
点击Log Events
使控制台选项卡
点击坚持在控制台选项卡中（否则在重新加载页面后，Console选项卡将清除）
select 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

来源

2010-09-24 13:32:02

非常感谢，我不知道那个Firebug功能。也许我需要一段时间实际RTFM。 – 2010-09-24 13:36:10

直到几分钟前我才知道它。我一直在写这个问题，并且一路上找到了答案。 :) – 2010-09-24 13:39:55

你的问题看起来很像我的（自我回应，有自我评论）。 – vol7ron 2011-09-05 02:17:28

106

只是觉得应该补充一点，你可以在Chrome做到这一点，以及：

按Ctrl +移+I（开发人员工具）> Sources>事件侦听器断点（在右侧）。

您还可以通过右键单击元素并浏览其属性（右侧面板）来查看已附加的所有事件。

例如：

右击给予好评按钮向左

选择检查元素

折叠样式段（最右侧部分 - 双V形）

展开事件监听器选项

现在你可以看到积极的事件

不知道它是否像萤火虫选项一样强大，但已经足够我的大部分东西。

另一种选择就是有点不同，但令人惊讶的是真棒视觉事件： http://www.sprymedia.co.uk/article/Visual+Event+2

它强调所有已绑定并具有popovers显示，被称为功能页面上的元素。相当漂亮的书签！还有一个Chrome插件，如果这是更多的东西 - 不知道其他浏览器。

AnonymousAndrew亦指出monitorEvents(window);here

来源

2011-09-05 02:02:01 Chris

我无法弄清楚如何使用您建议的任何一种方式查看哪些事件触发。 – 2012-02-18 22:43:43

更新：它不是开发工具（或检查器）内的'Scripts'，你必须进入Sources，然后看右边的菜单。 – aledalgrande 2014-05-01 00:30:22

@aledalgrande谢谢，已更新。（对于任何人阅读，这只适用于第一个解决方案，第二个仍然使用检查员）。 – Chris 2014-05-01 05:08:12

关于铬，检出通过命令行API的monitorEvents（）。

通过菜单>工具> JavaScript控制台打开控制台。
输入monitorEvents(window);

查看控制台的事件

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

里有documentation其他例子淹没。我猜这个功能是在上一个答案之后添加的。

来源

2013-11-05 16:18:08 AnonymousAndrew

不错！结合jQuery：'monitorEvents（$（'＃element'）。get（））' – Klaus 2016-02-18 14:44:38

如何找出哪些JavaScript事件触发？

回答

相关问题