如何找出触发的JavaScript事件？

Question

我有一个选择列表:

<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"

但我需要知道要开火的事件.

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

Answer 1

我想我还想补充一点,你也可以在Chrome中做到这一点:

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

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

例如:

右键单击左侧的upvote按钮

选择检查元素

折叠样式部分(最右侧的部分 - 双V形)

展开事件侦听器选项

现在您可以看到绑定到upvote的事件

不确定它是否和firebug选项一样强大,但对于我的大多数东西来说已经足够了.

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

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

AnonymousAndrew也在这里指出monitorEvents(window);

Answer 2

看起来像Firebug(Firefox附加组件)有答案:

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

• 在Console选项卡中会有类似的内容:

  ...
  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提示:记录事件

Answer 3

关于Chrome,请通过命令行API检查monitorEvents().

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

• 查看充斥着事件的控制台

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

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