Tutorials

jQuery event.relatedTarget Property

Posted in jQuery Tutorial

Updated on Oct 13, 2024

By Mari Selvan

👁️ 37 - Views

⏳ 4 mins

💬 1 Comment

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

event.relatedTarget

📝 Example

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

<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

$("#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.

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

<input type="text" id="input1" placeholder="Input 1">
<input type="text" id="input2" placeholder="Input 2">

example.js

Copied

$("#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.

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.
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
```
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.