jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Event Methods

Events are actions that can be detected by your Web Application.

jQuery provides simple methods for attaching event handlers to selections.

When an event occurs, the provided function is executed.

Following are the examples events:

  • A web page loading
  • Clicking on an element
  • Taking mouse over an element
  • Submitting an HTML form
  • A keystroke on your keyboard, etc.

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, do this:

$("p").click();

The next step is to define what should happen when the event occurs. You must pass a function to the event:

$("p").click(function(){
  // action goes here...
});

This example hide paragraphs on a page when they are clicked:

Run code

This example attaches a "named" function to the click event:

Run code

Commonly Used jQuery Event Methods

$(document).ready()

The jQuery $(document).ready() method specifies a function to execute when the DOM is fully loaded.

The following example displays a message when the DOM is loaded:

Run code

click()

The jQuery click() method attaches an event handler function to the selected element.

The function is executed when the user clicks on that element:

Run code

mouseenter()

The jQuery mouseenter() method attaches an event handler function to the selected element.

The function is executed when the mouse pointer enters that element:

Run code

mouseleave()

The jQuery mouseleave() method attaches an event handler function to the selected element.

The function is executed when the mouse pointer leaves that element:

Run code

mousedown()

The jQuery mousedown() method attaches an event handler function to the selected element.

The function is executed, when the user presses mouse button over an element:

Run code

mouseup()

The jQuery mouseup() method attaches an event handler function to the selected element.

The function is executed, when mouse button is released, while the mouse is over that element:

Run code

keydown()

The jQuery keydown() method attaches an event handler function to the selected element.

The function is executed when the user is pressing a key on the keyboard:

Run code

keyup()

The jQuery keyup() method attaches an event handler function to the selected element.

The function is executed when the user releases a key on the keyboard:

Run code

hover()

The jQuery hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.

The following example changes the background color of all <p> elements when the mouse pointer hovers over:

Run code

The on() Method

jQuery provides on() method to respond to any event on the selected elements.

Using on() method we can attach one or more event handlers for the selected elements.

The following example attaches a click event to all <p> elements:

Run code

The following example attaches a mouseenter event to all <p> elements:

Run code

The following example attaches multiple event handlers to <div> element:

Run code

The off() Method

The jQuery off() method removes one or more event handlers that has been attached with the on() method.

The following example removes the mousemove event from the <div> element:

Run code

The event object

jQuery's event system normalizes the event object according to W3C standards.

The event object is guaranteed to be passed to the event handler.

Every event handling function receives an event object, which contains many properties and methods.

Run code

The following table shows all the event object methods and properties:

Method / Property Description
event.currentTarget The current DOM element within the event bubbling phase
event.data Contains the optional data passed to an event method when the current executing handler is bound
event.delegateTarget Returns the element where the currently-called jQuery event handler was attached
event.isDefaultPrevented() Returns whether event.preventDefault() was called for the event object
event.isImmediatePropagationStopped() Returns whether event.stopImmediatePropagation() was called for the event object
event.isPropagationStopped() Returns whether event.stopPropagation() was called for the event object
event.metakey Indicates whether the META key was pressed when the event fired
event.namespace Returns the namespace specified when the event was triggered
event.pageX Returns the mouse position relative to the left edge of the document
event.pageY Returns the mouse position relative to the top edge of the document
event.preventDefault() Prevents the browser from executing the default action of the selected element
event.relatedTarget Returns which element being entered or exited on mouse movement
event.result Contains the last/previous value returned by an event handler triggered by the specified event
event.stopImmediatePropagation() Prevents other event handlers from being called
event.stopPropagation() Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.target Returns which DOM element triggered the event
event.timeStamp Returns the time (in milliseconds relative to the epoch) at which the event was created
event.type Returns which event type was triggered
event.which Returns which keyboard key or mouse button was pressed for the event

jQuery Event Reference

For a complete event reference, visit our jQuery Events Reference.