JavaScript onmouse events

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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    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



    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

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

    chevron_right

    
    

    Output:

    On loading web page:

    Occurence of onmouseenter event:

    Occurence of onmouseleave event:

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.