Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

jQuery Basic

jQuery Ajax Events

jQuery Ajax Methods

jQuery Keyboard Events

jQuery Keyboard Methods

jQuery Form Events

jQuery Form Methods

jQuery Mouse Event

jQuery Mouse Methods

jQuery Event Object

jQuery Fading

jQuery Document Loading

jQuery Traversing

jQuery Utilities

jQuery Property

jQuery HTML

jQuery CSS

jQuery Miscellaneous

jQuery event.target Property

Posted in jQuery Tutorial
Updated on May 15, 2024
By Mari Selvan
👁️ 42 - Views
⏳ 4 mins
💬 1 Comment
jQuery event.target

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
Copy To Clipboard
event.target

📝 Example

  1. 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
    Copy To Clipboard
    <button id="button1">Button 1</button>
    <button id="button2">Button 2</button>
    <button id="button3">Button 3</button>
    example.js
    Copied
    Copy To Clipboard
    $("button").click(function(event) {
      console.log(event.target.id);
    });

    This will log the ID of the clicked button to the console.

  2. 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
    Copy To Clipboard
    <button id="myButton">Click Me</button>
    example.js
    Copied
    Copy To Clipboard
    $("#myButton").click(function(event) {
      $(event.target).text("Clicked!");
    });

    This will change the text of the clicked button to Clicked!.

  3. 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
    Copy To Clipboard
    <ul id="myList">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    example.js
    Copied
    Copy To Clipboard
    $("#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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy