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

How to find out which JavaScript events fired?

提问by ?eljko Filipin

I have a select list:

我有一个选择列表：

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

When I select Closedthe page reloads. In this case it shows closed tickets (instead of opened). It works fine when I do it manually.

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

The problem is that the page does not reload when I select Closedwith Watir:

问题是，当我选择的页面不会重新加载Closed具有的Watir：

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

That usually means that some JavaScript event is not fired. I can fire events with Watir:

这通常意味着不会触发某些 JavaScript 事件。我可以用 Watir 触发事件：

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

but I need to know which event to fire.

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

Is there a way to find out which events are defined for an element?

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

采纳答案by ?eljko Filipin

Looks like Firebug(Firefox add-on) has the answer:

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

• open Firebug
• right click the element in HTML tab
• click Log Events
• enable Console tab
• click Persist in Console tab (otherwise Console tab will clear after the page is reloaded)
• select Closed(manually)

• there will be something like this in Console tab:

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

• 打开萤火虫
• 右键单击 HTML 选项卡中的元素
• 点击 Log Events
• 启用控制台选项卡
• 单击 Persist in Console 选项卡（否则重新加载页面后控制台选项卡将清除）
• 选择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
  ...
  

Source: Firebug Tip: Log Events

来源：Firebug 提示：记录事件

回答by Chris

Just thought I'd add that you can do this in Chrome as well:

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

Ctrl+ Shift+ I(Developer Tools) > Sources> Event Listener Breakpoints (on the right).

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

You can also view all events that have already been attached by simply right clicking on the element and then browsing its properties (the panel on the right).

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

For example:

例如：

Right click on the upvote button to the left

右键单击左侧的投票按钮

Select inspect element

选择检查元素

Collapse the styles section (section on the far right - double chevron)

折叠样式部分（最右侧的部分 - 双 V 形）

Expand the event listeners option

展开事件侦听器选项

Now you can see the events bound to the upvote

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

Not sure if it's quite as powerful as the firebug option, but has been enough for most of my stuff.

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

Another option that is a bit different but surprisingly awesome is Visual Event: http://www.sprymedia.co.uk/article/Visual+Event+2

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

It highlights all of the elements on a page that have been bound and has popovers showing the functions that are called. Pretty nifty for a bookmark! There's a Chrome plugin as well if that's more your thing - not sure about other browsers.

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

AnonymousAndrewhas also pointed out monitorEvents(window);here

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

回答by AnonymousAndrew

Regarding Chrome, checkout the monitorEvents() via the command line API.

关于 Chrome，请通过命令行 API 检查 monitorEvents()。

• Open the console via Menu > Tools > JavaScript Console.
• Enter monitorEvents(window);

• View the console flooded with events

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

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

• 查看充斥着事件的控制台

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

There are other examples in the documentation. I'm guessing this feature was added after the previous answer.

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

回答by JSON C11

You can use getEventListenersin your Google Chrome developer console.

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

getEventListeners(object) returns the event listeners registered on the specified object.

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

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