Computers & ProgrammingFrontend DevelopmentjQuery

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.

EventDescription
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 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.

Leave a Comment

Your email address will not be published.

Scroll to Top