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.relatedTarget Property

Posted in jQuery Tutorial
Updated on May 15, 2024
By Mari Selvan
πŸ‘οΈ 25 - Views
⏳ 4 mins
πŸ’¬ 1 Comment
jQuery event.relatedTarget

Photo Credit to CodeToFun

πŸ™‹ Introduction

jQuery provides a robust set of tools for handling events, making it easier for developers to create interactive web applications. One useful property within jQuery's event object is event.relatedTarget. This property is crucial when working with focus and mouse events, as it helps determine the element that is related to the event's target.

In this guide, we will explore the event.relatedTarget property, understand its usage, and see practical examples to grasp its full potential.

🧠 Understanding event.relatedTarget Property

The event.relatedTarget property is part of the jQuery event object and is primarily used with focus and mouse events. It returns the element that is related to the event's target. For instance, in mouseover and mouseout events, event.relatedTarget refers to the element the mouse pointer came from or is going to.

πŸ’‘ Syntax

The syntax for the event.relatedTarget property is straightforward:

syntax.js
Copied
Copy To Clipboard
event.relatedTarget

πŸ“ Example

  1. Using event.relatedTarget with Mouseover and Mouseout Events:

    The event.relatedTarget property is especially useful in handling mouseover and mouseout events. Here's an example:

    index.html
    Copied
    Copy To Clipboard
    <div id="box1" style="width:100px; height:100px; background-color:lightblue;"></div>
    <div id="box2" style="width:100px; height:100px; background-color:lightgreen; margin-top:20px;"></div>
    example.js
    Copied
    Copy To Clipboard
    $("#box1, #box2").on("mouseover mouseout", function(event) {
        if (event.type == "mouseover") {
            $(this).css("background-color", "yellow");
            console.log("Mouse entered from: ", event.relatedTarget.id);
        } else if (event.type == "mouseout") {
            $(this).css("background-color", "lightblue");
            console.log("Mouse left to: ", event.relatedTarget.id);
        }
    });

    This example changes the background color of the boxes when the mouse enters and leaves, and logs the ID of the related element.

  2. Handling Focus and Blur Events:

    The event.relatedTarget property is also useful for managing focus and blur events, helping you identify which element has gained or lost focus.

    index.html
    Copied
    Copy To Clipboard
    <input type="text" id="input1" placeholder="Input 1">
    <input type="text" id="input2" placeholder="Input 2">
    example.js
    Copied
    Copy To Clipboard
    $("#input1, #input2").on("focus blur", function(event) {
        if (event.type == "focus") {
            console.log("Focused from: ", event.relatedTarget ? event.relatedTarget.id : "None");
        } else if (event.type == "blur") {
            console.log("Blurred to: ", event.relatedTarget ? event.relatedTarget.id : "None");
        }
    });

    In this example, the console will log the ID of the element that the focus came from or went to, helping you manage focus transitions.

  3. Cross-browser Compatibility:

    While event.relatedTarget is widely supported, it’s essential to ensure compatibility with older browsers. jQuery handles many cross-browser issues, but it's good to be aware of potential differences in behavior.

  4. Avoiding Null Values:

    In some cases, event.relatedTarget can be null (e.g., when the mouse leaves the browser window). Always check for null values to prevent errors in your scripts:

    example.js
    Copied
    Copy To Clipboard
    if (event.relatedTarget) {
        console.log("Related Target ID: ", event.relatedTarget.id);
    } else {
        console.log("No related target");
    }

πŸŽ‰ Conclusion

The jQuery event.relatedTarget property is a valuable tool for managing interactions between elements during focus and mouse events. By understanding and leveraging this property, you can create more dynamic and responsive web applications.

Whether handling focus transitions or mouse movements, event.relatedTarget provides crucial context that enhances the user experience.

πŸ‘¨β€πŸ’» 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