Earlier we saw examples of jQuery click and jQuery double click events. They are categorised as jQuery mouse events. Today we will look into six more jQuery mouse events that you can use for various animations and effects.
- jQuery mousedown():The mousedown() method fires when you press the mouse on any HTML element. This method will attach an event handler to the mouse down event. We can do any operations by using this event handler.The syntax for using mousedown():In this, mousedown() method is used without an argument.
The handler could be any function which is executed each time the event is fired
- jQuery mouseup(): The mouseup() method fires when the mouse is released.This method will attach an event handler to the mouse up event. We can do any operations by using this event handler.The syntax for using mouseup():In this, mouseup() method is used without an argument.
The handler could be any function which is executed each time the event is fired.
- jQuery mouseenter(): The mouseenter() method fires when the mouse enters an HTML element. This method will attach an event handler to the mouse enter event. We can do any operations by using this event handler.The syntax for using mouseenter():In this, mouseenter() method is used without an argument.
The handler could be any function which is executed each time the event is fired
- jQuery mouseleave(): The mouseleave() method fires when the mouse leaves the selected element. This method will attach an event handler to the mouse leave event.The syntax for using mouseleave():In this, mouseleave() method is used without an argument.
The handler could be any function which is executed each time the event is fired
- jQuery mouseover(): The mouseover() method fires when the mouse enters a selected HTML element. The main difference between the mouseover() and mouseenter() method is; mouseover() method is fired even if the mouse enters the child element of the selected element.The syntax for using mouseover():In this, mouseover() method is used without an argument.
The handler could be any function which is executed each time the event is fired
- jQuery mousemove(): The mousemove() method fires when the mouse is moved within the selected HTML element. This method will attach an event handler to the mouse move event.The syntax for using mousemove():In this, mousemove() method is used without an argument.
The handler could be any function which is executed each time the event is fired
jQuery mouseup and mousedown example
Below is a simple example showing usage of jQuery mouse up and mouse down event methods.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <title>jQuery Mouse Up and Mouse Down</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $("div").mouseup(function(){ $( this ).text("mouse UP"); }); $("div").mousedown(function(){ $( this ).text("mouse DOWN"); }); }); </script> <style> .divClass1 { padding:5px; text-align:center; background-color:yellow; border:solid 1px; } </style> </head> <body> <div class="divClass1">Click and Hold here for DEMO, release after sometime</div> </body> </html> |
In this example, you can see that mousedown() method is triggered when you press on the <div> element and a text message “mouse Down” is displayed. When you release the mouse, mouseup() method is fired and a text message “mouse UP” is displayed.
The main difference between the click() method and these two methods is that click() method triggers only after the mouse is pressed and released. If you want to do anything in between these two actions, we can use mousedown() and mouseup().
Below is the output of above HTML page, try it yourself by clicking and holding for sometime before releasing the mouse.
jQuery mouseover, mouseenter, mouseleave and mousemove example
Below example shows the use of remaining mouse events.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <title>jQuery Mouse over, enter, leave and move example</title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <style> div { padding:5px; text-align:center; background-color:green; border:solid 2px green; margin: 25px; } p { background-color: yellow; } </style> <script> var i=0; var j=0; var m=0; var n=0; $(document).ready(function(){ $("div.over").mouseover(function(){ $(".over span").text(++i); }); $("div.enter").mouseenter(function(){ $(".enter span").text(++j); }); $("div.leave").mouseleave(function(){ $(".leave span").text(++m); }); $("div.move").mousemove(function(){ $(".move span").text(++n); }); }); </script> </head> <body> <div class="over"> <p> <b>Mouse Over:</b> You entered Green and Yellow region <b><span>0</span></b> times.</p> </div> <div class="enter"> <p> <b>Mouse Enter:</b> You entered Green region <b><span>0</span></b> times.</p> </div> <div class="leave"> <p> <b>Mouse Leave:</b> You left the div element <b><span>0</span></b> times.</p> </div> <div class="move"> <p> <b>Mouse Move:</b> Moved <b><span>0</span></b> times within the div element.</p> </div> </body> </html> |
From the above example, you can easily learn the use and difference between these methods.
In this example, you can see that mouseover() method is triggered when you enter the green region, which is the parent <div> element and the yellow region the child <p> element. Unlike the mouseover() method, mouseenter() method fires when the mouse enters the green region. The mouseleave() method triggers when you leave the selected html element and mousemove() event triggers whenever the mouse is moved within the selected element.
Below is the output of above HTML example, you can try it yourself.
These are the main jQuery mouse event methods, there are few more that we will discuss in coming posts.