jQuery Mouse Events
When the users move the mouse pointer or click some element then the mouse event fires. To handle the mouse events here are some jQuery methods:
Try Now
Try Now
Try Now
Try Now
1) The click() Method
An event handler function is attached to an HTML element by the click() method and that function executes whenever the user click on the HTML element. Syntax:$(selector).click()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h2> Heading 1</h2>
<p>this is the first paragraph.</p>
<p>Click me!</p>
</body>
</html>
2) The dblclick() Method
An event handler function is attached to an HTML element by the dblclick() method and that function executes whenever the user double-clicks on the HTML element. Syntax:$(selector).dbclick()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").dblclick(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<h1> Heading 1</h1>
<p>this is a paragraph.</p>
<p>Click me!</p>
</body>
</html>
3) The mouseenter method
An event handler function is attached to an html element by the mouseenter() method and that function executes whenever the mouse pointer enters the HTML element. Syntax:$(selector).mouseenter()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p, h1").mouseenter(function(){
alert("You entered p and h1!");
});
});
</script>
</head>
<body>
<h1>this is a heading</h1>
<p>this is a paragraph.</p>
</body>
</html>
4) The mouseleave() Method
An event handler function is attached to an HTML element by the mouseleave() method and that function executes whenever the pointer of mouse leaves the html element. Syntax:$(selector).mouseleave()
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("h1").mouseleave(function(){
alert("Now you can leave h1!");
});
});
</script>
<h1> This is a heading.<h1>
<p>Enter the paragraph.</p>
</body>
</html>