Find callback functions added with jQuery on DOM elements

Question

I am currently testing this in Mozilla FireFox 3.0.5 using FireBug 1.3.0 with jQuery 1.2.6.

First try

document.getElementById("x").onfocus = function ()
{
    var helloWorld = "Hello World";
};

FireBug console:

document.getElementById("helloworld").onfocus.toString() = function body as a string

$("#helloworld").get(0).onfocus.toString() = function body as a string

---

Second try

$("#helloworld").focus(function ()
{
    var helloWorld = "Hello World";
});

FireBug console:

document.getElementById("helloworld").onfocus.toString() = FireBug returns nothing

$("#helloworld").get(0).onfocus.toString() = FireBug returns nothing

---

What am I missing here? Why can't I find the callbacks when attaching them with jQuery?

Answer 1

jQuery doesn't attach the callbacks directly, instead it stores them internally in a registry. Whenever an event is triggered, jQuery looks in the registry and calls the callback that you asked for earlier.

This gives you the advantage of being able to stack multiple callbacks onto a single element's event, but it has the disadvantage that you must use jQuery's event handler routines to set, get, and remove the callbacks.

Answer 2

To view events that jQuery has bound use :

$("#helloworld").data('events');

If you bind the focus as per your example and you run the above in firebug console it will return

Object focus=Object