JavaScript onmouse events

Last Updated : 16 Jul, 2020

The onmouse event is used to define the operation using mouse.

onmouse events in JavaScript are:

onmouseover and onmouseout
onmouseup and onmousedown
onmouseenter and onmouseleave

onmouseover and onmouseout:

onmouseover and onmouseout events occur when the mouse cursor is placed over specific element

These events do not require mouse click to happen

<html>
  <head>
    <script type="text/javascript">
     function over()
      {
        document.getElementById('key').innerHTML=
"Onmouseover event has occured";
      }
      function out()
      {
        document.getElementById('key').innerHTML=
"Onmouseout event has occured";
      }
    </script>
  </head>
  <body bgcolor="cyan">
    <h2 id="key" onmouseover="over()" 
                 onmouseout="out()">
       Original Text</h2>
  </body>
</html>

Output:

On loading webpage:

After placing mouse on element:

After removing mouse from the element:

onmouseup and onmousedown:

These events occur when a mouse click is encountered

<html>
  <head> 
     <script type="text/javascript">
      function up()
       {
         document.getElementById("img").src="up.png";
       }
      function down()
       {
         document.getElementById("img").src = "down.png";
       }
     </script>
  </head>
  <body bgcolor='yellow'>
    <img id="img" src="img.png"  
         onmouseup="up()"  
         onmousedown="down()" 
         width=500px>
  </body>
</html>

Output:

On loading web page:

Occurence of onmousedown event:

Occurence of onmouseup event:

onmouseenter and onmouseleave

onmouseenter event occurs when the mouse is placed on the element and stays until the mouse is removed from the element

onmouseleave event occurs as soon as the mouse is removed from the element

These event do not require mouse click to happen

<html>
  <head> 
    <script type="text/javascript">
      function enter()
       {
         document.getElementById(
"img").src="enter.png";
       }
      function leave()
      {
        document.getElementById(
"img").src = "leave.png";
       }
    </script>
  </head>
   <body bgcolor='yellow'>
     <img id="img" src="img.png"  
          onmouseenter="enter()"  
          onmouseleave="leave()"
          width=500px>
   </body>
</html>