jQuery Event Methods

jQuery is tailor-made to respond to events in an HTML page.
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
The term "fires/fired" is often used with events. Example: 
"The keypress event is fired, the moment you press a key".
Here are some common DOM events:
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: 
The next step is to define what should happen when the event fires. You must 
pass a function to the event:
$(document).ready()
The $(document).ready() method allows us to execute a function when the 
document is fully loaded. This event is already explained in the
jQuery Syntax chapter. 
click()
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:
dblclick()
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:
mouseenter()
The mouseenter() method attaches an event handler function to an HTML 
element.
The function is executed when the mouse pointer enters the HTML element:
mouseleave()
The mouseleave() method attaches an event handler function to an HTML 
element.
The function is executed when the mouse pointer leaves the HTML element:
mousedown()
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:
mouseup()
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:
hover()
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:
focus()
The focus() method attaches an event handler function to an HTML form field.
The function is executed when the form field gets focus:
blur()
The blur() method attaches an event handler function to an HTML form field.
The function 
is executed when the form field loses focus:
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:
Use the correct event to hide all <p> elements with a "click".
$("p").(function(){
  $(this).hide();
});

Start the Exercise
For a full jQuery event reference, please go to our jQuery Events Reference.
We just launchedW3Schools videos
Get certifiedby completinga course today!
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
help@w3schools.com
Your message has been sent to W3Schools.