jQuery event.target Property

Posted in jQuery Tutorial

Updated on May 15, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

In jQuery, event handling plays a crucial role in creating interactive web pages. One fundamental aspect of event handling is understanding the event.target property. This property refers to the HTML element that triggered the event. Mastering the event.target property empowers you to precisely target and manipulate elements based on user interactions.

In this guide, we'll explore the usage of the jQuery event.target property with practical examples to help you grasp its significance.

🧠 Understanding event.target Property

The event.target property represents the HTML element that initiated the event. It allows you to access and manipulate this element within event handler functions. Understanding event.target is essential for implementing dynamic behavior based on user interactions, such as click events, mouse events, and keyboard events.

💡 Syntax

The syntax for the event.target property is straightforward:

syntax.js

Copied

event.target

📝 Example

Accessing Clicked Element:

Suppose you have multiple buttons, and you want to determine which button was clicked. You can achieve this by accessing the event.target property within the click event handler:
index.html
Copied
```
<button id="button1">Button 1</button>
<button id="button2">Button 2</button>
<button id="button3">Button 3</button>
```
example.js
Copied
```
$("button").click(function(event) {
  console.log(event.target.id);
});
```
This will log the ID of the clicked button to the console.
Modifying Clicked Element:

You can also modify the clicked element or perform actions based on its properties using event.target. For instance, let's change the text of a clicked button:
index.html
Copied
```
<button id="myButton">Click Me</button>
```
example.js
Copied
```
$("#myButton").click(function(event) {
  $(event.target).text("Clicked!");
});
```
This will change the text of the clicked button to Clicked!.
Delegating Events:

The event.target property is particularly useful when delegating events to parent elements. This allows you to handle events for dynamically added elements. For example:
index.html
Copied
```
<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```
example.js
Copied
```
$("#myList").on("click", "li", function(event) {
  console.log($(event.target).text());
});
```
This will log the text of the clicked list item, even if new list items are added dynamically.

🎉 Conclusion

The jQuery event.target property provides a powerful mechanism for accessing and manipulating the HTML element that triggered an event. Whether you need to determine the source of an event, modify the element's properties, or delegate events for dynamic content, understanding event.target is essential for effective event handling in jQuery.

By mastering its usage, you can create more responsive and interactive web pages with ease.