javascript - 如何找出触发了哪些 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(开发人员工具)> Sources> 事件监听器断点(右侧)。

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

例如:

右击左边的投票按钮

选择检查元素

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

展开事件监听器选项

现在您可以看到与投票绑定(bind)的事件

不确定它是否与 firebug 选项一样强大，但对我的大部分工作来说已经足够了。

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

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

AnonymousAndrew还指出了monitorEvents(window); here