我怎样才能看到附加到HTML元素的事件？
你好，我是一个新的程序员，仍然在学习。 这是我试图找出的代码：
<div id="buy" class="buy button">Buy</div> 当我点击div（button），一些JavaScript代码被执行，但我不知道它是。 如何知道点击发生时会触发哪些function？ 一些监听器如何附加到这个元素
如果您使用Firefox和Firebug，则可以尝试安装FireQuery。 这将使得你可以看到由jQuery绑定的处理程序。 http://firequery.binaryage.com/
在Google chrome的开发者工具中（点击扳手图标>工具>开发者工具），在元素标签中select元素，在右侧打开“事件监听器”面板，您将看到所有事件
你不能通过“仅仅”使用ECMAscript本身来以非常好的方式来实现。 例如，如果DOM窗体1中添加了点击事件处理程序，
document.getElementById('buy').onclick = function() {};
你当然可以很容易地拦截节点本身的属性。 如果DOM Level 2与.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');
使用传统的element.onclick= handler或HTML <element onclick="handler">附加的事件处理<element onclick="handler">可以从脚本或in-debugger的element.onclick属性中检索得到。
事件处理程序附加使用DOM级别2事件addEventListener方法和IE的attachEvent目前不能从脚本检索。 DOM Level 3曾经提出过element.eventListenerList来获取所有的监听器，但不清楚这是否会使其达到最终规范。 今天在任何浏览器中都没有实现。
如果你使用的是FireFox，你应该安装FireBug。 一旦你有了，你可以安装FireQuery，它会告诉你什么jQuery事件绑定到哪些对象。
这是我find的最简单的方法： http : //www.sprymedia.co.uk/article/Visual+Event
当在Javascript中使用事件时，通常很容易忘记在哪里订阅哪些事件。 如果您正在使用大量的事件，尤其是在采用渐进式增强的现代界面中，这一点尤为突出。 从技术的angular度来看，Javascript库也给听众带来了另一个复杂的程度，而从开发者的angular度来看，他们当然可以让生活变得更轻松！ 但是当事情出错时，可能很难找出原因。
正因为如此，我把一个名为Visual Event的Javascript小书签放在一起，这个小书签以可视方式显示页面上的元素，这些元素具有订阅的事件，这些事件是什么以及事件在触发时运行的function。 这主要是为了帮助debugging，但是在其他页面上看到订阅的事件也是非常有趣和有用的。
有一个书签button，您可以拖动到您的工具栏（FF或Chrome），然后只需点击任何页面上您想查看附加事件的button。 太棒了！ （至less对于jQuery或其他库附加的事件）。
以下是我以前用过的东西，我想可能是你要找的东西。 这样做是看一个页面元素（在下面的例子中，它是文档的“标题”属性）属性，然后显示一个警报与JS调用堆栈，每当该属性更改。 您需要先将这个代码放到DOM中，然后再尝试find任何代码，但是希望您能够找出造成问题的原因。
我会build议使用Firefox和Firebug进行JavaScriptdebugging。
// 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);
- 右键单击页面，然后select查看页面的源代码
- find
<script>标签 - 寻找
$("#buy")并提及onClick或.on("click",function(){...}); - 如果找不到，请按照以下方式search：
document.getElementById("buy") - 您已经find事件处理程序代码所在的
function或代码
$("#buy")是JQuery的说法，find一个id属性为buy的元素，如果它有一个. 跟着它的一些函数，该函数正在作用于JQueryfind的元素。
你使用jQuery吗？ 如果是这样，你想要search这三行代码之一：
$("#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 （至less在IE和Chrome中）内置了“开发工具”。 这可能会帮助您进一步debugging和跟踪。
