如何查看附加到html元素的事件？

Question

你好,我是一名新的程序员,还在学习.这是我想要弄清楚的代码:

<div id="buy" class="buy button">Buy</div>

当我点击div(按钮)时,会执行一些javascript代码,但我不知道是不是.如何在点击发生时判断触发了什么功能？一些监听器如何附加到此元素

Answer 1

在Google Chrome的开发者工具中(单击扳手图标>工具>开发人员工具),在元素选项卡中选择元素,在右侧打开"事件监听器"面板,您将看到所有事件

Answer 2

如果您使用Firefox和Firebug,您可以尝试安装FireQuery.它将使您可以看到 jQuery绑定的处理程序.http://firequery.binaryage.com/

Answer 3

你不能通过"仅仅"使用ECMAscript本身以非常好的方式做到这一点.例如,如果DOM Level 1以形式添加了click事件处理程序

document.getElementById('buy').onclick = function() {};

你当然可以轻松拦截节点本身的属性.如果DOM Level 2与.addEventListener()respectevily 发挥作用,事情会变得更加复杂.attachEvent().现在你没有真正的"地方"来寻找所有不同的监听器功能所在的位置.

使用jQuery会变得更好.jQuery将把它所有的事件处理函数保存在一个特殊的对象中,该对象链接到调用的DOM节点.您可以通过获取.data()类似节点的-expando属性来检查

$('#buy').data('events');

但是,现在我已经描述了将事件监听器绑定到节点的三种不同方式(实际上它是两个,因为像jQuery这样的库当然也使用DOM Level 1或2方法).

如果某个事件是由代表团触发的,那真的很难看.这意味着,我们将click事件绑定在某个父节点上,只是等待该事件冒泡到我们这样我们可以检查target.所以,现在我们甚至不具备有直接的关系node和event listener.

这里的结论是,了解一个浏览器插件或者像VisualEvent这样的东西.

Answer 4

您可以使用" Visual Event 2 "脚本作为书签或与Chrome扩展程序相同的脚本.

此脚本显示附加到dom-elements的所有js事件.

Answer 5

使用 jQuery("#buy").data('events');