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

我有一个选择列表：

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

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

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

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

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

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

例如：

不知道它是否与firebug选项一样强大，但是对于我的大多数东西来说已经足够了。

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

它突出显示页面上已绑定的所有元素，并具有显示调用的功能的弹出窗口。书签很漂亮！还有一个Chrome插件，如果这更多的是您的事-不确定其他浏览器。

匿名安德鲁（Andrew）也曾在这里指出monitorEvents(window);

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

• 打开萤火虫
• 右键单击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提示：日志事件

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

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

• 查看充满事件的控制台

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

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

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

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

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