How Many Types Of Mouse Events In JQuery?
May 3, 2022
Answers (1)
Add Answer
We will discuss the various mouse events that occur when the mouse is moved over a certain HTML element.
Mouse Events in jQuery:
- click and dblclick
- mouseenter and mouseleave
- mouseup and mousedown
- mouseover and mouseout
click and dbclick: When a user clicks on an HTML element, the click()event is fired and When a user double-clicks on an HTML element, the dblclick()event is fired.
mouseenter and mouseleave: When the mouse is put over an HTML element, the mouseenterevent occurs, and when the mouse is removed from the element, the mouseleaveevent occurs.
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 occured");
}
function leave() {
$("#key").text(
"mouseleave event has occured");
}
});
</script>
</body>
</html>
MouseUp and MouseDown events: A mouse-click is required for mouseupand mousedown.
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 occured");
}
function down()
{
$("#key").text("mousedown event has occured");
}
});
</script>
</html>
Mouseover and Mouseout: When the mouse is over a specific HTML element, these events occur.
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 occured");
}
function out()
{
$("#key").text("mouseout event has occured");
}
});
</script>
</html>
