JavaScript onmouse events - GeeksforGeeks

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 elementThese 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 onmouseleaveonmouseenter event occurs when the mouse is placed on the element and stays until the mouse is removed from the elementonmouseleave event occurs as soon as the mouse is removed from the elementThese 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:
onmouseover and onmouseout:onmouseover and onmouseout events occur when the mouse cursor is placed over specific elementThese 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:
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:
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 onmouseleaveonmouseenter event occurs when the mouse is placed on the element and stays until the mouse is removed from the elementonmouseleave event occurs as soon as the mouse is removed from the elementThese 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:
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:
JavaScript-Properties
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
How to append HTML code to a div using JavaScript ?
How to Open URL in New Tab using JavaScript ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills