jQuery Events

Tuesday, June 12, 2012

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 type="text/javascript">
    $(document).ready(function () {
        $("#close").click(function () {

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.

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.currentTargetThe current DOM element within the event bubbling phase
event.dataOptional data map passed to an event when the current executing handler is bound
event.delegateTargetThe 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.namespaceThe name specified when the event was triggered
event.pageXThe mouse position relative to the left edge of the document
event.pageYThe mouse position relative to the top edge of the document
event.preventDefault()Prevents the default action of the event
event.relatedTargetThe other DOM element involved in the event, if any
event.resultThe 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.targetThe DOM element that initiated the event
event.timeStampThe difference in milliseconds between January 1, 1970 and when the event is triggered
event.typeDescribes the nature of the event
event.whichWhich 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

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

JavaScript and jQuery: The Missing Manual Professional jQuery Pro jQuery