Difference Btween $(this) and event.target

Last Updated : 11 Jul, 2024

$(this) and event.target Both are used to refer to the elements in the context of the event handling but serve different purposes and have different usages. This article will explore the differences between $(this) and event.target providing the descriptions, syntax and example code for each.

These are the following topics that we are going to discuss:

Table of Content

What is $(this)?
What is event.target?
Difference Between $(this) and event.target

What is $(this)?

In jQuery, $(this) is used to the refer to the current HTML element within the context of a jQuery event handler. It wraps the JavaScript this keyword in a jQuery object providing the access to jQuery methods.

Syntax:

$(this)

Example: In this example, $(this) refers to the button that was clicked allowing to the manipulate it using the jQuery methods.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>$(this) Example</title>
    <script src=
"https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
    <button class="btn">Click Me</button>
    <script>
        $(document).ready(function () {
            $('.btn').on('click', function () {
                $(this).text('Clicked!');
                $(this).css('background-color', 'yellow');
            });
        });
    </script>
</body>

</html>

Output:

What is event.target?

In plain JavaScript, event.target refers to the element that triggered the event. It is a property of the event object and provides the reference to the DOM element that was the actual target of the event.

Syntax:

event.target

Example: In this example, event.target refers to the button that was clicked allowing to manipulate it directly using the plain JavaScript.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>event.target Example</title>
</head>

<body>
    <button class="btn">Click Me</button>
    <script>
        document.querySelector('.btn').addEventListener('click', function (event) {
            event.target.textContent = 'Clicked!';
            event.target.style.backgroundColor = 'yellow';
        });
    </script>
</body>

</html>

Output:

Difference Between $(this) and event.target

Characteristics	$(this)	event.target
Definition	Refers to the current HTML element within the context of the jQuery event handler wrapped in a jQuery object.	Refers to the element that triggered the event provided by the event object in the plain JavaScript.
Syntax	$(this)	event.target
Library	Requires jQuery	Native JavaScript
Usage Context	Used within the jQuery event handlers.	Used within the native JavaScript event listeners.
Example Code	$(this).css(‘background-color’, ‘yellow’);	event.target.style.backgroundColor = ‘yellow’;
Advantages	Provides access to jQuery methods for the easy manipulation.	Direct reference to the DOM element without the needing a library.
Performance	Slightly slower due to the jQuery overhead.	Faster as it uses native JavaScript.

Conclusion

Understanding the difference between $(this) and event.target is crucial for the effective event handling in JavaScript and jQuery. While $(this) is convenient for the jQuery users offering the easy access to the jQuery methods, event.target is the go-to choice in plain JavaScript providing the direct access to the DOM element that triggered the event. Choosing between them depends on whether we are using the jQuery or plain JavaScript and the specific needs of your project.

maha123