I've been wondering a long time about this. Is there a way in eg Chrome to see what events are bound to an element? Since many people now use jQuery with a syntax like the following:
$("a.subtle").click(function(){
//do something
});
Is there a way in the inspector to easily find this code? I know in the inspector you can go to the "event listeners"-tab to see what events are bound. Looking at an example I can see there is a click-event on the element with the js file of jQuery next to it, so this must somehow point to it, but of course it is obscured by all the jQuery code. Here's what I'm looking at:
So the question is, is there a quick way to find the jQuery code applied to an element? To be clear, I want to quickly find the code I posted up top.
I could search through the source code for a .click() on that class, but of course it could be done via its parent, or with .on(), or on so many bazillion ways..
Check out the Visual Event bookmarklet.
Here's a quote from their website:
Visual Event is an open source Javascript bookmarklet which provides debugging information about events that have been attached to DOM elements.
Visual Event shows:
Which elements have events attached to them.
The type of events attached to an element.
The code that will be run with [sic] the event is triggered.
The source file and line number for where the attached function was defined (Webkit browsers and Opera only).
Related
Goal:
Retrieve the javascript of the function that you can zoom in and zoom out from this webpage.
Problem:
I can't find the source code. Where can I find it by using chrome.
Thank you!
You can monitor the event listeners on DOM elements using the Elements tab of the Chrome DevTools; see this documentation.
Simply select your element of interest (say, an image) in the DOM tree, and display its event listeners. You can then narrow them down to click, mousedown, mouseup or whatever. Expand these events, and you'll see the JavaScript files that attached listeners on them. You may find what you seek there.
Before we part ways: if the JavaScript code is minified (a huge one-liner, unreadable file), don't forget that Chrome can pretty print it (to a certain degree) by clicking on the {} just on the bottom-left corner of the code panel.
I have a div tag in HTML that looks something like this:
<div id='tiptip_content">...</div>
Now, I can see that by moving my mouse over certain places (mouseover event) on the webpage the text content of this tag is changing. The problem is, that I can't find the piece of Javascript code which is editing this tag. Does anyone have a way, either using some debugging tools or by writing some kind of script to find the code responsible?
The Firefox dev tools that come with the browser (not Firebug) lets you see events on an element. Clicking the little 'ev' bubble next to the element in the DOM view lets you see the code that handles the event.
I would suggest to check it in 2 ways.
1) Use browser Dev tools to find if the corresponding <div> has any events associated with it.
The problem with dev tools that it cant find if events are triggered via jquery. So
2) Look for a javascript peice of code like
$("#tiptip_content").mouseover();
One benefit of calling functions directly from markup is that it is easier to track what's being called. I would like to know if there is an browser addon or something that supports a "Goto javascript source function" for each of the events attached (bound) to an element. Ideally this would take me to the original location it got bound.
You can use FireQuery add on with Firefox browser. It will show you all the events attached to a dom element.
https://addons.mozilla.org/en-US/firefox/addon/firequery/
The built-in Chrome 12 debugger will show you any Event Listeners for any object in the DOM. It can be quite useful, especially to find your way around a larger project. It shows you what event and where the code is.
ok so i am stumped if you go to my site and click the right center "Take a Quick Tour >>>" ..i get this lightbox that appears and i want to close it programmatically and in firebug i can see the x is id "rokbox-close" but running this in firebug
document.getElementById('rokbox-close').click();
but i get this error
TypeError: document.getElementById("rokbox-close").click is not a function
any ideas how to do this
i can run this
document.getElementById("rokbox-close")
and get the element but the click function fails...i dont have jquery installed so i was wondering if there is a javascript thing i am missing
Not all browsers have a "click()" function associated with buttons and anchors and etc. IE does (I think), but (for example) Firefox doesn't.
edit — wow according to MDC, Firefox 5 will support this.
If you were using a framework such as jQuery, then that code might allow you to do what you want. (With jQuery you definitely can.)
(Also, strictly speaking, we're not talking about an event here. We're talking about the ability to trigger the event handling mechanism programatically.)
If you use simple JavaScript istead of 'click' use 'onclick':
document.getElementById("rokbox-close").onclick = youClickHandlerFunction
If you use jQuery use:
$('#rokbox-close').click(youClickHandlerFunction)
See more info here: http://www.quirksmode.org/js/introevents.html
Or here: http://api.jquery.com/click/
The click() function is something that is not supported by all browsers. You're probably thinking of the click handler that jQuery provides.
For a more complete view of why click() isn't universally handled, check out this link, which covers the long and twisty history of event handling across different browsers:
http://www.quirksmode.org/js/introevents.html
I just installed firebug and want to see and debug jquery and javascript methods when fired.
Suppose that a jquery function will be called when button is clicked. When the site is huge and the page includes many js files then it is very difficult to point out which function will be called and where it is defined, because people attach button events in a different way. I mean the event is attached sometime based on css. So sometimes I just cannot find out which method is going to be invoked.
So please give me some tips so that I can see those functions invoke and the function body at run time wherever it is defined. Thanks.
You can try using FireQuery. From the site:
jQuery expressions are intelligently presented in Firebug Console and DOM inspector
attached jQuery data are first class citizens
elements in jQuery collections are highlighted on hover
jQuerify: enables you to inject jQuery into any web page
jQuery Lint: enables you to automatically inject jQuery Lint into the page as it is loaded (great for ad-hoc code validation)
I've used it a few times and it makes debugging (when using jQuery) much easier.
EDIT
Using the plugin, you can look at the element and see the events bound to it. Your other option is to search your codebase for anything that identifies the element (id or css class perhaps). Then you should also be able to see what gets bound.
Take a look at http://firequery.binaryage.com/ (FireQuery). It's an extension to FireBug that allows you to see jQuery calls. I haven't used it that much, but it might be what you're looking for.