jQuery Events

jQuery is specially designed for event handling.

What is an event?

The response of a page to different visitors is called an event.

An event handler refers to the method that is called when certain events occur in HTML.

Example:

  • Moving the mouse over an element.
  • Selecting a radio button
  • Clicking an element

The term "trigger" (or "fire") is often used in events. For example: "When you press a key, the keypress event is triggered."

Common DOM Events:

Mouse Events Keyboard Events Form Events Document/Window Events
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave   blur unload
hover      

jQuery Event Method Syntax

In jQuery, most DOM events have an equivalent jQuery method.

Specify a click event on the page:

$("p").click();

The next step is to define the event triggered after clicking. You can achieve this with an event function:

$("p").click(function(){ //Code to be executed after the action is triggered!! });

Commonly Used jQuery Event Methods

$(document).ready()

The $(document).ready() method allows us to execute a function after the document is fully loaded. This event method has already been mentioned in thejQuery Syntaxchapter.

click()

The click() method calls a function when the button click event is triggered.

This function is executed when the user clicks an HTML element.

In the example below, when the click event is triggered on a <p> element, the current <p> element is hidden:

Example

$("p").click(function(){ $(this).hide(); });

Try it Yourself »

dblclick()

When an element is double-clicked, the dblclick event occurs.

The dblclick() method triggers the dblclick event, or specifies a function to run when the dblclick event occurs:

Example

$("p").dblclick(function(){ $(this).hide(); });

Try it Yourself »

mouseenter()

When the mouse pointer passes over an element, the mouseenter event occurs.

The mouseenter() method triggers the mouseenter event, or specifies a function to run when the mouseenter event occurs:

Example

$("#p1").mouseenter(function(){ alert('Your mouse has moved over the element with id="p1"!'); });

Try it Yourself »

mouseleave()

When the mouse pointer leaves an element, the mouseleave event occurs.

The mouseleave() method triggers the mouseleave event, or specifies a function to run when the mouseleave event occurs:

Example

$("#p1").mouseleave(function(){ alert("Goodbye, your mouse has left the paragraph."); });

Try it Yourself »

mousedown()

When the mouse pointer moves over an element and the mouse button is pressed, the mousedown event occurs.

The mousedown() method triggers the mousedown event, or specifies a function to run when the mousedown event occurs:

Example

$("#p1").mousedown(function(){ alert("Mouse button pressed on the paragraph!"); });

Try it Yourself »

mouseup()

When the mouse button is released over an element, the mouseup event occurs.

The mouseup() method triggers the mouseup event, or specifies a function to run when the mouseup event occurs:

Example

$("#p1").mouseup(function(){ alert("Mouse button released on the paragraph."); });

Try it Yourself »

hover()

The hover() method is used to simulate the cursor hovering event.

When the mouse moves over an element, the first specified function (mouseenter) is triggered; when the mouse moves out of this element, the second specified function (mouseleave) is triggered.

Example

$("#p1").hover( function(){ alert("You entered p1!"); }, function(){ alert("Bye! Now you left p1!"); } );

Try it Yourself »

focus()

When an element gains focus, the focus event occurs.

When an element is selected by a mouse click or focused via the Tab key, the element gains focus.

The focus() method triggers the focus event, or specifies a function to run when the focus event occurs:

Example

$("input").focus(function(){ $(this).css("background-color","#cccccc"); });

Try it Yourself »

blur()

When an element loses focus, the blur event occurs.

The blur() method triggers the blur event, or specifies a function to run when the blur event occurs:

Example

$("input").blur(function(){ $(this).css("background-color","#ffffff"); });

Try it Yourself »

Other Extensions