Difference between mouseover, mouseenter and mousemove events in JavaScript

Events in JavaScript provide a dynamic interface to the webpage. There are wide variety of events such as user clicking, moving the mouse over an element, etc. Events that occur when the mouse interacts with the HTML document falls under the category of MouseEvent property.

  • mouseover: The onmouseover event triggers when the mouse pointer enters an element or any one of its child elements.
    <element onmouseover="myfunction()">
  • mouseenter: The onmouseenter event is triggered only when the mouse pointer hits the element.
    <element onmouseenter="myfunction()">
  • mousemove: The onmousemove event is triggered each time the mouse pointer is moved when it is over an element.
    <element onmousemove="myfunction()">

Note: The mousemove event occurs each time the user moves the mouse by one pixel.

Example: The following example demonstrates the difference between onmousemove, onmouseenter and onmouseover events used in JavaScript:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Difference between mouseover,
        mouseenter and mousemove events
    </title>
      
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
          
        div {
            margin: 15px 50px 0px 50px;
            border: 2px solid black;
            padding: 10px;
            text-align: center;
            background-color: #2ec96c;
        }
          
        p {
            color: white;
        }
          
        h3 {
            background-color: white;
            border-radius: 10px;
        }
    </style>
  
    <script>
        function over(e) {
            document.getElementById("sover").innerHTML++;
        }
  
        function enter(e) {
            document.getElementById("senter").innerHTML++;
        }
  
        function move(e) {
            document.getElementById("smove").innerHTML++;
        }
    </script>
</head>
  
<body>
    <h1>GeeksforGereks</h1>
    <h4>Mouseover, Mouseenter and Mousemove Example</h4>
    <div class="over" onmouseover="over(this)">
        <h3>Mouseover event triggered: 
          <span id="sover">0</span
          times
        </h3>
        <p>
          This event occurs every time when the mouse pointer
          enters the div element or its child elements
          (here <h3> or <p>).
        </p>
    </div>
  
    <div class="enter" onmouseenter="enter(this)">
        <h3>Mouseenter event triggered:
          <span id="senter">0</span>
          times
        </h3>
        <p>
          This event occurs only when the mouse pointer enters
          the div element.
        </p>
    </div>
  
    <div class="move" onmousemove="move(this)">
        <h3>Mousemove event triggered: 
          <span id="smove">0</span
          times
        </h3>
        <p>
          This event occurs every time the mouse pointer is
          moved over the div element.
        </p>
    </div>
  
</body>
  
</html>

chevron_right


Output:

Note: Both onmouseenter and onmouseover elements are similar except that the onmouseenter event does not propagate up the document hierarchy.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.