jQuery Mouse Events
This article will explain different mouse events occurring based on mouse positions on a particular HTML element.
Mouse Events in jQuery:
- mouseenter and mouseleave
- mouseup and mousedown
- mouseover and mouseout
mouseenter and mouseleave: The mouseenter event occurs when the mouse is placed over the HTML element and mouseleave event occurs when the mouse is removed from the element.
Javascript
<!DOCTYPE html> < html > < head > < script src = "jquery.js" ></ script > </ head > < body bgcolor = "cyan" > < p id = "key" >Original Text</ p > < script > $("document").ready(function () { $("#key").mouseenter(enter); $("#key").mouseleave(leave); function enter() { $("#key").text( "mouseenter event has occurred"); } function leave() { $("#key").text( "mouseleave event has occurred"); } }); </ script > </ body > </ html > |
Output:
- On loading the webpage:
- MouseEnter and MouseLeave events:
mouseup and mousedown requires a mouse-click to occur.
Javascript
<html> <body bgcolor= "#ff00ff" > <p id= "key" >Original Text</p> </body> <script src = "jquery.js" ></script> <script> $( "document" ).ready( function () { $( "#key" ).mouseup(up); $( "#key" ).mousedown(down); function up() { $( "#key" ).text( "mouseup event has occurred" ); } function down() { $( "#key" ).text( "mousedown event has occurred" ); } }); </script> </html> |
Output:
-
On landing web page:
-
MouseUp and MouseDown events:
Mouseover and Mouseout:
These events occur when the mouse is placed over some specific HTML element.
Javascript
<html> <body bgcolor= "#87FF2A" > <p id= "key" >Original Text</p> </body> <script src = "jquery.js" ></script> <script> $( "document" ).ready( function () { $( "#key" ).mouseover(over); $( "#key" ).mouseout(out); function over() { $( "#key" ).text( "mouseover event has occurred" ); } function out() { $( "#key" ).text( "mouseout event has occurred" ); } }); </script> </html> |
Output:
-
Onloading web page:
-
MouseOver and MouseOut events: