What are Events?
Events are often triggered by the user's interaction with the web page, such as when a link or button is clicked, text is entered into an input box or textarea, selection is made in a select box, key is pressed on the keyboard, the mouse pointer is moved etc. In some cases, the Browser itself can trigger the events, such as the page load and unload events.
jQuery Mouse Events
A mouse event is fired when the user click some element, move the mouse pointer etc. Here're some commonly used jQuery methods to handle the mouse events.
The click() method :
The click() method attaches an event handler function to an HTML element.
The function is executed when the user clicks on the HTML element.
The following example says: When a click event fires on a <p> element; hide the current <p> element:
Example :
$("p").click(function(){
$(this).hide();
});
The dbclick() method :
The dblclick() method attaches an event handler function to an HTML element.
The function is executed when the user double-clicks on the HTML element:
Example :
$("p").dblclick(function(){
$(this).hide();
});
The mouseenter() method :
The mouseenter() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer enters the HTML element:
Example :
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
The mouseleave() method :
The mouseleave() method attaches an event handler function to an HTML element.
The function is executed when the mouse pointer leaves the HTML element:
Example :
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
The mousedown() method :
The mousedown() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element:
Example :
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
The mouseup() method:
The mouseup() method attaches an event handler function to an HTML element.
The function is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element:
Example :
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
The hover() method:
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:
Example :
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});