Mouse Events in jQuery
The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown, mouseenter, mouseleave etc.click()
The click() method attaches an event handler function to an HTML element. The function is executed when the user clicks on the HTML element .
$("button").click(function() {
alert("Button was clicked.");
});
<button>Click me</button>
Browser View
<html>
<head>
<title>jQuery Mouse Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$("button").click(function() {
alert("Button was clicked.");
});
});
</script>
</head>
<body>
<button>Click me</button>
</body>
</html>
dblclick()
$("button").dblclick(function(){
alert("Button was double clicked.");
});
<button>Double Click me</button>
Browser View
<html>
<head>
<title>jQuery Mouse Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e){
$("button").dblclick(function() {
alert("Button was double clicked.");
});
});
</script>
</head>
<body>
<button>Double Click me</button>
</body>
</html>
mouseenter()
This method fires when the mouse enters an HTML element . This method will attach an event handler to the mouse enter event .
$("div").mouseenter(function(){
$("div").text("Mouse Enter here");
});
<div>Waiting .....</div>
Browser ViewWaiting .....
<html>
<head>
<title>jQuery Mouse Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseenter(function(){
$("div").append("Mouse Enter here");
});
});
</script>
</head>
<body>
<br><br>
<div style="padding:2%;border: 1px solid #ccc">Waiting .....</div>
</body>
</html>
mouseleave()
$("div").mouseleave(function(){
$("div").text("Mouse left here");
});
<div>Waiting .....</div>
Browser ViewWaiting .....
<html>
<head>
<title>jQuery Mouse Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").mouseleave(function(){
$("div").text("Mouse left here");
});
});
</script>
</head>
<body>
<br><br>
<div style="padding:2%;border: 1px solid #ccc">Waiting .....</div>
</body>
</html>
hover()
The jQuery method hover(enter_function, leave_function) is triggered when the mouse enters or leaves an element. When one function is specified, it is used for both enter and exit events.
$("div").hover(function(){
$(this).css("background-color", "red");
}, function(){
$(this).css("background-color", "green");
});
<div>Mouse hover here</div>
Browser ViewMouse hover here
<html>
<head>
<title>jQuery Mouse Hover</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div").hover(function(){
$(this).css("background-color", "red");
}, function(){
$(this).css("background-color", "green");
});
});
</script>
</head>
<body>
<br><br>
<div style="padding:2%;border: 1px solid #ccc">Mouse hover here</div>
</body>
</html>
Related Topics