如何找出触发的JavaScript事件？

Question

我有一个选择列表：

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

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

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

Answer 1

我想补充一点，您也可以在Chrome中执行此操作：

Ctrl + Shift + I （开发人员工具）＆gt;来源＆GT;事件监听器断点（右侧）。

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

例如：

右键单击左侧的upvote按钮

选择检查元素

折叠样式部分（最右边的部分 - 双V形）

展开事件侦听器选项

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

不确定它是否与firebug选项一样强大，但对我的大多数东西都足够了。

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

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

AnonymousAndrew也指出了monitorEvents(window); here

Answer 2

看起来Firebug（Firefox附加组件）有答案：

• 打开Firebug
• 右键单击HTML标签中的元素
• 点击Log Events
• 启用“控制台”标签
• 单击“在控制台”选项卡中保留（否则，在重新加载页面后，“控制台”选项卡将清除）
• 选择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

Answer 3

关于Chrome，请通过命令行API检查monitorEvents（）。

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

• 查看充满事件的控制台

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

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

Answer 4

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

  

getEventListeners（object）返回在以下位置注册的事件侦听器   指定的对象。

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