jQuery Events
jQuery is specially designed for event handling.
What is an Event?
The response of a webpage to different visitors is called an event.
An event handler refers to the method that is called when a certain event occurs in HTML.
Examples:
Moving the mouse over an element.
Selecting a radio button.
Clicking an element.
The term "trigger" (or "fire") is often used in events, for example: "The keypress event is triggered when you press a key."
Common DOM Events:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
jQuery Event Method Syntax
In jQuery, most DOM events have an equivalent jQuery method.
Specify a click event on a page:
$("p").click();
Next, define the event that will be triggered after the click. You can achieve this with an event function:
$("p").click(function(){
// Code to be executed after the action is triggered!!
});
Common jQuery Event Methods
$(document).ready()
The $(document).ready() method allows us to execute a function after the document is fully loaded. This event method was mentioned in the jQuery Syntax section.
click()
The click() method is a function that is called when a button click event is triggered.
This function executes when a user clicks an HTML element.
In the following example, when a click event is triggered on a <p> element, the current <p> element is hidden:
Example
$("p").click(function(){
$(this).hide();
});
dblclick()
The dblclick event occurs when an element is double-clicked.
The dblclick() method triggers the dblclick event, or specifies a function to run when a dblclick event occurs:
Example
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
The mouseenter event occurs when the mouse pointer enters an element.
The mouseenter() method triggers the mouseenter event, or specifies a function to run when a mouseenter event occurs:
Example
$("#p1").mouseenter(function(){
alert('Your mouse has entered the element with id="p1"!');
});
mouseleave()
The mouseleave event occurs when the mouse pointer leaves an element.
The mouseleave() method triggers the mouseleave event, or specifies a function to run when a mouseleave event occurs:
Example
$("#p1").mouseleave(function(){
alert("Goodbye, your mouse has left the paragraph.");
});
mousedown()
The mousedown event occurs when the mouse pointer is over an element, and a mouse button is pressed.
The mousedown() method triggers the mousedown event, or specifies a function to run when a mousedown event occurs:
Example
$("#p1").mousedown(function(){
alert("The mouse button was pressed on the paragraph!");
});
mouseup()
The mouseup event occurs when a mouse button is released over an element.
The mouseup() method triggers the mouseup event, or specifies a function to run when a mouseup event occurs:
Example
$("#p1").mouseup(function(){
alert("The mouse button was released over the paragraph.");
});
hover()
The hover() method simulates hovering events.
When the mouse moves over an element, the specified first function (mouseenter) is triggered; when the mouse moves out of the element, the specified second function (mouseleave) is triggered.
Example
$("#p1").hover(
function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
}
);
focus()
The focus event occurs when an element gets focus.
The element gets focus when selected by a mouse click or by tabbing navigation.
The focus() method triggers the focus event, or specifies a function to run when a focus event occurs:
Example
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
blur()
The blur event occurs when an element loses focus.
The blur() method triggers the blur event, or specifies a function to run when a blur event occurs:
Example
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});