jQuery Events

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:

Clicking the mouse
Hovering over an element
Loading a page
Submitting a form
A keystroke

Let us take a look at a common example, where you may want to hide an element when the click event occurs.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#close").click(function () {
            $("#div1").slideUp(200);
        });
    });
</script>

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 use in your web pages.

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 `mousedown` event of selected elements.
`mouseenter()`	Binds an event handler to the `mouseenter` event of selected elements.
`mouseleave()`	Binds an event handler to the `mouseleave` event of selected elements.
`mousemove()`	Binds an event handler to the `mousemove` event of selected elements.
`mouseout()`	Binds an event handler to the `mouseout` event of selected elements.
`mouseover()`	Binds an event handler to the `mouseover` event of selected elements.
`mouseup()`	Binds an event handler to the `mouseup` 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 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.