blocks|key|258269|text|编辑__：代替我自己的答案，这个答案非常好：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|258270|Google+Chromes开发人员工具有一个内置到脚本部分的搜索功能|258271|如果你不熟悉这个工具：(以防万一)|258272|258273|右键单击页面上的任意位置(在chrome中)|unordered-list-item|258274|单击'Inspect+Element‘|258275|单击右上角的’脚本‘选项卡|258276|搜索栏<|258277|>F212|258278|快速搜索#ID最终会将您带到绑定函数。|258279|例如:搜索#foo会把你带到|CODE|258280|$('#foo').click(function(){+alert('bar');+})|code-block|syntax|javascript|258281|​|258282|📷|atomic|258283|258284|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/10f31fabda0cbfe3822aea94e2ff5b11.jpeg|imageAlt^0|0|2|0|0|0|0|0|0|0|0|0|0|5|4|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|1K|8|@$9|1L|A|1M|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1N|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1O|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]|$1|K|3|L|5|M|7|1Q|8|@]|D|@]|E|$]]|$1|N|3|O|5|M|7|1R|8|@]|D|@]|E|$]]|$1|P|3|Q|5|M|7|1S|8|@]|D|@]|E|$]]|$1|R|3|S|5|M|7|1T|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1U|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1V|8|@]|D|@]|E|$]]|$1|X|3|Y|5|6|7|1W|8|@$9|1X|A|1Y|B|Z]]|D|@]|E|$]]|$1|10|3|11|5|12|7|1Z|8|@]|D|@]|E|$13|14]]|$1|15|3|16|5|6|7|20|8|@]|D|@]|E|$]]|$1|17|3|18|5|19|7|21|8|@]|D|@$9|22|A|23|1|24]]|E|$]]|$1|1A|3|16|5|6|7|25|8|@]|D|@]|E|$]]|$1|1B|3|-4|5|6|7|26|8|@]|D|@]|E|$]]]|1C|$1D|$5|1E|1F|1G|E|$1H|1I|1J|-4]]]]

Edit: in lieu of my own answer, this one is quite excellent: <a href="https://stackoverflow.com/questions/570960/how-to-debug-javascript-jquery-event-bindings-with-firebug-or-similar-tool">How to debug JavaScript/jQuery event bindings with Firebug (or similar tool)</a>

Google Chromes developer tools has a search function built into the scripts section

If you are unfamiliar with this tool: (just in case)

<ul>
<li>right click anywhere on a page (in chrome)</li>
<li>click 'Inspect Element'</li>
<li>click the 'Scripts' tab</li>
<li>Search bar in the top right</li>
</ul>

Doing a quick search for the #ID should take you to the binding function eventually.

Ex: searching for <code>#foo</code> would take you to 

<pre><code>$('#foo').click(function(){ alert('bar'); })
</code></pre>

<img src="https://i.stack.imgur.com/NFeLt.jpg" alt="enter image description here">

blocks|key|2939959|text|使用Chrome15.0.865.0开发。在Elements面板上有一个"Event+Listeners“部分：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2939960|​|2939961|📷|atomic|2939962|2939963|和“脚本”面板上的“事件侦听器断点”。使用鼠标->单击断点，然后“单步执行下一个函数调用”，同时密切关注调用堆栈，查看哪个用户域函数处理该事件。理想情况下，您应该将jQuery的精简版本替换为非精简版本，这样您就不必总是介入，并尽可能使用step+over。|2939964|2939965|2939966|2939967|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/a701e2dc13a8068d558dae2f55bde307.png|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/efe4a7d7d1c5fac84f27b8308a970d4b.png^0|2|I|0|0|0|1|0|0|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|14|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@$9|16|A|17|1|18]]|E|$]]|$1|K|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1A|8|@]|D|@]|E|$]]|$1|N|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|O|3|I|5|J|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|P|3|G|5|6|7|1G|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X|Y|-4]]|Z|$5|T|U|V|E|$W|10|Y|-4]]]]

Using Chrome 15.0.865.0 dev. There's an "Event Listeners" section on the Elements panel:

<img src="https://i.stack.imgur.com/ATeg8.png" alt="enter image description here">

And an "Event Listeners Breakpoints" on the Scripts panel. Use a Mouse -> click breakpoint and then "step into next function call" while keeping an eye on the call stack to see what userland function handles the event. Ideally, you'd replace the minified version of jQuery with an unminified one so that you don't have to step in all the time, and use step over when possible.

<img src="https://i.stack.imgur.com/FxqpX.png" alt="enter image description here">

blocks|key|253431|text|您还可以使用Chrome的检查器以另一种方式查找附加事件，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|253432|253433|右键单击要检查的元素，或在“Elements”窗格中找到它。|ordered-list-item|253434|然后在“event+Listeners”选项卡/窗格中，展开该事件(例如，显示各个子节点以查找所需的子节点，然后查找“|253435|”子节点所在的位置。|253436|右键单击“|253437|”一词，然后单击“|253438|+function+definition”|253439|253440|这将把您带到定义处理程序的位置，如下图所示，并由Paul爱尔兰在此处进行解释：https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA|offset|length|253441|​|253442|📷|atomic|253443|253444|entityMap|0|LINK|mutability|MUTABLE|url|https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/fa995080389801ef780bc71a42f14677.png|imageAlt^0|0|0|0|0|0|0|0|0|0|13|29|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1G|8|@]|9|@]|A|$]]|$1|F|3|G|5|E|7|1H|8|@]|9|@]|A|$]]|$1|H|3|I|5|E|7|1I|8|@]|9|@]|A|$]]|$1|J|3|K|5|E|7|1J|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1K|8|@]|9|@]|A|$]]|$1|N|3|O|5|E|7|1L|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@$S|1O|T|1P|1|1Q]]|A|$]]|$1|U|3|V|5|6|7|1R|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|1S|8|@]|9|@$S|1T|T|1U|1|1V]]|A|$]]|$1|Z|3|V|5|6|7|1W|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|17]]|18|$5|19|14|1A|A|$1B|1C|1D|-4]]]]

You can also use Chrome's inspector to find attached events another way, as follows: 

<ol>
<li>Right click on the element to inspect, or find it in the 'Elements' pane.</li>
<li>Then in the 'Event Listeners' tab/pane, expand the event (eg 'click')</li>
<li>Expand the various sub-nodes to find the one you want, and then look for where the 'handler' sub-node is.</li>
<li>Right click the word 'function', and then click 'Show function definition'</li>
</ol>

This will take you to where the handler was defined, as demonstrated in the following image, and explained by Paul Irish here: <a href="https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA">https://groups.google.com/forum/#!topic/google-chrome-developer-tools/NTcIS15uigA</a>

<img src="https://i.stack.imgur.com/nda3f.png" alt="&#39;Show Function definition&#39;">

blocks|key|3154408|text|尝试一下jQuery审计扩展(https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg)，安装完成后，请执行以下步骤：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3154409|从处理程序属性展开Events+property|3154410|Choose+|unordered-list-item|3154411|
|3154412|jQuery|3154413|3154414|，右键单击function并选择'Show+function++now+|3154415|ordered-list-item|3154416|+Event+binding+code|3154417|单击'Pretty+print‘按钮查看代码|3154418|<|3154419|>G214|3154420|3154421|3154422|entityMap|0|LINK|mutability|MUTABLE|url|https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg^0|F|2F|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|19|8|@]|9|@$A|1A|B|1B|1|1C]]|C|$]]|$1|D|3|E|5|6|7|1D|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1E|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|1F|8|@]|9|@]|C|$]]|$1|K|3|L|5|H|7|1G|8|@]|9|@]|C|$]]|$1|M|3|J|5|6|7|1H|8|@]|9|@]|C|$]]|$1|N|3|O|5|H|7|1I|8|@]|9|@]|C|$]]|$1|P|3|-4|5|Q|7|1J|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1K|8|@]|9|@]|C|$]]|$1|T|3|U|5|Q|7|1L|8|@]|9|@]|C|$]]|$1|V|3|W|5|6|7|1M|8|@]|9|@]|C|$]]|$1|X|3|Y|5|Q|7|1N|8|@]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|10|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]|$1|11|3|-4|5|6|7|1Q|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]]]

Give it a try to the jQuery Audit extension (<a href="https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg">https://chrome.google.com/webstore/detail/jquery-audit/dhhnpbajdcgdmbbcoakfhmfgmemlncjg</a>), after installing follow these steps:

<ol>
<li>Inspect the element</li>
<li>On the new 'jQuery Audit' tab expand the Events property</li>
<li>Choose for the Event you need </li>
<li>From the handler property, right click over function and select 'Show function definition'</li>
<li>You will now see the Event binding code</li>
<li>Click on the 'Pretty print' button for a more readable view of the code</li>
</ol>

blocks|key|257398|text|findEventHandlers是一个jquery插件，原始代码在这里：https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|257399|步骤|style|BOLD|257400|257401|将原始代码直接粘贴到chrome的控制台(注意:必须已经加载了jquery+)|ordered-list-item|257402|使用以下函数调用：findEventHandlers(eventType,+selector);|CODE|257403|257404|若要查找相应的选择器，请指定元素的eventType处理程序。|257405|示例|257406|findEventHandlers("click",+"#clickThis");|code-block|syntax|javascript|257407|然后，如果有，可用事件处理程序将显示在下面，您需要展开以找到处理程序，右键单击函数并选择show+function+definition|257408|请参阅：https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/|257409|entityMap|0|LINK|mutability|MUTABLE|url|https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js|1|https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/^0|11|2J|0|0|0|2|0|0|0|9|13|0|0|0|0|2|0|0|18|O|0|4|2R|1|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|D|3|E|5|6|7|1G|8|@$A|1H|B|1I|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]|$1|I|3|J|5|K|7|1K|8|@]|9|@]|C|$]]|$1|L|3|M|5|K|7|1L|8|@$A|1M|B|1N|F|N]]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1O|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1P|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|1Q|8|@$A|1R|B|1S|F|G]]|9|@]|C|$]]|$1|T|3|U|5|V|7|1T|8|@]|9|@]|C|$W|X]]|$1|Y|3|Z|5|6|7|1U|8|@$A|1V|B|1W|F|N]]|9|@]|C|$]]|$1|10|3|11|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]]|C|$]]|$1|12|3|-4|5|6|7|21|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]]]

findEventHandlers is a jquery plugin, the raw code is here: <a href="https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js" rel="noreferrer">https://raw.githubusercontent.com/ruidfigueiredo/findHandlersJS/master/findEventHandlers.js</a>

Steps

<ol>
<li>Paste the raw code directely into chrome's console(note:must have jquery loaded already)</li>
<li>Use the following function call: <code>findEventHandlers(eventType, selector);</code> 
to find the corresponding's selector specified element's eventType handler.</li>
</ol>

Example:

<pre><code>findEventHandlers("click", "#clickThis");
</code></pre>

Then if any, the available event handler will show bellow, you need to expand to find the handler, right click the function and select <code>show function definition</code>

See: <a href="https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/" rel="noreferrer">https://blinkingcaret.wordpress.com/2014/01/17/quickly-finding-and-debugging-jquery-event-handlers/</a>

blocks|key|3154464|text|对于Chrome版本52.0.2743.116：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3154465|在Chrome的开发者工具中，点击Ctrl%2BShift%2BF.调出‘|offset|length|style|CODE|3154466|’面板|ordered-list-item|3154467|键入要查找的元素的名称。|3154468|3154469|绑定元素的结果应该出现在面板中，并说明它们所在的文件。|3154470|entityMap^0|0|H|4|M|5|S|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@$D|T|E|U|F|G]|$D|V|E|W|F|G]|$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|Z|8|@]|9|@]|A|$]]|$1|K|3|L|5|J|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|12|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|Q|$]]

For Chrome Version 52.0.2743.116:

<ol>
<li>In Chrome's Developer Tools, bring up the 'Search' panel by hitting <code>Ctrl</code>+<code>Shift</code>+<code>F</code>. </li>
<li>Type in the name of the element you're trying to find.</li>
</ol>

Results for binded elements should appear in the panel and state the file they're located in.

blocks|key|258435|text|Chrome版本83.0.4103.61的(2020年的最新版本)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|258436|​|258437|📷|atomic|258438|258439|258440|选择要检查的元素|ordered-list-item|258441|选择事件侦听器选项卡|258442|确保选中框架侦听器以显示实际的javascript文件，而不是jquery函数。|258443|258444|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/97cf9d7e3cc18e0ef2ecb1beacdca8f1.jpeg|imageAlt^0|L|D|0|0|1|0|0|1|0|1|0|0|0|1|0|0|0|8|0|0|A|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|19|8|@$9|1A|A|1B|B|C]]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|K|3|G|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|L|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]|$1|M|3|N|5|O|7|1J|8|@$9|1K|A|1L|B|C]]|D|@]|E|$]]|$1|P|3|Q|5|O|7|1M|8|@$9|1N|A|1O|B|C]]|D|@]|E|$]]|$1|R|3|S|5|O|7|1P|8|@$9|1Q|A|1R|B|C]]|D|@]|E|$]]|$1|T|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11|12|-4]]]]

(Latest as of 2020) For version Chrome Version 83.0.4103.61 :

<a href="https://i.stack.imgur.com/S1eOT.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/S1eOT.jpg" alt="Chrome Developer Tools - Event Listener"></a>

<ol>
<li>Select the element you want to inspect</li>
<li>Choose the Event Listeners tab</li>
<li>Make sure to check the Framework listeners to show the real javascript file instead of the jquery function.</li>
</ol>

blocks|key|2940207|text|2018更新-可能对未来的读者有帮助：|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2940208|我不确定这是什么时候在Chrome中引入的。但现在在Chrome中，另一种(简单的)方法是通过控制台命令。|2940209|示例：(在chrome控制台类型中)|2940210|getEventListeners($0)|code-block|syntax|javascript|2940211|而$0是DOM中选定的元素。|2940212|https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4|2940213|​|2940214|📷|atomic|2940215|2940216|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/ead12d722f9501b8d43abacb014db07f.png|imageAlt^0|0|J|0|0|0|3|0|0|0|0|2K|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1E|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1F|8|@$9|1G|A|1H|B|C]]|D|@]|E|$]]|$1|J|3|K|5|L|7|1I|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|1J|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|1K|8|@]|D|@$9|1L|A|1M|1|1N]]|E|$]]|$1|S|3|T|5|6|7|1O|8|@]|D|@]|E|$]]|$1|U|3|V|5|W|7|1P|8|@]|D|@$9|1Q|A|1R|1|1S]]|E|$]]|$1|X|3|T|5|6|7|1T|8|@]|D|@]|E|$]]|$1|Y|3|-4|5|6|7|1U|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|R]]|15|$5|16|12|17|E|$18|19|1A|-4]]]]

2018 Update - Might be helpful for future readers:

I am not sure when this was originally introduced in Chrome. But another (easy) way this can be done now in Chrome is via console commands.

For example: (in chrome console type)

<pre><code>getEventListeners($0)
</code></pre>

Whereas $0 is the selected element in the DOM.

<a href="https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4" rel="noreferrer">https://developers.google.com/web/tools/chrome-devtools/console/command-line-reference#0_-_4</a>

<a href="https://i.stack.imgur.com/RtNxZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RtNxZ.png" alt="enter image description here"></a>

Lets suppose I've a link on my page:

<pre><code>&lt;a href="#" id="foo"&gt;Click Here&lt;/a&gt;
</code></pre>

I don't know anything else, but when I click on the link, an <code>alert("bar")</code> is displayed.
So I know that somewhere, some code is getting bound to <code>#foo</code>.

How can I find the code that is binding the <code>alert("bar")</code> to the click event?
I'm looking for a solution with Chrome.

Ps.: The example is fictive, so I'm not looking for solution like: "Use XXXXXX and search the whole project for "alert(\"bar\")". I want a real debugging/tracing solution.

Using Chrome, how to find to which events are bound to an element

假设我的页面上有一个链接：<a href="#" id="foo">Click Here</a>我不知道其他什么，但当我单击该链接时，会显示一个alert("bar")。所以我知道在某个地方，一些代码正被绑定到#foo。如何找到将alert("bar")绑定到单击事件的代码？我正在寻找一个使用Chrome的解决方案。附...

问使用Chrome，如何找到绑定到元素的事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Chrome，如何找到绑定到元素的事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Chrome，如何找到绑定到元素的事件
EN