jQuery makes it straightforward to set up event-driven responses on page elements. These events are often triggered by the end user's interaction with the page, such as when text is entered into a form element or the mouse pointer is moved. In some cases, such as the page load and unload events, the browser itself will trigger the event.
jQuery offers convenience methods for most native browser events. These methods — including .click() , .focus() , .blur() , .change() , etc. — are shorthand for jQuery's .on() method. The on method is useful for binding the same handler function to multiple events, when you want to provide data to the event handler, when you are working with custom events, or when you want to pass an object of multiple events and handlers.
// Event setup using a convenience method$( "p" ).click(function( )console.log( "You clicked a paragraph!" );>);
// Equivalent event setup using the `.on()` method$( "p" ).on( "click", function( )console.log( "click" );>);
It is important to note that .on() can only create event listeners on elements that exist at the time you set up the listeners. Similar elements created after the event listeners are established will not automatically pick up event behaviors you've set up previously. For example:
$( document ).ready(function( )// Sets up click behavior on all button elements with the alert class// that exist in the DOM when the instruction was executed$( "button.alert" ).on( "click", function( )console.log( "A button with the alert class was clicked!" );>);// Now create a new button element with the alert class. This button// was created after the click listeners were applied above, so it// will not have the same click behavior as its peers$( "" ).appendTo( document.body );>);
Consult the article on event delegation to see how to use .on() so that event behaviors will be extended to new elements without having to rebind them.
Every event handling function receives an event object, which contains many properties and methods. The event object is most commonly used to prevent the default action of the event via the .preventDefault() method. However, the event object contains a number of other useful properties and methods, including:
The mouse position at the time the event occurred, relative to the top left corner of the page display area (not the entire browser window).
The type of the event (e.g., "click").
The button or key that was pressed.
Any data that was passed in when the event was bound. For example: