this Object on jQuery Event

Introduction to this in JavaScript

This keyword is used in JavaScript to refer to the object to which it belongs. The value stored here is the JavaScript program's current execution context. As a result, the value of the this variable changes depending on how the function is defined and invoked and the default execution context.

Variables in JavaScript have a scope, and objects have context. A local variable called this exists in a function. It is scoped to the function, but if none is specified in the context of the owner object, that object is a window.

Let’s try something to see what happens:

Note that even within the method, the local variable this is window because the function is running in the context of the Window object. Even though the anonymous function is defined in the function scope, it is scoped to the Window because the variable is declared there first.

Let’s create an object and understand this a little further:

About $(this) in jQuery

In jQuery, we write this as a jQuery object, $(this). Note that there are no quotes since this is a variable.

jQuery this - .click() Example:

Consider some li tags on a web page. If someone clicks any li tags, we want to alter the colors of the clicked li tags. To access the clicked li tags, we can utilize the jQuery this selector.

Have a look at the following jQuery code for doing this task:

jQuery this - .each() Example

Now let's use the jQuery this selector with the .each() method. We will utilize the class myclass to modify the color of elements.

Code

Here is the jQuery code:

jQuery this - .append() Example

Now let's see the use of the .append() method in jQuery. Suppose we have a button, and when it is clicked, we need to append some text to it. We can attach the text with $(this) in jQuery.

Example:

jQuery this - .focus() Example

Now let's see what the .focus() method is. Suppose we have a text box and on its focus event we will change its border using jQuery this selector.

Let's look at the code:

jQuery this - .hover() example

Now let's see how to use $(this) in jQuery cursor events.

Suppose we have a span element. When the mouse is over it, the text-decoration is underlined, and when the mouse is removed, the text-decoration is gone.

Example:

Usage of this Keyword in jQuery Event Handler

In an event handler, the keyword this denotes a DOM element that triggered an event.

Example: