How to Call a JavaScript Function from an onmouseout Event ?

The onmouseout event in JavaScript triggers when the mouse pointer leaves an element. This event is commonly used in web development to execute certain functions when a user moves the mouse away from a specific area on the webpage.

Below are the approaches to call a JavaScript function from an onmouseout event:

Table of Content

Using inline event handler in HTML
Using JavaScript Event Listener

Using inline event handler in HTML

In this approach, we are using an inline event handler (onmouseout=" myFunction() ") directly in the HTML button element to trigger the myFunction() JavaScript function when the mouse moves away from the button, resulting in an alert message indicating "Mouse moved away!" to the user.

Example: The below example uses an inline event handler in HTML to call a JavaScript function from an onmouseout event.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using inline event handler</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            text-align: center;
        }

        h1 {
            color: #333;
            margin-top: 50px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            background-color: #007bff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>

<body>
    <h1>Using inline event handler in HTML</h1>
    <button id="myButton" 
            onmouseout="myFunction()">
          Move mouse away
      </button>
    <script>
        function myFunction() {
            alert("Mouse moved away!");
        }
    </script>
</body>

</html>

Output:

Using JavaScript Event Listener

In this approach, we are using JavaScript event listeners (onmouseout and onmouseover) to trigger functions when the mouse moves in and out of the button. The functions change the button's background color and text content dynamically for interactive user feedback.

Example: The below example uses JavaScript Event Listener to call a JavaScript function from an onmouseout event.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Using JavaScript Event Listener</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        #container {
            text-align: center;
        }

        #myButton {
            transition: background-color 0.3s ease;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="container">
        <h1>
              Using JavaScript Event Listener
          </h1>
        <button id="myButton">
              Hover over me!
          </button>
    </div>
    <script>
        document.getElementById("myButton").onmouseout = function () {
            let button = document.getElementById("myButton");
            button.style.backgroundColor = "blue";
            button.innerText = "Mouse moved away!";
        };
        document.getElementById("myButton").onmouseover = function () {
            let button = document.getElementById("myButton");
            button.style.backgroundColor = "red";
            button.innerText = "Hover over me!";
        };
    </script>
</body>

</html>

Output:

Conclusion:

Calling JavaScript functions from the onmouseout event can be achieved through various approaches, including inline event handlers, DOM event listeners, and utilizing JavaScript libraries/frameworks like jQuery. Each approach has its advantages and suitability depending on the project's requirements and preferences. By understanding these different methods, you can choose the most appropriate one for your web development tasks.

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions