jQuery

Events

jQuery provides both generic and specific methods to work with events.

Most of the methods return a jQuery object, so you can chain the calls.

Most of the methods accept a handler parameter. An event handler is a function that is executed when an event is fired. It has one required parameter, event object, and can have any number of extra parameters. You can pass false instead of a handler as a shorthand for a function that simply returns false.

Most of the methods accept a data parameter, that will be passed to the handler in event.data when the event is fired.

jQuery's event system normalizes the event object according to W3C standards. The event object is guaranteed to be passed to the event handler. Most properties from the original event are copied over and normalized to the new event object.

You can access to original event via eventObject.originalEvent field.

$("p").off() // remove all previously assigned handlers
      .on( "click", { foo: "bar" }, myHandler ); // add handler
      
$("div.test").on({
  click: function() {
    $( this ).toggleClass("active");
  }, mouseenter: function() {
    $( this ).addClass("inside");
  }, mouseleave: function() {
    $( this ).removeClass("inside");
  }
});

var e = jQuery.Event( "click" ); // new jQuery.Event object 
jQuery("body").trigger(e); // trigger an artificial click event
method description
on( events [,sel] [,data], handler)

Attach an event handler function for one or more events to each element.

The events is a string with one or more space-separated event types and optional namespaces, such as "click" or "keydown.myPlugin".

The sel is a css selector to filter the descendants of the selected elements that trigger the event. If the selector is null or omitted, the event is always triggered when it reaches the selected element.
on( events [,selector] [,data])

Attach an event handler function for one or more events to each element.

The events is an object in which the string keys represent one or more space-separated event types and optional namespaces, and the values represent a handler function to be called for the event(s).
off([events] [,sel] [,handler])

The events parameter is a string with one or more space-separated event types and optional namespaces, or just namespaces, for examples "click", "keydown.myPlugin", or ".myPlugin".

The sel is a CSS selector which should match the one originally passed to on() when attaching event handlers.

The handler parameter is a handler function previously attached for the event(s), or the special value false. If this parameter is not specified, all handlers will be removed.
trigger( event [,extraParams])

Execute all handlers and behaviors attached to the selected elements for the given event type.

The event parameter can be a jQuery.Event object or a string containing a JavaScript event type, such as clickclick or submit.

triggerHandler( eventType [,extraParams])

Execute all handlers attached to an element for an event. It differs from trigger():

  • will not call event() on the element it is triggered on. This means triggerHandler("submit") on a form will not call submit() on the form.
  • only affects the first selected element.
  • events triggered with triggerHandler() do not bubble up the DOM hierarchy; if they are not handled by the target element directly, they do nothing.
  • returns whatever value was returned by the last handler it caused to be executed.
keydown( [data,] handler) Bind an event handler to the "keydown" event.
keydown() Fires the "keydown" event.
keypress( [data,] handler) Bind an event handler to the "keypress" event.
keypress() Fires the "keypress" event.
keyup( [data,] handler) Bind an event handler to the "keyup" event.
keyup() Fires the "keyup" event.
click( [data,] handler) Bind an event handler to the "click" event.
click() Fires the "click" event.
contextmenu( [data,] handler) Bind an event handler to the "contextmenu" event.
contextmenu() Fires the "contextmenu" event.
dblclick( [data,] handler) Bind an event handler to the "dblclick" event.
dblclick() Fires the "click" event.
mousedown( [data,] handler) Bind an event handler to the "mousedown" event.
mousedown() Fires the "mousedown" event.
mousemove( [data,] handler) Bind an event handler to the "mousemove" event.
mousemove() Fires the "mousemove" event, that occurs when the mouse pointer moves inside the element
mouseout( [data,] handler) Bind an event handler to the "mouseout" event.
mouseout() Fires the "mouseout" event, that occurs when the mouse pointer leaves an element.
mouseover( [data,] handler) Bind an event handler to the "mouseover" event.
mouseover() Fires the "mouseover" event, that occurs when the mouse pointer enters the element.
mouseup( [data,] handler) Bind an event handler to the "mouseup" event.
mouseup() Fires the "mouseup" event, that occurs when the mouse pointer is over the element, and the mouse button is released.
hover( handlerIn, handlerOut) Bind one or two handlers to be executed when the mouse pointer enters and leaves the elements.
blur( [data,] handler) Bind an event handler to the "blur" event.
blur() Fires the "blur" event, that occurs when element loses focus. Originally, this event was only applicable to form elements, such as <input>. In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
change( [data,] handler) Bind an event handler to the "change" event.
change() Fires the "change" event, that occurs when the value of element changes. This event is limited to <input>, <textarea> and <select> elements. For select boxes, checkboxes, and radio buttons, the event is fired immediately when the user makes a selection with the mouse, but for the other element types the event is deferred until the element loses focus.
select( [data,] handler) Bind an event handler to the "select" event.
select() Fires the "select" event, that occurs when the user makes a text selection inside <input type="text"> fields and <textarea> boxes.
submit( [data,] handler) Bind an event handler to the "submit" event.
submit() Fires the "submit" event, that occurs when the user is attempting to submit a form. It can only be attached to <form> elements. Forms can be submitted either by clicking an explicit <input type="submit">, <input type="image">, or <button type="submit">, or by pressing Enter when certain form elements have focus.