如何查找哪些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"

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

有没有一种方法可以查找一个元素所定义的事件？

- Željko Filipin

---

这个问题列出了更多的工具：https://dev59.com/PHRB5IYBdhLWcg3wn4YL - Željko Filipin

Visual Event，http://www.sprymedia.co.uk/article/Visual+Event。我相信这将帮助到一半来到这个stackoverflow页面的人 :) - Cedric

Answer 1

我想补充一下，在Chrome浏览器中也可以做到这一点：

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

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

例如：

右键单击左侧的投票按钮

选择检查元素

折叠样式部分（最右边的部分 - 双箭头）

展开事件监听器选项

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

不确定它是否像Firebug选项那样强大，但对于我大多数的事情来说已经足够了。

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

它会突出显示页面上所有已绑定的元素，并显示调用的函数。非常方便的书签！如果您更喜欢Chrome插件，也有一个Chrome插件 - 不确定其他浏览器是否有该插件。

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

- Chris Owens

---

我无法弄清楚如何通过你提出的任一方式来查看哪些事件已触发。 - Željko Filipin

更新：在开发工具（或检查器）中不是Scripts，您必须进入Sources，然后查看右侧的菜单。 - aledalgrande

@aledalgrande 谢谢，已更新。（对于任何阅读此内容的人，这仅适用于第一个解决方案，第二个仍使用检查器）。 - Chris Owens

你为什么选择点赞按钮作为这个例子呢？有特别的原因吗？:P - George Dimitriadis

@GeorgeDimitriadis 哈哈，被抓住了 :P - Chris Owens

Answer 2

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

• 打开Firebug
• 在HTML选项卡中右键单击元素
• 单击“记录事件”
• 启用“控制台”选项卡
• 在“控制台”选项卡中单击“保留”（否则，在重新加载页面后，“控制台”选项卡将被清除）
• 手动选择“关闭”

• 在“控制台”选项卡中会出现类似以下内容：

  ...
  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提示：记录事件

- Željko Filipin

---

非常感谢，我之前不知道 Firebug 还有这个功能。也许我需要抽时间仔细阅读一下官方文档。 - Marcel Korpel

您的问题看起来非常像我的（自我回答，并带有自我评论）。 - vol7ron

Firebug的开发者最近发布了一篇博客文章：http://www.softwareishard.com/blog/firebug/firebug-tip-log-dom-events/ - jakub.g

你好，我尝试右键点击Firebug，但找不到日志事件选项，请问如何找到这个选项？ - Rajagopalan

你好，Firebug插件已经不再使用了。那么我该如何实现这个功能呢？请帮帮我。 - HimaaS

Answer 3

关于Chrome，可通过命令行API使用monitorEvents()函数。

• 通过菜单 > 工具 > JavaScript控制台打开控制台。

• 输入 monitorEvents(window);

• 查看控制台中的事件信息

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

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

- AnonymousAndrew

---

好的！结合 jQuery 使用：monitorEvents($('#element').get()) - Klaus

停止监控，请使用 unmonitorEvents(window)。 - Augustas

Answer 4

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

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

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

- JSON C11

Answer 5

@Himaas -- Firebug已被Firefox Developer Edition取代。如果您安装它，可以通过打开开发工具（右键单击>检查），然后选择调试器，在页面底部您应该会看到“事件侦听器断点”，其中有一个未选中的复选框称为“日志”。勾选该复选框。现在，您只需在“事件侦听器断点”下呈现的列表中选择要记录的事件即可。从那里，您将看到所选事件记录到控制台中。

这是一张图片以帮助说明：

- Zach Bellay