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

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


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

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

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

In this example, the function buttonHovered is defined and is attached as an event listener to the "mouseover" event on the button with the ID "myButton". When the mouse moves over 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.

You can copy the whole code and try it.


<!DOCTYPE html>
<html>
<body> 
 <h2>Example of mouseover 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 over the button
  function buttonHovered() {
    alert("Mouse is hovering over the button!");
  }

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

‹ Previous - DOM Load event

Next › - mouseout event Listener

What is mouseover event Listener in javascript?

You can copy the whole code and try it.

You May Like