jQuery & jQuery UI Documentation

jQuery & jQuery UI

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. Most properties from the original event are copied over and normalized to the new event object.

jQuery.Event Constructor

The jQuery.Event constructor is exposed and can be used when calling trigger. The new operator is optional.

Check trigger‘s documentation to see how to combine it with your own event object.

Example:

  //Create a new jQuery.Event object without the "new" operator.
  var e = jQuery.Event("click");

  // trigger an artificial click event
  jQuery("body").trigger( e );
  

As of jQuery 1.6, you can also pass an object to jQuery.Event() and its properties will be set on the newly created Event object.

Example:

  // Create a new jQuery.Event object with specified event properties.
  var e = jQuery.Event("keydown", { keyCode: 64 });

  // trigger an artificial keydown event with keyCode 64
  jQuery("body").trigger( e );
  

Event Properties

The following properties are guaranteed to be members of the event object, though some of their values may be undefined, depending on the event:

altKey, attrChange, attrName, bubbles, button, cancelable, charCode, clientX, clientY, ctrlKey, currentTarget, data, detail, eventPhase, fromElement, handler, keyCode, layerX, layerY, metaKey, newValue, offsetX, offsetY, originalTarget, pageX, pageY, prevValue, relatedNode, relatedTarget, screenX, screenY, shiftKey, srcElement, target, toElement, view, wheelDelta, which

jQuery normalizes the following properties for cross-browser consistency:

  • target
  • relatedTarget
  • pageX
  • pageY
  • which
  • metaKey

Special Properties

Certain native events may have special properties that can be accessed as properties of the event.originalEvent object. To make special properties available in all event objects, we can add them to the jQuery.event.props array.

Example:


// add the dataTransfer property for use with the native `drop` event
// to capture information about files dropped into the browser window
jQuery.event.props.push("dataTransfer");