JQuery Events

jQuery Event Methods

---

jQuery Event Methods

Event methods trigger, or bind a function to an event for all matching elements.
Trigger example:
$("button").click() - triggers the click event for a button element.
Binding example:
$("button").click(function(){$("img").hide()}) - binds a function to the click event.
The following table lists all the methods used to handle events.

Method	Description
bind()	Add one or more event handlers to matching elements
blur()	Triggers, or binds a function to the blur event of selected elements
change()	Triggers, or binds a function to the change event of selected elements
click()	Triggers, or binds a function to the click event of selected elements
dblclick()	Triggers, or binds a function to the dblclick event of selected elements
delegate()	Add one or more event handlers to current, or future, specified child elements of the matching elements
die()	Remove all event handlers added with the live() function
error()	Triggers, or binds a function to the error event of selected elements
event.currentTarget	The current DOM element within the event bubbling phase
event.data	Contains the optional data passed to jQuery.fn.bind when the current executing handler was bound
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.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	This attribute contains the last value returned by an event handler that was triggered by this event, unless the value was undefined
event.stopImmediatePropagation()	Prevents other event handlers from being called
event.stopPropagation()	Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event
event.target	The DOM element that initiated the event
event.timeStamp	This attribute returns the number of milliseconds since January 1, 1970, when the event is triggered
event.type	Describes the nature of the event
event.which	Which key or button was pressed for a key or button event
focus()	Triggers, or binds a function to the focus event of selected elements
focusin()	Binds a function to the focusin event of selected elements
focusout()	Binds a function to the focusout event of selected elements
hover()	Binds one or two functions to the hover event of selected elements
keydown()	Triggers, or binds a function to the keydown event of selected elements
keypress()	Triggers, or binds a function to the keypress event of selected elements
keyup()	Triggers, or binds a function to the keyup event of selected elements
live()	Add one or more event handlers to current, or future, matching elements
load()	Triggers, or binds a function to the load event of selected elements
mousedown()	Triggers, or binds a function to the mouse down event of selected elements
mouseenter()	Triggers, or binds a function to the mouse enter event of selected elements
mouseleave()	Triggers, or binds a function to the mouse leave event of selected elements
mousemove()	Triggers, or binds a function to the mouse move event of selected elements
mouseout()	Triggers, or binds a function to the mouse out event of selected elements
mouseover()	Triggers, or binds a function to the mouse over event of selected elements
mouseup()	Triggers, or binds a function to the mouse up event of selected elements
one()	Add one or more event handlers to matching elements. This handler can only be triggered once per element
ready()	Binds a function to the ready event of a document (when an HTML document is ready to use)
resize()	Triggers, or binds a function to the resize event of selected elements
scroll()	Triggers, or binds a function to the scroll event of selected elements
select()	Triggers, or binds a function to the select event of selected elements
submit()	Triggers, or binds a function to the submit event of selected elements
toggle()	Binds two or more functions to the toggle between for the click event for selected elements
trigger()	Triggers all events bound to the selected elements
triggerHandler()	Triggers all functions bound to a specified event for the selected elements
unbind()	Remove an added event handler from selected elements
undelegate()	Remove an event handler to selected elements, now or in the future
unload()	Triggers, or binds a function to the unload event of selected elements

---

jQuery Event bind() Method

Example

Hide or show a p element when a button is clicked:

$("button").bind("click",function(){
  $("p").slideToggle();
});

Try it yourself »

---

Definition and Usage

The bind() method attaches one or more event handlers for selected elements, and specifies a function to run when the events occur.

---

Bind Events and Functions to Elements

Specifies one or more event handlers to attach to selected elements, and a function to run when the event occurs.

Syntax

$(selector).bind(event,data,function)

Parameter	Description
event	Required. Specifies one or more events to attach to the elements. Multiple event values are separated by space. Must be a valid event.
data	Optional. Specifies additional data to pass along to the function
function	Required. Specifies the function to run when the event(s) occur

Alternative Syntax

$(selector).bind({event:function, event:function, ...})

Parameter	Description
{event:function, event:function, ...}	Required. Specifies an event map containing one or more event to attach to the elements, and functions to run when the events occur

jQuery Event focusin() Method

Example

Change background color of an input field when the div element (or any child elements of it) gets focus:

$("div").focusin(function(){
  $(this).css("background-color","#FFFFCC");
});;

---

Definition and Usage

The focusin event occurs when an element gets focus (when selected by a mouse click or by "tab-navigating" to it).
The focusin() method specifies a function to run when a focusin event occurs on any child element of the selected elements.
Unlike the focus() method, the focusin() method triggers if any child element gets focus.

Syntax

$(selector).focusin(function())

Parameter	Description
function()	Required. Specifies the function to run when the focusin event occurs.

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").focusin(function(){
    $(this).css("background-color","#FFFFCC");
  });
});
</script>
</head>
<body>
<div style="border: 1px solid black;padding:10px;">
First name: <input type="text" /><br />
Last name: <input type="text" />
</div>
<p>Click in the input field to get focus.</p>
</body>
</html>

jQuery Event focusout() Method

Example

Change background color of an input field when the div element (or any child elements of it) loses focus:

$("div").focusout(function(){
  $("this").css("background-color","#FFFFFF");
});

---

Definition and Usage

The focusout event occurs when an element loses focus.
The focusout() method specifies a function to run when a focusout event occurs on any child element of the selected elements.
Unlike the blur() method, the focusout() method triggers if any child element loses focus.

Syntax

$(selector).focusout(function)

Parameter	Description
function	Optional. Specifies the function to run when the focusout event occurs

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("div").focusin(function(){
    $(this).css("background-color","#FFFFCC");
  });
  $("div").focusout(function(){
    $(this).css("background-color","#FFFFFF");
  });
});
</script>
</head>
<body>
<div style="border: 1px solid black;padding:10px;">
First name: <input type="text" /><br />
Last name: <input type="text" />
</div>
<p>Click outside the div to lose focus (blur).</p>
</body>
</html>