Skip to content
Related Articles

Related Articles

JavaScript onmouse events
  • Last Updated : 16 Jul, 2020

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

onmouse events in JavaScript are:

  1. 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:

  2. 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:

  3. 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>

    Output:

    On loading web page:

    Occurence of onmouseenter event:

    Occurence of onmouseleave event:

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :