如何找出触发了哪些 JavaScript 事件？
我有一个选择列表：
<select id="filter">
<option value="Open" selected="selected">Open</option>
<option value="Closed">Closed</option>
</select>
当我选择关闭时，页面会重新加载。在这种情况下，它显示已关闭的票证（而不是打开的票证）。当我手动执行时效果很好。
问题是，当我使用 Watir 选择 Closed 时，页面不会重新加载：
browser.select_list(:id => "filter").select "Closed"
这通常意味着某些 JavaScript 事件未触发。我可以使用 Watir 触发事件：
browser.select_list(:id => "filter").fire_event "onclick"
但我需要知道要触发哪个事件。
有没有办法找出为元素定义了哪些事件？
I have a select list:
<select id="filter">
<option value="Open" selected="selected">Open</option>
<option value="Closed">Closed</option>
</select>
When I select Closed the page reloads. In this case it shows closed tickets (instead of opened). It works fine when I do it manually.
The problem is that the page does not reload when I select Closed with Watir:
browser.select_list(:id => "filter").select "Closed"
That usually means that some JavaScript event is not fired. I can fire events with 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?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我想补充一下，您也可以在 Chrome 中执行此操作：
Ctrl + Shift + I （开发人员工具）>来源>事件侦听器断点（右侧）。
您还可以通过右键单击该元素然后浏览其属性（右侧面板）来查看已附加的所有事件。
例如：
不确定它是否与firebug 选项，但对于我的大部分东西来说已经足够了。
另一个有点不同但令人惊讶的很棒的选项是视觉事件：
http://www.sprymedia.co.uk/article/Visual+Event+2
它突出显示页面上已绑定的所有元素，并具有显示所调用函数的弹出窗口。非常漂亮的书签！如果您更喜欢的话，还有一个 Chrome 插件 - 不确定其他浏览器是否如此。
AnonymousAndrew 还指出
monitorEvents(window);Just thought I'd add that you can do this in Chrome as well:
Ctrl + Shift + I (Developer Tools) > Sources> Event Listener Breakpoints (on the right).
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:
Not sure if it's quite as powerful as the firebug option, but has been enough for most of my stuff.
Another option that is a bit different but surprisingly awesome is 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.
AnonymousAndrew has also pointed out
monitorEvents(window);here看起来 Firebug （Firefox 插件）有答案：
日志事件关闭（手动）控制台选项卡中将出现类似的内容：
<前><代码>...
鼠标移动客户端X = 1097，客户端Y = 292
弹出显示
鼠标按下 clientX=1097, clientY=292
重点
mouseup clientX=1097, clientY=292
单击客户端X = 1097，客户端Y = 292
鼠标移动客户端X = 1096，客户端Y = 293
...
来源：Firebug 提示：日志事件< /a>
Looks like Firebug (Firefox add-on) has the answer:
Log EventsClosed(manually)there will be something like this in Console tab:
Source: Firebug Tip: Log Events
对于 Chrome，请通过命令行 API 查看 monitorEvents()。
通过菜单>打开控制台工具> JavaScript 控制台。
输入
monitorEvents(window);查看充斥着事件的控制台
<前><代码> ...
mousemove MouseEvent {dataTransfer: ...}
mouseout MouseEvent {dataTransfer: ...}
鼠标悬停 MouseEvent {dataTransfer: ...}
更改事件 {clipboardData: ...}
...
文档。我猜这个功能是在上一个答案之后添加的。
Regarding Chrome, checkout the monitorEvents() via the command line API.
Open the console via Menu > Tools > JavaScript Console.
Enter
monitorEvents(window);View the console flooded with events
There are other examples in the documentation. I'm guessing this feature was added after the previous answer.
您可以在 Google 中使用 getEventListeners Chrome 开发者控制台。
You can use getEventListeners in your Google Chrome developer console.
@Himaas——Firebug 已被 Firefox 开发者版取代。如果您继续安装它，您可以通过打开开发工具（右键单击>检查）来记录事件，然后选择调试器，然后在页面底部您应该看到“事件侦听器断点”，其中有一个名为“Event Listener Breakpoints”的未选中复选框“日志”。选中该复选框。现在您所要做的就是在“事件侦听器断点”下显示的列表中选择要记录的事件。从那里您将看到记录到控制台的选定事件。
这是一张有助于说明的图片：
@Himaas -- Firebug has been replaced in favor of Firefox Developer Edition. If you go ahead and install it, you can log events by opening the dev tools (Right Click > Inspect), then select Debugger, and then toward the bottom of the page you should see "Event Listener Breakpoints" with an unchecked checkbox called "Log". Check that checkbox. Now all you have to do is select the events you want logged in the list presented under "Event Listener Breakpoints". From there you will see the selected events logged to the console.
Here is an image to help illustrate:
