jQuery Mouse Events
Last Updated :
13 Jun, 2022
This article will explain different mouse events occurring based on mouse positions on a particular HTML element.
Mouse Events in jQuery:
- mouseenter and mouseleave
- mouseup and mousedown
- mouseover and mouseout
mouseenter and mouseleave: The mouseenter event occurs when the mouse is placed over the HTML element and mouseleave event occurs when the mouse is removed from the element.
Javascript
<!DOCTYPE html>
< html >
< head >
< script src = "jquery.js" ></ script >
</ head >
< body bgcolor = "cyan" >
< p id = "key" >Original Text</ p >
< script >
$("document").ready(function () {
$("#key").mouseenter(enter);
$("#key").mouseleave(leave);
function enter() {
$("#key").text(
"mouseenter event has occurred");
}
function leave() {
$("#key").text(
"mouseleave event has occurred");
}
});
</ script >
</ body >
</ html >
|
Output:
- On loading the webpage:
- MouseEnter and MouseLeave events:
MouseUp and MouseDown events:
mouseup and mousedown requires a mouse-click to occur.
Javascript
<html>
<body bgcolor= "#ff00ff" >
<p id= "key" >Original Text</p>
</body>
<script src = "jquery.js" ></script>
<script>
$( "document" ).ready( function ()
{
$( "#key" ).mouseup(up);
$( "#key" ).mousedown(down);
function up()
{
$( "#key" ).text( "mouseup event has occurred" );
}
function down()
{
$( "#key" ).text( "mousedown event has occurred" );
}
});
</script>
</html>
|
Output:
-
On landing web page:
-
MouseUp and MouseDown events:
Mouseover and Mouseout:
These events occur when the mouse is placed over some specific HTML element.
Javascript
<html>
<body bgcolor= "#87FF2A" >
<p id= "key" >Original Text</p>
</body>
<script src = "jquery.js" ></script>
<script>
$( "document" ).ready( function ()
{
$( "#key" ).mouseover(over);
$( "#key" ).mouseout(out);
function over()
{
$( "#key" ).text( "mouseover event has occurred" );
}
function out()
{
$( "#key" ).text( "mouseout event has occurred" );
}
});
</script>
</html>
|
Output:
Share your thoughts in the comments
Please Login to comment...