blocks|key|288330|text|在Google+chrome的开发者工具(点击扳手图标>Tools>Developer+tools)中，在Elements选项卡中选择元素，在右侧打开'Event+Listeners‘面板，您将看到所有事件|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288331|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

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

blocks|key|288372|text|您可以使用"Visual+Event+2“脚本作为书签，也可以使用与Chrome+extension相同的脚本。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|288373|这个脚本显示了所有附加到dom-element的js事件。|288374|entityMap|0|LINK|mutability|MUTABLE|url|http://www.sprymedia.co.uk/article/Visual%2BEvent%2B2|1|https://chrome.google.com/webstore/detail/pbmmieigblcbldgdokdjpioljjninaim^0|6|E|0|Y|G|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

You may use "<a href="http://www.sprymedia.co.uk/article/Visual+Event+2" rel="noreferrer">Visual Event 2</a>" script as a bookmark or same script as <a href="https://chrome.google.com/webstore/detail/pbmmieigblcbldgdokdjpioljjninaim" rel="noreferrer">Chrome extension</a>.

This script shows all js events attached to dom-elements.

blocks|key|504773|text|使用jQuery("#buy").data('events');|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|504774|http://api.jquery.com/jQuery.data/可能会很有趣。|504775|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/jQuery.data/^0|2|U|0|0|Y|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@]|D|@$9|T|A|U|1|V]]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

Use <code>jQuery("#buy").data('events');</code>

<a href="http://api.jquery.com/jQuery.data/">http://api.jquery.com/jQuery.data/</a> may be interesting.

blocks|key|288119|text|使用传统的element.onclick=处理程序或HTML+<element+onclick="handler">附加的事件处理程序可以通过脚本或调试器中的element.onclick属性轻松检索。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|288120|使用DOM+Level+2+Events、addEventListener方法和IE的attachEvent附加的事件处理程序目前根本不能从脚本中检索。DOM+Level+3曾提议使用element.eventListenerList来获取所有侦听器，但目前还不清楚这是否会成为最终的规范。目前在任何浏览器中都没有实现。|288121|entityMap^0|5|G|V|R|27|F|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

Event handlers attached using traditional <code>element.onclick=</code> handler or HTML <code>&lt;element onclick="handler"&gt;</code> can be retrieved trivially from the <code>element.onclick</code> property from script or in-debugger.

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.

blocks|key|288165|text|如果你使用的是FireFox，你应该安装FireBug。完成后，您可以安装FireQuery，它将向您显示哪些jQuery事件绑定到哪些对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|288166|http://getfirebug.com/|offset|length|288167|http://firequery.binaryage.com/|288168|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|M|0|0|0|V|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@$D|R|E|S|1|T]]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|H|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]|O|$5|K|L|M|A|$N|G]]]]

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.

<a href="http://getfirebug.com/" rel="nofollow">http://getfirebug.com/</a>

<a href="http://firequery.binaryage.com/" rel="nofollow">http://firequery.binaryage.com/</a>

blocks|key|504960|text|下面是我过去用过的东西，我想这可能就是你要找的东西。这样做的目的是监视页面元素上的属性(在下面的示例中，它是文档的"Title“属性)，然后在该属性发生更改时使用JS调用堆栈显示一个警报。您需要在尝试查找fires的任何代码之前将其放入DOM中，但希望您能够找出导致问题的原因。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|504961|我推荐使用火狐和获取火虫来进行JavaScript调试。|504962|//+Call+stack+code
function+showCallStack()+{
+++var+f=showCallStack,result="Call+stack:\n";

+++while((f=f.caller)!==null)+{
++++++var+sFunctionName+=+f.toString().match(/%5Efunction+(\w%2B)\(/)
++++++sFunctionName+=+(sFunctionName)+?+sFunctionName[1]+:+'anonymous+function';
++++++result+%2B=+sFunctionName;
++++++result+%2B=+getArguments(f.toString(),+f.arguments);
++++++result+%2B=+"\n";
+++}
+++alert(result);
}


function+getArguments(sFunction,+a)+{
+++var+i+=+sFunction.indexOf('+');
+++var+ii+=+sFunction.indexOf('(');
+++var+iii+=+sFunction.indexOf(')');
+++var+aArgs+=+sFunction.substr(ii%2B1,+iii-ii-1).split(',')
+++var+sArgs+=+'';+
+++for(var+i=0;+i<a.length;+i%2B%2B)+{
++++++var+q+=+('string'+==+typeof+a[i])+?+'"'+:+'';
++++++sArgs%2B=((i>0)+?+',+'+:+'')%2B(typeof+a[i])%2B'+'%2BaArgs[i]%2B':'%2Bq%2Ba[i]%2Bq%2B'';
+++}
+++return+'('%2BsArgs%2B')';
}+

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);++|code-block|syntax|javascript|504963|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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.

I would recommend using Firefox and getting Firebug for JavaScript debugging.

<pre><code>// 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&lt;a.length; i++) {
 var q = ('string' == typeof a[i]) ? '"' : '';
 sArgs+=((i&gt;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); 
</code></pre>

Hello I am a new programmer and still learning. 
This is the code that I am trying to figure out:

<pre><code>&lt;div id="buy" class="buy button"&gt;Buy&lt;/div&gt;
</code></pre>

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

How can I see the event that is attached to an html element?

调试器

jQuery

你好，我是一个新的程序员，还在学习。这是我试图弄清楚的代码：<div id="buy" class="buy button">Buy</div>当我点击div (按钮)时，一些javascript代码被执行，但我不知道它是在哪里。当点击发生时，我怎么知道哪个函数被触发了？侦听器是如何附加到此元素的

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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