The "mouseout" event in JavaScript is triggered when the mouse pointer moves out of an element on a webpage. You can use an event listener to execute a function when the "mouseout" event occurs on an element.

Here is an example of using an event listener to execute a function when the mouse moves out of a button:


<button id="myButton">Hover over me!</button>

<script>
  // Define the function to be executed when the mouse moves out of the button
  function buttonUnhovered() {
    alert("Mouse is no longer hovering over the button!");
  }

  // Attach the function as an event listener to the "mouseout" event on the button
  document.getElementById("myButton").addEventListener("mouseout", buttonUnhovered);
</script>

In this example, the function buttonUnhovered is defined and is attached as an event listener to the "mouseout" event on the button with the ID "myButton". When the mouse moves out of the button, the function will be executed and an alert message will be displayed.

Event listeners are a powerful tool for creating interactive and dynamic webpages. They can be attached to a wide range of events on different elements, such as mouse clicks, keyboard input, form submissions, and more.

Copy below full code and try it.


<!DOCTYPE html>
<html>
<body> 
 <h2>Example of mouseout event Listener in javascript</h2> 
<button id="myButton">Hover over me!</button>
</body>
</html>  

<script>
  // Define the function to be executed when the mouse moves out of the button
  function buttonUnhovered() {
    alert("Mouse is no longer hovering over the button!");
  }

  // Attach the function as an event listener to the "mouseout" event on the button
  document.getElementById("myButton").addEventListener("mouseout", buttonUnhovered);
</script>

‹ Previous - mouseover event Listener

Next › - mousedown event Listener

What is mouseout event Listener in javascript?

Copy below full code and try it.

You May Like