jQuery event.relatedTarget Property

The jQuery event.relatedTarget property retrieves the element and other DOM elements involved in the event, which is being entered or exited during the mouse movement.

For example, the mouseout event indicates the element being entered, whereas the mouseover event suggests the element being exited.

Syntax

Following is the syntax of the jQuery event.relatedTarget property −

event.relatedTarget

Parameters

This property does not accept any parameter.

Return Value

This property returns which element is being entered or exited during the mouse movement.

Example 1

The following program demonstrates the usage of the jQuery event.relatedTarget property −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/Output.7/jquery.min.js"></script>
    <style>
        div{
            width: 200px;
            padding: 10px;
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <p>Hover over on below element</p>
    <div>Tutorialspoint</div>
    <script>
        $('div').mouseover(function(event){
            alert("Element being exited: " + event.relatedTarget.tagName);
        });
    </script>
</body>
</html>

Output

After executing the program, a box with a green background is displayed. When the mouse pointer hovers over it, a pop-up alert appears, displaying the type of element being exited −

Example 2

The following is another example of the jQuery event.relatedTarget property. We use this property to retrieve the DOM elements involved in the event −

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/Output.7/jquery.min.js"></script>
    <style>
        span{
            color: green;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>Mouse pointer out from the below elements.</p>
    <h1>This is heading</h1>
    <p>This is paragraph</p>
    <div>This is div</div>
    <a href="">Tutorialspoint</a>
    <span></span>
    <script>
        $('h1, p, div, a').mouseout(function(event){
            $('span').text("The element being entered: " + event.relatedTarget.tagName);
        })
    </script>
</body>
</html>

Output

The above program displays multiple elements, and when the mouse pointer moves out from an element, the element involved in the event is displayed −

jquery_ref_events.htm

Print Page