Mouse Events in jQuery

By: Rajesh P.S.

The MouseEvent interface delineates occurrences stemming from user interactions with a pointing device, notably a mouse. Prevailing events encompassed by this interface encompass the likes of click, dblclick, mouseup, mousedown, mouseenter, mouseleave, and others of similar nature.

click()

The click() method facilitates the attachment of an event handler function to an HTML element, wherein said function becomes executable upon the user's interaction involving a click action directed towards the designated HTML element.

$("button").click(function() { alert("Button was clicked."); });

<button>Click me</button>

Browser View

Continue Reading...

Full Source

<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()

The jQuery .dblclick() method, belonging to the library's suite of event handling functions, enables the binding of an event handler to an HTML element. This particular handler is triggered when the user performs a double-click action on the specified element.

$("button").dblclick(function(){ alert("Button was double clicked."); });

<button>Double Click me</button>

Browser View

Full Source

<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()

The jQuery .mouseenter() function, a constituent of the library's event handling capabilities, empowers the association of an event handler with an HTML element. This specific handler is activated upon the user's action of moving the cursor onto the designated element, commonly referred to as a "mouseover" event.

$("div").mouseenter(function(){ $("div").text("Mouse Enter here"); });

<div>Waiting .....</div>

Browser View

Waiting .....

Full Source

<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()

The .mouseleave() method in jQuery, an integral part of the library's event management functionalities, allows the establishment of an event handler linkage to an HTML element. This particular handler becomes operational when the user withdraws the cursor from the specified element, signifying a "mouseout" event.

$("div").mouseleave(function(){ $("div").text("Mouse left here"); });

<div>Waiting .....</div>

Browser View

Waiting .....

Full Source

<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 hover() method is used to attach one or two functions to an element, to be executed when the mouse pointer enters or leaves the element. It's a shorthand for binding the mouseenter and mouseleave events.

$(selector).hover(handlerIn, handlerOut);

selector: A valid jQuery selector to target the element(s) you want to apply the hover() event to.
handlerIn: The function to be executed when the mouse pointer enters the element. This is also known as the "mouseenter" event.
handlerOut: The function to be executed when the mouse pointer leaves the element. This is also known as the "mouseleave" event.

$(document).ready(function() { $(".hover-example").hover( function() { $(this).css("background-color", "lightblue"); }, function() { $(this).css("background-color", "white"); } ); });

In this example, when the mouse pointer enters an element with the class "hover-example", the background color of that element is changed to light blue. When the mouse pointer leaves the element, the background color is changed back to white.

Conclusion

Mouse events in jQuery, like hover(), allow you to easily define actions when the mouse enters or leaves an element. By attaching functions to these events, you can create interactive behaviors, such as changing element styles upon mouse entry and exit. Additionally, jQuery simplifies event handling by providing a single function for both "mouseenter" and "mouseleave" events when using the hover() method with one function parameter.

Next > jQuery Keyboard Events

Related Topics