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

我有一个select列表： 

<select id="filter"> <option value="Open" selected="selected">Open</option> <option value="Closed">Closed</option> </select>

当我selectClosed页面重新加载。 在这种情况下，它显示封闭的票（而不是打开）。 当我手动执行它工作正常。

问题是，当我selectClosed Watir时，页面不会重新加载： 

 browser.select_list(:id => "filter").select "Closed"

这通常意味着一些JavaScript事件不会被解雇。 我可以用Watir发射事件： 

 browser.select_list(:id => "filter").fire_event "onclick"

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

有没有办法找出哪些事件是为一个元素定义的？

看起来像Firebug （火狐插件）有答案：

  • 打开Firebug
  • 右键单击HTML选项卡中的元素
  • 单击Log Events
  • 启用控制台选项卡
  • 点击Persist in Console选项卡（否则Console页面重新加载后将清除Console标签页）
  • selectClosed （手动）

  • 在“控制台”选项卡中会出现这样的内容： 

     ... 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中做到这一点：

Ctrl + Shift + I （开发人员工具）> Sources> Event Listener Breakpoints（在右侧）。

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

例如：

  • 右键单击左侧的向上button
  • select检查元素
  • 折叠样式部分（最右边的部分 – 双人字形）
  • 展开事件侦听器选项
  • 现在你可以看到积极的事件

    • 不知道它是否像萤火虫选项一样强大，但已经足够我的大部分东西。

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

    它突出显示了页面上所有已绑定的元素，并popup了显示被调用的函数的元素。 相当漂亮的书签！ 还有一个Chrome插件，如果这是更多的东西 – 不知道其他浏览器。

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

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

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

    • 查看充满事件的控制台 

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

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

    Interesting Posts