jQuery Events
jQuery Events
All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens.
Examples:
- moving a mouse over an element
- selecting a radio button
- clicking on an element
jQuery is tailor-made to respond to events in an HTML page.
jQuery Syntax For Event Methods
In jQuery, most DOM events have an equivalent jQuery method.
To assign a click event to all paragraphs on a page, you can do this:
$("p").click();
The next step is to define what should happen when the event fires. You must pass a function to the event:
$("p").click(function(){
// action goes here!!
});
jQuery $(document).ready() Event
The $(document).ready() method is used to prevent any jQuery code from running before the document is finished loading (is ready).
It is good practice to wait for the document to be fully loaded and ready before
working with it.
This event is already explained in the jQuery Syntax chapter.
jQuery click() Event
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:
jQuery dblclick() Event
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:
jQuery mouseenter() Event
The mouseenter() method attaches an event handler function to an HTML
element.
The function is executed when the mouse pointer enters the HTML element:
jQuery mouseleave() Event
The mouseleave() method attaches an event handler function to an HTML
element.
The function is executed when the mouse pointer leaves the HTML element:
jQuery mousedown() Event
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:
jQuery mouseup() Event
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:
jQuery hover() Event
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!");
});
Try it Yourself »
jQuery focus() Event
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
Example
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
Try it Yourself »
jQuery blur() Event
The blur() method attaches an event handler function to an HTML form field.
The function is executed when the form field loses focus:
Example
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
Try it Yourself »
The on() Method
The on() method attaches one or more event handlers for the selected elements.
Attach a click event to a <p> element:
Attach multiple event handlers to a <p> element:
Example
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
Try it Yourself »
jQuery Exercises
jQuery Event Methods
For a full jQuery event reference, please go to our jQuery Events Reference.
