Geek Answers Handbook

"this" in object methods vs "this" in event handlers

Edit
The answers indicated that the this keyword is used in jQuery in the same way as in any JavaScript code. That is, the object method receives the object itself as this , this is what happens with the $.fn functions (they are called in jQuery objects). The event handler functions are callback functions, they are not object methods, and it is the caller who decides that this will be referenced inside the function. It usually refers to a DOM element.

Original question

The difference between this and $(this) often explained as how this refers to a DOM object, and $(this) refers to a jQuery object (a DOM element with a jQuery wrapper around it).
In the following example, the handler function is passed this as a DOM element, and wrapping it in $() , we create a jQuery object from it, so we can use functions that live in the $.fn namespace on it.

 $('div').on('click', function(event){ event.preventDefault(); $(this).css('backgroundColor', 'red'); });


However, I just came across this explanation on learn.jquery.com:

Plugins | JQuery Training Center

 $.fn.greenify = function() { this.css( "color", "green" ); }; $("a").greenify(); // makes all the links green // Explanation provided by the author of the article: // "Notice that to use css(), another method, we use this, not $( this ). // This is because our greenify function is a part of the same object as css()."


Does this mean that this refers to the DOM object when passing the function of the event handler, but refers to the jQuery object when passing to the jQuery object?
Actually, this makes sense, since the method is called for the jQuery object, so it is logical to pass the jQuery object to it.

+4
source share
4 answers

The identifier "this" has nothing to do with jQuery, it is an integral part of javascript.

You can check out this link, which contains a detailed explanation of "this" -keyword: http://www.devign.me/javascript-this-keyword/

+7
source

In the jQuery plugin, this method is already a jQuery object. That way you can use jQuery methods directly on this .

This has nothing to do with event handlers. This is because when a method is called on an object (in this case, a jQuery object), javascript sets this to point to the object. So, since the object in this case is a jQuery object, what is this .

The event handler callback function is not a method call, so it works differently — it is a callback, and the caller of the callback decides whether to set this to use .call() or .apply() . For most event handler callbacks, the code specifically decides to set this the DOM object that raised the event.

+5
source

This is because there is no callback in your greenify plugin, no event handler.

He is being called

 $("a").greenify();

which means that this inside the function is the receiver, that is $("a") , like this , in b when you execute ab(); is a .

+2
source

.greenify is called as a jQuery instance method. If you look in the jQuery source, you will find

 jQuery.fn = jQuery.prototype = { // All the goodies...

which shows that your understanding is correct.

+1
source

More articles:


All Articles