Event handling is one of the core functions in jQuery. Event handlers are methods that are called when an action occurs in HTML. These actions are also referred to as event triggers. When these events are triggered you
can then use a function to perform some action with regard to the event. There are several events that we have access to in jQuery. Here are some generic examples of actions that can trigger an event:
Let us take a look at a common example where you may want to hide an element when the click event occurs.
Click on the icon to the right to hide me!
In the previous above, a function is called when the click event for the div with an id of "div1" is triggered: $("#div1").click(function() {..other code...} ). Here are some other jQuery events that you would commonly
used in your web pages. We will look at these events in more detail in the upcoming articles.
| Event | Description |
|---|
| bind() | Add an event handler of selected elements |
| blur() | Binds an event handler to the blur event of selected elements |
| change() | Binds an event handler to the change event of selected elements |
| click() | Binds an event handler to the click event of selected elements |
| dblclick() | Binds an event handler to the dblclick event of selected elements |
| delegate() | Attach handlers to current and/or future, specified child elements of the matching elements |
| die() | Remove all event handlers previously attached with the live() function |
| error() | Binds an event handler to the error event of selected elements |
| event.currentTarget | The current DOM element within the event bubbling phase |
| event.data | Optional data map passed to an event when the current executing handler is bound |
| event.delegateTarget | The element where the called 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.namespace | The name specified when the event was triggered |
| event.pageX | The mouse position relative to the left edge of the document |
| event.pageY | The mouse position relative to the top edge of the document |
| event.preventDefault() | Prevents the default action of the event |
| event.relatedTarget | The other DOM element involved in the event, if any |
| event.result | The last value returned by an event handler that was triggered by this event |
| event.stopImmediatePropagation() | Prevents other event handlers from being called |
| event.stopPropagation() | Prevents the event from bubbling up the DOM tree |
| event.target | The DOM element that initiated the event |
| event.timeStamp | The difference in milliseconds between January 1, 1970 and when the event is triggered |
| event.type | Describes the nature of the event |
| event.which | Which key or mouse button was pressed for an event |
| focus() | Binds an event handler to the focus event |
| focusin() | Binds an event handler to the focusin event |
| focusout() | Binds an event handler to the focusout event |
| hover() | Binds two handlers to the hover event of selected elements |
| keydown() | Binds an event handler to the keydown event of selected elements |
| keypress() | Binds an event handler to the keypress event of selected elements |
| keyup() | Binds an event handler to the keyup event of selected elements |
| live() | Attach an event handler for all elements which match the current selector, now or future |
| load() | Binds an event handler to the load event of selected elements |
| mousedown() | Binds an event handler to the mouse down event of selected elements |
| mouseenter() | Binds an event handler to the mouse enter event of selected elements |
| mouseleave() | Binds an event handler to the mouse leave event of selected elements |
| mousemove() | Binds an event handler to the mouse move event of selected elements |
| mouseout() | Binds an event handler to the mouse out event of selected elements |
| mouseover() | Binds an event handler to the mouse over event of selected elements |
| mouseup() | Binds an event handler to the mouse up event of selected elements |
| off() | Remove an event handler |
| on() | Attach an event handler function for one or more events to the selected elements |
| one() | Attach a handler to an event. This handler is triggered (at most) once per element |
| ready() | Specify a function to execute when the DOM is fully loaded. |
| resize() | Binds an event handler to the resize event of selected elements |
| scroll() | Binds an event handler to the scroll event of selected elements |
| select() | Binds an event handler to the select event of selected elements |
| submit() | Binds an event handler to the submit event of selected elements |
| toggle() | Binds an event handler to the toggle between for the click event for selected elements |
| trigger() | Execute all handlers bound to the selected elements |
| triggerHandler() | Execute all handlers attached to an element for an event. |
| unbind() | Remove event handler from selected elements |
| undelegate() | Remove an event handler to selected elements, now or in the future |
| unload() | Binds an event handler to the unload event of selected elements |