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

我有一个选择名单:

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

当我选择 Closed时，页面重新加载。在这种情况下，它显示关闭的门票(而不是打开的)。当我手动操作时，它工作得很好。

问题是，当我选择 Closed和 瓦提尔时，页面不会重新加载:

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

这通常意味着某些 JavaScript 事件不会被触发:

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

但我需要知道开启哪个事件。

有没有一种方法可以找出为元素定义了哪些事件？

161741 次浏览
小开
最佳答案

看起来 纵火犯(Firefox 插件)有答案了:

  • 打开 Firebug
  • 右键单击 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
...

Source: Firebug Tip: Log Events

小开

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

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

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

例如:

  • 右键单击左侧的 upVote 按钮
  • 选择检查元素
  • 折叠样式部分(最右边的部分-双斜纹)
  • 展开事件侦听器选项
  • 现在您可以看到与向上投票绑定的事件

    • 不确定它是否和 Firebug 选项一样强大，但对我的大部分东西来说已经足够了。

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

    它突出显示页面上所有已绑定的元素，并且弹出窗口显示调用的函数。这个书签真漂亮！还有一个 Chrome 插件，如果你更喜欢的话——不确定其他浏览器。

    Anonymous ousAndrew 也在这里指出了 monitorEvents(window); < a href = “ https://stackoverflow.com/a/19793663/522859”>

    小开

    关于 Chrome，通过命令行 API 签出 monitor orEvents ()。

    • 通过 Menu > Tools > JavaScript Console 打开控制台。

    • 输入 monitorEvents(window);

    • 查看充满事件的控制台

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

    在 文件中还有其他的例子。我猜这个特性是在前一个答案之后添加的。

    小开

    你可以在你的 谷歌 Chrome 开发者控制台中使用 GetEventListener。

    GetEventListener (object)返回注册在 指定的对象。

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

    @ Himaas —— Firebug 已经被 Firefox 开发者版所取代。如果您继续并安装它，您可以通过打开开发工具(右键单击 > 检查)记录事件，然后选择 Debugger，然后在页面的底部，您应该看到“ Event Listener Breakpoints”，其中有一个未选中的名为“ Log”的复选框。勾选那个复选框。现在您所要做的就是选择您想要记录在“事件监听器断点”下的列表中的事件。从那里，您将看到记录到控制台的选定事件。

    下面的图片可以帮助说明: enter image description here


    提交答案