The onmouse event is used to define the operation using the mouse.
JavaScript onmouse events are:
- onmouseover and onmouseout
- onmouseup and onmousedown
- onmouseenter and onmouseleave
JavaScript onmouseover and onmouseout: The onmouseover and onmouseout events occur when the mouse cursor is placed over specific element
Example 1: These events do not require a mouse click to happen
HTML
<script type="text/javascript"> Â Â Â Â function over() Â Â Â Â { Â Â Â Â Â Â Â Â document.getElementById('key').innerHTML= Â Â Â Â "Onmouseover event has occurred"; Â Â Â Â } Â Â Â Â function out() Â Â Â Â { Â Â Â Â Â Â Â Â document.getElementById('key').innerHTML= Â Â Â Â "Onmouseout event has occurred"; Â Â Â Â } </script> Â Â <h2 id="key" onmouseover="over()" onmouseout="out()"> Â Â Â Â Original Text </h2> |
Output:
Â
JavaScript onmouseup and onmousedown:
Example: These events occur when a mouse click is encountered
javascript
<script type="text/javascript"> Â Â Â Â function up() Â Â Â Â { Â Â Â Â Â Â Â Â document.getElementById("gfg").innerHTML="Welcome to GFG"; Â Â Â Â } Â Â Â Â function down() Â Â Â Â { Â Â Â Â Â Â Â Â document.getElementById("gfg").innerHTML = "Goodbye"; Â Â Â Â } </script> <p id="gfg" onmouseup="up()" onmousedown="down()">Hello</p> |
Output:
Â
JavaScript onmouseenter and onmouseleave: The 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
Example: These event do not require mouse click to happen
javascript
<script> Â Â Â Â function enter(){ Â Â Â Â Â Â Â Â Â Â Â Â document.getElementById("gfg").innerHTML="Enter"; Â Â Â Â } Â Â Â Â function leave(){ Â Â Â Â Â Â Â Â Â Â Â Â document.getElementById("gfg").innerHTML = "Exit"; Â Â Â Â } </script> <p id="gfg" onmouseenter="enter()" onmouseleave="leave()"> Â Â Â Â Welcome to GFG </p> |
Output:
Â
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
