Last Updated : 15 Jul, 2025
The onmouse event is used to define the operation using the mouse.
JavaScript onmouse events are:
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:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4