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

我有一个选择列表:

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

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

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


答案 1

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

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

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

例如:

  • 右键单击左侧的赞成票按钮
  • 选择检查元素
  • 折叠样式部分(最右侧的部分 - 双 V 形)
  • 展开事件侦听器选项
  • 现在,您可以看到绑定到赞成票的事件
  • 不确定它是否像firebug选项一样强大,但对于我的大多数东西来说已经足够了。

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

    它突出显示页面上已绑定的所有元素,并具有显示所调用函数的弹出框。书签非常漂亮!还有一个Chrome插件,如果这更适合您 - 不确定其他浏览器。

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


    答案 2

    看起来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
      ...
      

    来源: 火虫提示: 日志事件