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?

What exactly is the question? You want to be able to retrieve a function thats assigned as a click handler? — Rory McCrossan
– Rory McCrossan, Commented Dec 16, 2015 at 10:36
I want understand where JQuery function is putted inside the window object structure to have a deep knowledge about how JQuery works under the hood (I need it to debug some other strange situations) — AndreaNobili
– AndreaNobili, Commented Dec 16, 2015 at 10:40
Ok - that function is not directly under the window. It's an anonymous function provided to the click handler of the element itself. — Rory McCrossan
– Rory McCrossan, Commented Dec 16, 2015 at 10:52
Ok, but where can I find the click handler for the specific selected div? — AndreaNobili
– AndreaNobili, Commented Dec 16, 2015 at 10:54
@AndreaNobili - If you see my answer, there is a way that you can see the exact function that is being applied when your button is clicked. Despite what others are pointing out here, it doesn't matter if the function is anonymous or not because jQuery stores info about the applied event listener. — boombox
– boombox, Commented Dec 16, 2015 at 11:19

boombox · Accepted Answer · 2015-12-16 11:48:15Z

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.

SidOfc · Accepted Answer · 2015-12-16 10:57:39Z

This is an anonymous function, basically a piece of unique code that you don't really want to write a named function for.

It's a one-time use-case or rather it's used to bind custom click events without littering the global object with variables.

What an anonymous function does is the exact opposite of what you are asking since you can't find it in the global object (anonymous function).

.click is a function defined in $.fn and since $ is part of the window object you could traverse there to find click e.g. window.$.fn.click would be the path to the source of $(...).click(func...) but an anonymous function is a function that gets set and then forgotten (more or less).

After all, you're not giving it a name so there is no reference it can point to which is exactly what this is.

If you use a named function as an argument to another function it's called a callback function

An anonymous function is basically a nameless callback function, a callback function is a normal function that can be passed to other functions as a callable argument - this normal function will then internally use .call() or .apply() to execute the supplied callback which is what jQuery for instance does when you bind a click

The good thing here is that you're not missing anything at all, as a matter of fact - you're asking the right question because this will look like magic if you're just starting out but once you get the hang of it it's easy to understand and use (and misuse so be careful!)

If you'd like to know how this construction works you could always build your own function that accepts a callback / anonymous function e.g.

function result_based_on_callback(a, b, fn) {
    fn.call(null, a, b);
}

The above function takes two parameters and a function, it will call the function and supply the two parameters to it (the null is the context of this which is a different kind of question :))

If we were to use the above construct to do a calculation we could do so like this:

console.log(result_based_on_callback(1, 2, function(a, b) { return a + b; }));

This would return 3, you can also do this with a normal function that would otherwise take two numbers and add them - it works the same except for just passing in the function name rather than the body

like this:

function do_add(a, b) {
    return a + b;
}

console.log(result_based_on_callback(1, 2, do_add));

Which will do the exact same. I hope this allows you to understand a bit of how this works, good luck!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related