javascript 如何查看附加到 html 元素的事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11832706/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I see the event that is attached to an html element?
提问by Vaso A.
Hello I am a new programmer and still learning. This is the code that I am trying to figure out:
您好，我是一名新程序员，仍在学习中。这是我想弄清楚的代码：
<div id="buy" class="buy button">Buy</div>
When I click on the div (button), some javascript code is executed but I don't know were it is. How can I tell what function is fired when click happens? Some how a listener is attached to this element
当我单击 div（按钮）时，会执行一些 javascript 代码，但我不知道是不是这样。我怎么知道点击发生时触发了什么功能？一些侦听器如何附加到这个元素
采纳答案by Aknosis
If you use Firefox and Firebug you can try installing FireQuery. It will make it so you can seethe handlers bound by jQuery. http://firequery.binaryage.com/
如果您使用 Firefox 和 Firebug，您可以尝试安装 FireQuery。它将使您可以看到由 jQuery 绑定的处理程序。http://firequery.binaryage.com/
回答by yoelp
In Google chrome's developer tools (click the wrench icon >Tools>Developer tools), select the element in the Elements tab, on the right open the 'Event Listeners' panel you'll will see all events
在谷歌浏览器的开发者工具中（点击扳手图标>工具>开发者工具），在元素选项卡中选择元素，在右侧打开“事件监听器”面板，您将看到所有事件
回答by jAndy
You can't do it in a really good manner by "just" using ECMAscript itself. For instance, if there was a click event handler added by DOM Level 1in the form of
你不能通过“仅仅”使用 ECMAscript 本身来以一种非常好的方式做到这一点。例如，如果DOM Level 1添加了一个 click 事件处理程序，其形式为
document.getElementById('buy').onclick = function() {};
you can of course easily intercept that property on the node itself. Things are getting more complicated if DOM Level 2comes into play with .addEventListener()respectevily .attachEvent(). Now you don't really have a "place" to look for where all the different listener functions where bound from.
您当然可以轻松拦截节点本身的该属性。事情越来越多，如果复杂的DOM 2级进场.addEventListener()respectevily .attachEvent()。现在你真的没有一个“地方”来寻找所有不同的侦听器函数从哪里绑定。
It gets better by using jQuery. jQuery will hold all it's event handler functions in a special object which is linked to the DOM node of invocation. You can check for that by getting the .data()-expando property for a node like
使用 jQuery 会变得更好。jQuery 将所有它的事件处理函数保存在一个特殊的对象中，该对象链接到调用的 DOM 节点。您可以通过获取.data()节点的-expando 属性来检查，例如
$('#buy').data('events');
However, now I already described three different ways of binding event listeners to a node (actually its two because a library like jQuery also uses DOM Level 1 or 2 methods of course).
但是，现在我已经描述了将事件侦听器绑定到节点的三种不同方式（实际上是两种方式，因为像 jQuery 这样的库当然也使用 DOM Level 1 或 2 方法）。
It's really getting ugly if an event is triggerd by delegation. That means, we bound our click event on some parent-node just waiting for that event bubbling up to us so we can check the target. So now we don't even have a direct relationship between the nodeand the event listener.
如果一个事件是由委托触发的，那真的很难看。这意味着，我们将我们的点击事件绑定在某个父节点上，只是等待该事件冒泡给我们，以便我们可以检查target. 所以现在我们甚至没有node和之间的直接关系event listener。
Conclusion here is, lookout of a browser plugin or probably a thing like VisualEvent.
这里的结论是，注意浏览器插件或可能像VisualEvent 之类的东西。
回答by webvitaly
You may use "Visual Event 2" script as a bookmark or same script as Chrome extension.
您可以使用“ Visual Event 2”脚本作为书签或与Chrome 扩展程序相同的脚本。
This script shows all js events attached to dom-elements.
此脚本显示附加到 dom-elements 的所有 js 事件。
回答by Lunik
Use jQuery("#buy").data('events');
利用 jQuery("#buy").data('events');
http://api.jquery.com/jQuery.data/may be interesting.
回答by Shreedhar
Event handlers attached using traditional element.onclick=handler or HTML <element onclick="handler">can be retrieved trivially from the element.onclickproperty from script or in-debugger.
使用传统element.onclick=处理程序或 HTML附加的事件处理程序<element onclick="handler">可以element.onclick从脚本或调试器中的属性中轻松检索。
Event handlers attached using DOM Level 2 Events addEventListener methods and IE's attachEvent cannot currently be retrieved from script at all. DOM Level 3 once proposed element.eventListenerList to get all listeners, but it is unclear whether this will make it to the final specification. There is no implementation in any browser today.
使用 DOM Level 2 Events addEventListener 方法和 IE 的 attachEvent 附加的事件处理程序目前根本无法从脚本中检索。DOM Level 3 曾经提出 element.eventListenerList 来获取所有的监听器，但目前还不清楚这是否会成为最终规范。目前在任何浏览器中都没有实现。
回答by Adrian J. Moreno
If you're using FireFox, you should have FireBug installed. Once you have that, you can install FireQuery, which will show you what jQuery events are bound to which objects.
如果您使用的是 FireFox，则应该安装 FireBug。一旦你有了它，你就可以安装 FireQuery，它会显示哪些 jQuery 事件绑定到哪些对象。
回答by Trey Combs
Below is something I've used in the past that I think may be what you're looking for. What this does is watch a property on a page element (In the example below, it's the document's "Title" property) and then display an alert with the JS callstack whenever that property is changed. You'll need to get this into the DOM before whatever code you're trying to find fires, but hopefully you'll be able to identify what's causing the problem.
下面是我过去使用过的东西，我认为可能是您正在寻找的东西。它的作用是观察页面元素上的属性（在下面的示例中，它是文档的“标题”属性），然后在该属性发生更改时通过 JS 调用堆栈显示警报。您需要在尝试查找火灾的任何代码之前将其放入 DOM，但希望您能够确定导致问题的原因。
I would recommend using Firefox and getting Firebug for JavaScript debugging.
我建议使用 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);
回答by mikel
This is the easiest way I've found of how to do it: http://www.sprymedia.co.uk/article/Visual+Event
这是我找到的最简单的方法：http: //www.sprymedia.co.uk/article/Visual+Event
When working with events in Javascript, it is often easy to lose track of what events are subscribed where. This is particularly true if you are using a large number of events, which is typical in a modern interface employing progressive enhancement. Javascript libraries also add another degree of complexity to listeners from a technical point of view, while from a developers point of view they of course can make life much easier! But when things go wrong it can be difficult to trace down why this might be.
It is due to this I've put together a Javascript bookmarklet called Visual Event which visually shows the elements on a page that have events subscribed to them, what those events are and the function that the event would run when triggered. This is primarily intended to assist debugging, but it can also be very interesting and informative to see the subscribed events on other pages.
在 Javascript 中处理事件时，通常很容易忘记哪些事件是在哪里订阅的。如果您使用大量事件，则尤其如此，这在采用渐进增强的现代界面中很常见。从技术角度来看，Javascript 库还为侦听器增加了一定程度的复杂性，而从开发人员的角度来看，它们当然可以让生活变得更轻松！但是，当出现问题时，很难追查到底是什么原因。
因此，我将一个名为 Visual Event 的 Javascript 书签放在一起，它直观地显示了页面上订阅了事件的元素、这些事件是什么以及事件在触发时将运行的函数。这主要是为了帮助调试，但在其他页面上查看订阅的事件也可能非常有趣和有用。
There's a bookmark button there you can drag to your toolbar (FF or Chrome), then just click the button on any page where you want to see the events attached. Works great! (at least for events attached by jQuery or other libraries).
那里有一个书签按钮，您可以将其拖到工具栏（FF 或 Chrome）上，然后只需在要查看附加事件的任何页面上单击该按钮即可。效果很好！（至少对于 jQuery 或其他库附加的事件）。
回答by Losbear
Are you using jQuery? If so, you want to search for one of these three lines of code:
你在使用 jQuery 吗？如果是这样，您要搜索以下三行代码之一：
$("#buy").click //the div is refered by its id
or
或者
$(".buy").click //the div is refered to by the style "buy"
or
或者
$(".button").click //refered to by the style "button"
Most newer browsers have "Developer Tools" built into them by pressing F12(at least in IE and Chrome). That may help you do some further debugging and tracing.
大多数较新的浏览器都通过按下内置了“开发人员工具” F12（至少在 IE 和 Chrome 中）。这可能会帮助您进行一些进一步的调试和跟踪。
