Can I find a JQuery function inside some object defined into the JavaScript window global object?

Question

I am pretty new in JavaScript and JQuery and I have the following doubt.

I know that if I open the FireBug console typing window I see the content of the global object that in a JavaScript application that run into a browser is the current browser tab (the window).

Ok, so in this global object I can see all the global variables and all the global functions (the variables and the functions that are not defined inside another function).

So I have a page in which I link my .js file.

This file will contain some pure JavaScript function like this:

function myFunction() {
    .................................
    .................................
    .................................
}

And so I will see the myFunction function as a field of the window global object because this function is global (it is not defined inside another function). This is perfectly clear to me.

So, into the .js file linked inside my page I also have something like this:

$(document).ready(function() {

    $("#myButton").click(function() {
        ............................................
        ............................................
        DO SOMETHING WHEN THE BUTTON HAVING id="myButton" IS CLICKED
        ............................................
        ............................................
     });
});

So, this is a JQuery code and it should work in this way (correct me if I am doing wrong assertion).

There is the $ that is the JQuery objet (or what is it?).

On this JQuery object I call the ready() function that is the function that perform its inner callback function when the DOM is completly rendered.

So the inner callback function contain the:

$("#myButton").click(function() {...DO SOMETHING...});

the select a button having id="myButton" and add to it the click event listerner that itself define an inner callback function that is performed when the button is clicked.

Is it true?

Ok...so I think that all these stuff is not direcctly in the global object because it is not directly defined into my .js file but have to be in some memory space dedicate to JQuery.

So looking inside the window object inside the FireBug console I found two objects:

• $: that I think is the JQuery object...so I think that my previous custom JQuery function have to be here but I can't find it.

• JQuery: that is another object that is inside the window global object.

So, my doubt is: when, inside the ready() function I declare something like

$("#myButton").click(function() {...DO SOMETHING...});

where I can find the definition of the function() {...DO SOMETHING...} inside some object defined inside the window global object? Can I find it? Or am I missing something?

Answer 1

jQuery stores its event-related data in a data object events applied to each element. You can use $._data() to grab this info:

$._data($('#myButton')[0], 'events')

or

$._data(document.getElementById('myButton'), 'events')

To get the callback function that you applied for your button's click listener, you can simply grab the handler. For example:

$("#myButton").click(function () { console.log('clicked'); });

var eventsInfo = $._data(document.getElementById('myButton'), 'events');

console.log(eventsInfo.click[0].handler);

The above should print out "function () { console.log('clicked'); }".

Keep in mind that there is no public documentation available for $._data(), although it is a neat thing to know!

The following blog post mentions $._data() when jQuery v1.8 was released but does warn about this:

Note that this is not a supported public interface; the actual data structures may change incompatibly from version to version.

That was back in 2012. To this day, it seems to be working fine with the latest 1.x and 2.x versions, so I don't see this going away anytime soon.