Web Development with jQuery (2015)
Part IV. Appendices
Appendix D. Events
The following table contains all the event methods supported by jQuery as listed in jQuery's official documentation at www.jquery.com.
All the event methods return the jQuery object.
Method |
Description |
Page Load |
|
ready(function) |
Attaches a function that is executed when the DOM is completely loaded; that is, all markup, CSS, and JavaScript are loaded, but not necessarily images. |
Event Handling |
|
bind(events, function) |
Attaches a function that is executed when the event occurs. Multiple events can be specified in the event argument; if you specify multiple events, each event must be separated with a single space. |
bind(events[, data][,function]) |
The bind() method accepts an optional data argument. The data argument is an object that allows you to pass custom data to the event, which is available in the event handler, in the event argument as event.data. |
bind(events[, data][, preventBubble]) |
When calling the bind() method with the preventBubble argument, an event handler is automatically created, which prevents bubbling, as well as the default action. bind(eventName, false); or bind(eventName); is equivalent to creating the following: bind( eventName, function(event) { event.preventDefault(); |
event.stopPropagation(); } ); The on() method is preferred over bind() in jQuery 1.7 or later. |
|
bind(events) |
Allows multiple events to be bound by passing an object where the property is the name of the event and the value is the callback function. For example: bind({ click : function(event) { |
}, mouseover : function(event) { }, mouseout : function(event) { } |
|
})
|
|
delegate(selector, events, function) |
Provides the same functionality as the on() method in jQuery 1.4.2 and later. The on() method is preferred over delegate() in jQuery 1.7 or later. |
delegate(selector, events, data, function) |
Provides the same functionality as the on() method in jQuery 1.4.2 and later. The on() method is preferred over delegate() in jQuery 1.7 or later. |
delegate(selector, events) |
Provides the same functionality as the on() method in jQuery 1.4.2 and later. The on() method is preferred over delegate() in jQuery 1.7 or later. |
off(events[, selector][, function]) |
Removes an event handler. |
off(events[, selector]) |
Removes an event handler. |
off() |
Removes all event handlers. |
on(events[, selector][, data], function) |
Attaches an event handler for the selected elements; the elements referenced in the selection must exist at the time on() is called. |
on(events[, selector][, data]) |
Attaches an event handler for the selected elements; the elements referenced in the selection must exist at the time on() is called. |
one(events, function) |
Attaches a function to be fired for the specified event. The function is executed only once. Subsequent events will not execute the specified function. |
one(events[, data], function) |
The one() method accepts an optional data argument. The data argument is an object that is passed to the event object of the attached function as event.data. |
one(events[, selector][,data], function) |
Attaches an event handler that is always executed just once per element and event. |
trigger(events) |
Triggers the specified event on matched elements. |
trigger(events, parameters) |
The trigger() method accepts an optional data argument. The data argument is an object that is passed to event object functions being triggered as event.data. |
triggerHandler(events) |
Triggers the specified event on matched elements while canceling the browser's default action for any given event. |
triggerHandler(events, parameters) |
The triggerHandler() method accepts an optional data argument. The data argument is an object that is passed to event object functions being triggered as event.data. |
unbind() |
Removes all events from the selected element(s). |
unbind(events) |
Removes the specified event from the selected element(s). |
unbind(events, function) |
Removes by event and event handler. |
unbind(events, false) |
Removes the specified events. |
undelegate() |
Provides the same functionality as the off() method in jQuery 1.4.2 and later. The off() method is preferred over undelegate() in jQuery 1.7 or later. |
undelegate(selector, events) |
Provides the same functionality as the off() method in jQuery 1.4.2 and later. The off() method is preferred over undelegate() in jQuery 1.7 or later. |
undelegate(selector, events, function) |
Provides the same functionality as the off() method in jQuery 1.4.2 and later. The off() method is preferred over undelegate() in jQuery 1.7 or later. |
undelegate(namespace) |
Provides the same functionality as the off() method in jQuery 1.4.2 and later. The off() method is preferred over undelegate() in jQuery 1.7 or later. |
Event Helpers |
|
hover(mouseoverFunction,mouseoutFunction) |
Attaches a function for mouseover and a function for mouseout to the same element. |
toggle(function1, function2[,function3]. . .) |
Upon first click, the first function is executed; upon second click, the second function is executed; upon third click, the third function is executed, and so on. A minimum of two functions must be specified; an unlimited number of total functions may be specified. |
Event Methods |
|
blur() |
Triggers the blur event of each selected element. |
change() |
Triggers the change event of each selected element. |
click() |
Triggers the click event of each selected element. |
dblclick() |
Triggers the dblclick (double-click) event of each selected element. |
error() |
Triggers the error event of each selected element. |
focus() |
Triggers the focus event of each selected element. |
focusin() |
Triggers the focusin event of each selected element. |
focusout() |
Triggers the focusout event of each selected element. |
keydown() |
With no arguments, the keydown event of each selected element is triggered. |
keypress() |
Triggers the keypress event of each selected element. |
keyup() |
Triggers the keyup event of each selected element. |
load(function) |
Attaches a function to the load event of each selected element. Optionally, custom data can be passed if the data argument is specified, which is available in turn as event.data. |
mousedown() |
Triggers the mousedown event of each selected element. |
mouseenter() |
Triggers the mouseenter event of each selected element. |
mouseleave() |
Triggers the mouseleave event of each selected element. |
mousemove() |
Triggers the mousemove event of each selected element. |
mouseout() |
Triggers the mouseout event of each selected element. |
mouseover() |
Triggers the mouseover event of each selected element. |
mouseup() |
Triggers the mouseup event of each selected element. |
resize() |
Triggers the resize event of each selected element. |
scroll() |
Triggers the scroll event of each selected element. |
select() |
Triggers the select event of each selected element. |
submit() |
Triggers the submit event of each selected element. |
unload() |
Triggers the unload event of each selected element. |
Event Object
The following table documents event methods and properties supported both by jQuery's event object provided to jQuery events and by regular JavaScript events without jQuery. You can access the regular JavaScript event object from any jQuery event object by using the event.originalEvent object. If you find a method or property listed below missing from the jQuery event object, it is likely to be found within the event.originalEvent object.
Method/Property |
Description |
event.altKey |
Indicates whether the Option key (Mac) or Alt key (Windows) is being pressed. |
event.bubbles |
Indicates whether the event bubbles up through the DOM. |
event.cancelable |
Indicates whether the event can be canceled. |
event.clientX, event.clientY |
Provides x, y coordinates, indicating where the mouse cursor is located relative to the window. |
event.createEvent() |
Creates a new event, which must be initialized by calling its init() method. |
event.ctrlKey |
Indicates whether the Control key is being pressed (Mac and Windows). |
event.currentTarget |
The DOM element that is presently the target of the event. Usually this refers to the same element as the this keyword. |
event.data |
An object passed to the function acting as an event handler. See the data argument specified for various methods under “Event Handling” in the previous table. |
event.defaultPrevented |
Indicates whether the event.preventDefault() method has been called. |
event.detail |
A numeric property that indicates how many times a mouse has been clicked in the same location. Applies to the click, dblclick, mousedown, and mouseup events. |
event.delegateTarget |
A reference to the element the event handler is ultimately attached to. |
event.eventPhase |
A numeric property that indicates the phase of the event execution process. event.NONE = 0 event.CAPTURING_PHASE = 1 event.AT_TARGET = 2 event.BUBBLING_PHASE = 3 |
event.initKeyEvent() |
The initKeyEvent() method is used to initialize the value of an event created using document.createEvent. |
event.initMouseEvent() |
The initMouseEvent() method initializes the value of a mouse event when it's been created using document.createEvent. |
event.initUIEvent() |
The initUIEvent() method initializes a UI event when it has been created, for example, through document.createEvent. |
event.isChar |
Indicates whether the event produced a keyCode. |
event.isDefaultPrevented() |
Determines whether preventDefault() was ever called on the event object. |
event.isImmediatePropagationStopped() |
Determines whether stopImmediatePropagation() was ever called on the event object. |
event.isPropagationStopped() |
Determines whether stopPropagation() was ever called on the event object. |
event.keyCode |
The numeric offset representing which key on the keyboard is currently being pressed. |
event.layerX, event.layerY |
Coordinates of the event relative to the current layer. |
event.metaKey |
Whether the Command key (Mac) or Windows key (Windows) is pressed. |
event.namespace |
The namespace specified when the event was triggered. |
event.originalEvent |
A copy of the browser's original event object, before jQuery's modifications were made to it. |
event.originalTarget |
The original target of the event before any retargeting. |
event.pageX, event.pageY |
The mouse coordinates relative to the document. |
event.preventDefault() |
Prevents the browser's default action for a given event, for example, submitting a form or navigating to the href attribute of an <a> element. |
event.relatedTarget |
Finds another element involved in the event, if applicable. |
event.result |
The last value returned by an event handler that was triggered by this event, unless the value was undefined. |
event.screenX, event.screenY |
Returns the horizontal coordinates of the event within the context of the entire screen. |
event.shiftKey |
Whether the Shift key (Mac and Windows) is pressed. |
event.stopImmediatePropagation() |
Prevents other attached listeners for the same event from being called. |
event.stopPropagation() |
Stops the propagation of an event from a child or descendent element to its parent or ancestor elements, which prevents the same event from running on the later ancestor elements. |
event.target |
The DOM element that triggered the event. |
event.timeStamp |
The difference in milliseconds between the time the browser created the event and the UNIX epoch (January 1st, 1970, 12:00:00 AM). |
event.type |
Provides the type of event, for example, click, mouseover, keyup, and so on. |
event.view |
Returns the Window object the event happened in. In nonbrowsers, this may be referred to as the AbstractView. |
event.which |
Returns the numeric keyCode of the key pressed, or the character code, or charCode, for an alphanumeric key that was pressed. |