如何查看附加到html元素的事件
How can I see the event that is attached to an html element?
我是一名新程序员,仍在学习。这是我试图弄清楚的代码:
<div id="buy" class="buy button">Buy</div>
当我点击div(按钮)时,会执行一些JavaScript代码,但我不知道它是什么。我如何判断点击时触发了什么函数?一些侦听器是如何附加到此元素的。
在Google chrome的开发工具中(单击扳手图标>工具>开发工具),在元素选项卡中选择元素,在右侧打开"事件监听器"面板,您将看到所有事件
如果您使用Firefox和Firebug,您可以尝试安装FireQuery。它将使您能够查看由jQuery绑定的处理程序。http://firequery.binaryage.com/
"仅仅"使用ECMAscript本身并不能以一种非常好的方式完成它。例如,如果DOM Level 1以的形式添加了一个点击事件处理程序
document.getElementById('buy').onclick = function() {};
当然,您可以很容易地在节点本身上截取该属性。如果DOM Level 2分别使用.addEventListener()
和.attachEvent()
,情况会变得更加复杂。现在,您真的没有一个"位置"来查找所有不同侦听器的绑定位置。
使用jQuery会变得更好。jQuery将把它的所有事件处理程序函数保存在一个特殊的对象中,该对象链接到调用的DOM节点。您可以通过获取像这样的节点的.data()
-expando属性来检查这一点
$('#buy').data('events');
然而,现在我已经描述了将事件侦听器绑定到节点的三种不同方式(实际上是两种,因为像jQuery这样的库当然也使用DOM Level 1或2方法)。
如果一个事件是由代表团触发的,那真的会变得很难看。这意味着,我们将我们的点击事件绑定在某个父节点上,只是等待该事件出现,这样我们就可以检查target
。所以现在我们甚至没有node
和event listener
之间的直接关系。
结论是,注意浏览器插件或类似VisualEvent的东西。
您可以将"Visual Event 2"脚本用作书签或与Chrome扩展相同的脚本。
此脚本显示所有附加到dom元素的js事件。
使用jQuery("#buy").data('events');
http://api.jquery.com/jQuery.data/可能很有趣。
使用传统element.onclick=
处理程序或HTML <element onclick="handler">
附加的事件处理程序可以从脚本或调试器的element.onclick
属性中轻松检索。
使用DOM Level 2 Events addEventListener方法和IE的attachEvent附加的事件处理程序当前根本无法从脚本中检索。DOM Level 3曾经提出element.eventListenerList来获取所有侦听器,但尚不清楚这是否会达到最终规范。目前在任何浏览器中都没有实现。
如果您使用的是FireFox,您应该安装FireBug。一旦有了它,您就可以安装FireQuery,它将向您显示哪些jQuery事件绑定到哪些对象。
http://getfirebug.com/
http://firequery.binaryage.com/
这是我发现的最简单的方法:http://www.sprymedia.co.uk/article/Visual+事件
在Javascript中处理事件时,通常很容易失去跟踪在哪里订阅了哪些活动。如果你正在使用大量事件,这在现代界面采用渐进增强。Javascript库从技术角度为监听器增加了另一个复杂度从开发人员的角度来看,他们当然可以生活轻松多了!但当事情出错时,可能很难追踪原因。
正因为如此,我制作了一个名为可视化事件,它直观地显示页面上具有订阅的事件,这些事件是什么以及事件将在触发时运行。这主要是为了有助于调试,但它也可能非常有趣和信息丰富查看其他页面上的订阅事件。
那里有一个书签按钮,你可以拖动到工具栏(FF或Chrome),然后只需点击任何页面上你想看到附加事件的按钮。效果很好!(至少对于jQuery或其他库附加的事件)。
您在使用jQuery吗?如果是这样,您需要搜索以下三行代码中的一行:
$("#buy").click //the div is refered by its id
或
$(".buy").click //the div is refered to by the style "buy"
或
$(".button").click //refered to by the style "button"
大多数较新的浏览器都通过按下F12内置了"开发工具"(至少在IE和Chrome中是这样)。这可能有助于您进行进一步的调试和跟踪。
下面是我过去使用过的东西,我认为这可能是您想要的。这样做的目的是观察页面元素上的一个属性(在下面的示例中,它是文档的"Title"属性),然后在该属性更改时使用JS调用堆栈显示警报。在尝试查找任何代码之前,您都需要将其输入DOM,但希望您能够确定问题的原因。
我建议使用Firefox并使用Firebug进行JavaScript调试。
// Call stack code
function showCallStack() {
var f=showCallStack,result="Call stack:'n";
while((f=f.caller)!==null) {
var sFunctionName = f.toString().match(/^function ('w+)'(/)
sFunctionName = (sFunctionName) ? sFunctionName[1] : 'anonymous function';
result += sFunctionName;
result += getArguments(f.toString(), f.arguments);
result += "'n";
}
alert(result);
}
function getArguments(sFunction, a) {
var i = sFunction.indexOf(' ');
var ii = sFunction.indexOf('(');
var iii = sFunction.indexOf(')');
var aArgs = sFunction.substr(ii+1, iii-ii-1).split(',')
var sArgs = '';
for(var i=0; i<a.length; i++) {
var q = ('string' == typeof a[i]) ? '"' : '';
sArgs+=((i>0) ? ', ' : '')+(typeof a[i])+' '+aArgs[i]+':'+q+a[i]+q+'';
}
return '('+sArgs+')';
}
var watchTitle = function(id, oldval, newval) { showCallStack(); }
// !! This is all you should need to update, setting it to whatever you want to watch.
document.watch("title", watchTitle);
- 右键单击页面,然后选择查看页面的源代码
- 查找
<script>
标签 - 查找
$("#buy")
和提及onClick
或.on("click",function(){...});
的内容 - 如果你找不到,可以沿着以下行搜索:
document.getElementById("buy")
- 您已经找到事件处理程序代码所在的
function
或代码
$("#buy")
是JQuery的说法,即查找具有buy
的id
属性的元素,如果它后面有一个.
和一些函数,则该函数作用于JQuery找到的元素。
- 元素事件处理程序到EXT.js面板中
- 浏览器中的javascript和td元素事件属性
- 主干清理元素事件
- 影响类的所有成员而不是一个元素事件的插件正在发生
- AngularJS - ngRepeat.在 ng 重复重新渲染后,需要将焦点集中在相同的元素事件上
- 在jQuery中,如何触发mootools中添加的元素事件
- 允许 Raphael/SVG 元素事件通过顶部分层的 HTML 触发
- CanJS未来元素事件绑定
- 重新选择所选选项时,Javascript/jQuery选择元素事件
- 类变量在元素事件中不可见
- 修改元素'事件函数的参数
- 如何过滤掉事件处理程序中的子元素事件
- 要求Javascript关注多个元素事件的模式
- 允许先触发其他绑定元素事件
- Firefox扩展不能覆盖元素事件
- 如何获取"mouseup"之后的元素事件完成
- 用于文档防止元素事件的Onclick事件
- 如何获取触发“onclick”的元素事件
- 向由子元素事件触发的表单元格添加类/从中删除类
- JavaScript在元素加载后立即绑定元素事件