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

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

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

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

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

If you use Firefox and Firebug you can try installing FireQuery. It will make it so you can see the handlers bound by jQuery. http://firequery.binaryage.com/

You can't do it in a really good manner by "just" using ECMAscript itself. For instance, if there was a click event handler added by DOM Level 1 in the form of

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

you can of course easily intercept that property on the node itself. Things are getting more complicated if DOM Level 2 comes into play with .addEventListener() respectevily .attachEvent(). Now you don't really have a "place" to look for where all the different listener functions where bound from.

It gets better by using jQuery. jQuery will hold all it's event handler functions in a special object which is linked to the DOM node of invocation. You can check for that by getting the .data()-expando property for a node like

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

However, now I already described three different ways of binding event listeners to a node (actually its two because a library like jQuery also uses DOM Level 1 or 2 methods of course).

It's really getting ugly if an event is triggerd by delegation. That means, we bound our click event on some parent-node just waiting for that event bubbling up to us so we can check the target. So now we don't even have a direct relationship between the node and the event listener.

Conclusion here is, lookout of a browser plugin or probably a thing like VisualEvent.

You may use "Visual Event 2" script as a bookmark or same script as Chrome extension.

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

Use jQuery("#buy").data('events');

http://api.jquery.com/jQuery.data/ may be interesting.

Event handlers attached using traditional element.onclick= handler or HTML <element onclick="handler"> can be retrieved trivially from the element.onclick 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.

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.

http://getfirebug.com/

http://firequery.binaryage.com/

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.

// 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);  

This is the easiest way I've found of how to do it: http://www.sprymedia.co.uk/article/Visual+Event

> When working with events in Javascript, it is often easy to lose track > of what events are subscribed where. This is particularly true if you > are using a large number of events, which is typical in a modern > interface employing progressive enhancement. Javascript libraries also > add another degree of complexity to listeners from a technical point > of view, while from a developers point of view they of course can make > life much easier! But when things go wrong it can be difficult to > trace down why this might be. > > It is due to this I've put together a Javascript bookmarklet called > Visual Event which visually shows the elements on a page that have > events subscribed to them, what those events are and the function that > the event would run when triggered. This is primarily intended to > assist debugging, but it can also be very interesting and informative > to see the subscribed events on other pages.

There's a bookmark button there you can drag to your toolbar (FF or Chrome), then just click the button on any page where you want to see the events attached. Works great! (at least for events attached by jQuery or other libraries).

Are you using jQuery? If so, you want to search for one of these three lines of code:

$("#buy").click //the div is refered by its id

or

$(".buy").click //the div is refered to by the style "buy"

or

$(".button").click //refered to by the style "button"

Most newer browsers have "Developer Tools" built into them by pressing F12 (at least in IE and Chrome). That may help you do some further debugging and tracing.

1. Right-click page, and choose to view the page's source
2. Find <script> tags
3. Look for $("#buy") and something mentioning onClick or .on("click",function(){...});
4. If you can't find it, search for something along these lines: document.getElementById("buy")
5. You have found the function, or code, where the event handler code is

$("#buy") is JQuery's way of saying find an element that has an id attribute of buy and if it has a . following it with some function, that function is acting upon the element that was found by JQuery.