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:

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>
Try Now

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>
Try Now

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>
Try Now

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> 
Try Now 



ADVERTISEMENT
ADVERTISEMENT