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

Question

你好，我是一个新的程序员，仍然在学习。 这是我试图找出代码：

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

当我点击股利（按钮），执行一些JavaScript代码，但我不知道是它。如何知道点击发生时触发了哪些功能？一个侦听器的一些如何连接到这个元素

Answer 1

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

Answer 2

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

http://api.jquery.com/jQuery.data/可能是有趣。

Answer 3

你使用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中）。这可能有助于您进一步调试和跟踪。

Answer 4

使用传统的element.onclick=处理函数或HTML <element onclick="handler">附加的事件处理函数可以从脚本或调试器中的element.onclick属性中检索得到。

使用DOM Level 2 Events附加的事件处理程序addEventListener方法和IE的attachEvent目前无法从脚本中检索。 DOM Level 3曾经提出element.eventListenerList来获取所有侦听器，但是目前还不清楚这是否会使其达到最终规范。今天在任何浏览器中都没有实现。

Answer 5

你不能通过使用ECMAscript本身的“正义”来以非常好的方式做到这一点。举例来说，如果有通过DOM 1级在

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

形式添加click事件处理程序，你当然也可以很容易地拦截节点本身上该属性。事情变得越来越复杂，如果DOM级别2分别与.addEventListener().attachEvent()发挥作用。现在你并没有真正的“地方”来寻找所有绑定的不同监听器函数的位置。

它通过使用jQuery变得更好。 jQuery将把它的所有事件处理函数放在一个特殊的对象中，该对象链接到调用的DOM节点。您可以通过获取.data() -expando属性像

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

但是一个节点检查的是，现在我已经描述的事件监听器绑定到一个节点（实际上它的两个，因为像jQuery库还采用了三种不同的方式当然DOM级别1或2的方法）。

如果某个事件是由委派触发的，那真的很难看。这意味着，我们将点击事件绑定到某个父节点上，等待该事件冒泡给我们，以便我们检查target。所以现在我们甚至没有node和event listener之间的直接关系。

这里的结论是，了解一个浏览器插件或可能是像VisualEvent这样的东西。

Answer 6

如果你使用的是FireFox，你应该安装FireBug。一旦你有了，你可以安装FireQuery，它会告诉你哪些jQuery事件绑定了哪些对象。

http://getfirebug.com/

http://firequery.binaryage.com/

Answer 7

1. 右键单击页面，并选择查看页面的源
2. 查找<script>标签
3. 查找$("#buy")和东西提onClick或.on("click",function(){...});
4. 如果你找不到它，沿着t寻找东西HESE线：document.getElementById("buy")
5. 你已经找到了function，或代码，在事件处理程序代码是

$("#buy")是说发现有buy的id属性的元素的JQuery的方式，如果它有一个.跟着它的一些函数，该函数正在处理由JQuery找到的元素。

Answer 8

以下是我以前使用过的东西，我想可能是您要找的东西。它所做的是在页面元素上观察属性（在下面的示例中，它是文档的“Title”属性），然后在JS属性发生更改时使用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); 

Answer 9

这是我发现的是如何做到这一点的最简单的方法： http://www.sprymedia.co.uk/article/Visual+Event

当与JavaScript事件的工作，往往容易失去跟踪 什么事件被认购哪里。如果您使用大量事件，这在使用逐步增强的现代 接口中很常见，这一点尤其如此。 Javascript库也 从技术点 为听众增加了另一种程度的复杂性，而从开发人员的角度来看，他们当然可以让 生活变得更容易！但是当事情出错时，可能很难追查为什么会这样。

也正是由于这一点，我已经把一个Javascript书签称为 视觉事件，这在视觉上表明 事件将运行已经订阅了他们 事件，什么这些事件都是在页面上的元素和功能当被触发时。这主要是为了帮助调试 ，但它也可以是非常有趣且信息丰富的 以查看其他页面上的订阅事件。

有一个书签按钮，您可以拖动到您的工具栏（FF或Chrome），然后只需点击任何页面上您想查看附加事件的按钮。很棒！ （至少对于jQuery或其他库附加的事件）。

Answer 10

在谷歌Chrome浏览器的开发者工具（点击扳手图标>工具>开发人员工具），选择元素标签的元素，在右侧打开“事件监听器”面板中，你会看到所有的事件

Answer 11

您可以使用“Visual Event 2”脚本作为书签或与Chrome extension相同的脚本。

这个脚本显示了连接到DOM元素所有的JS事件。