jQuery documentation jQuery documentation| type | String | An event type |
|---|---|---|
| data | Object | (optional) Additional data passed to the event handler as event.data |
| fn | Function | A function to bind to the event on each of the set of matched elements |
Binds a handler to a particular event (like click) for each matched element. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.
<p>Hello</p>
$("p").bind("click", function(){
alert( $(this).text() );
});
alert("Hello")
Pass some additional data to the event handler.
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
alert("bar")
Cancel a default action and prevent it from bubbling by returning false from your function.
$("form").bind("submit", function() { return false; })
Cancel only the default action by using the preventDefault method.
$("form").bind("submit", function(event){
event.preventDefault();
});
Stop only an event from bubbling by using the stopPropagation method.
$("form").bind("submit", function(event){
event.stopPropagation();
});
| type | String | An event type |
|---|---|---|
| data | Object | (optional) Additional data passed to the event handler as event.data |
| fn | Function | A function to bind to the event on each of the set of matched elements |
Binds a handler to a particular event (like click) for each matched element. The handler is executed only once for each element. Otherwise, the same rules as described in bind() apply. The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false.
In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second paramter (and the handler function as the third), see second example.
<p>Hello</p>
$("p").one("click", function(){
alert( $(this).text() );
});
alert("Hello")
| type | String | (optional) An event type |
|---|---|---|
| fn | Function | (optional) A function to unbind from the event on each of the set of matched elements |
The opposite of bind, removes a bound event from each of the matched elements.
Without any arguments, all bound events are removed.
If the type is provided, all bound events of that type are removed.
If the function that was passed to bind is provided as the second argument, only that specific event handler is removed.
<p onclick="alert('Hello');">Hello</p>
$("p").unbind()
[ <p>Hello</p> ]
<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click" )
[ <p>Hello</p> ]
<p onclick="alert('Hello');">Hello</p>
$("p").unbind( "click", function() { alert("Hello"); } )
[ <p>Hello</p> ]
| type | String | An event type to trigger. |
|---|
Trigger a type of event on every matched element.
<p click="alert('hello')">Hello</p>
$("p").trigger("click")
alert('hello')
| even | Function | The function to execute on every even click. |
|---|---|---|
| odd | Function | The function to execute on every odd click. |
Toggle between two function calls every other click. Whenever a matched element is clicked, the first specified function is fired, when clicked again, the second is fired. All subsequent clicks continue to rotate through the two functions.
Use unbind("click") to remove.
$("p").toggle(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
| over | Function | The function to fire whenever the mouse is moved over a matched element. |
|---|---|---|
| out | Function | The function to fire whenever the mouse is moved off of a matched element. |
A method for simulating hovering (moving the mouse on, and off, an object). This is a custom method which provides an 'in' to a frequent task.
Whenever the mouse cursor is moved over a matched element, the first specified function is fired. Whenever the mouse moves off of the element, the second specified function fires. Additionally, checks are in place to see if the mouse is still within the specified element itself (for example, an image inside of a div), and if it is, it will continue to 'hover', and not move out (a common error in using a mouseout event handler).
$("p").hover(function(){
$(this).addClass("over");
},function(){
$(this).addClass("out");
});
| fn | Function | The function to be executed when the DOM is ready. |
|---|
Bind a function to be executed whenever the DOM is ready to be traversed and manipulated. This is probably the most important function included in the event module, as it can greatly improve the response times of your web applications.
In a nutshell, this is a solid replacement for using window.onload, and attaching a function to that. By using this method, your bound Function will be called the instant the DOM is ready to be read and manipulated, which is exactly what 99.99% of all Javascript code needs to run.
There is one argument passed to the ready event handler: A reference to the jQuery function. You can name that argument whatever you like, and can therefore stick with the $ alias without risc of naming collisions.
Please ensure you have no code in your
onload event handler, otherwise $(document).ready() may not fire.You can have as many $(document).ready events on your page as you like. The functions are then executed in the order they were added.
$(document).ready(function(){ Your code here... });
Uses both the shortcut for $(document).ready() and the argument to write failsafe jQuery code using the $ alias, without relying on the global alias.
jQuery(function($) {
// Your code using failsafe $ alias here...
});
| fn | Function | A function to bind to the scroll event on each of the matched elements. |
|---|
Bind a function to the scroll event of each matched element.
<p>Hello</p>
$("p").scroll( function() { alert("Hello"); } );
<p onscroll="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the submit event on each of the matched elements. |
|---|
Bind a function to the submit event of each matched element.
Prevents the form submission when the input has no value entered.
<form id="myform"><input /></form>
$("#myform").submit( function() {
return $("input", this).val().length > 0;
} );
Trigger the submit event of each matched element. This causes all of the functions that have been bound to thet submit event to be executed.
Note: This does not execute the submit method of the form element! If you need to submit the form via code, you have to use the DOM method, eg. $("form")[0].submit();
Triggers all submit events registered for forms, but does not submit the form
$("form").submit();
| fn | Function | A function to bind to the focus event on each of the matched elements. |
|---|
Bind a function to the focus event of each matched element.
<p>Hello</p>
$("p").focus( function() { alert("Hello"); } );
<p onfocus="alert('Hello');">Hello</p>
Trigger the focus event of each matched element. This causes all of the functions that have been bound to thet focus event to be executed.
Note: This does not execute the focus method of the underlying elements! If you need to focus an element via code, you have to use the DOM method, eg. $("#myinput")[0].focus();
<p onfocus="alert('Hello');">Hello</p>
$("p").focus();
alert('Hello');
| fn | Function | A function to bind to the keydown event on each of the matched elements. |
|---|
Bind a function to the keydown event of each matched element.
<p>Hello</p>
$("p").keydown( function() { alert("Hello"); } );
<p onkeydown="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the dblclick event on each of the matched elements. |
|---|
Bind a function to the dblclick event of each matched element.
<p>Hello</p>
$("p").dblclick( function() { alert("Hello"); } );
<p ondblclick="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the keypress event on each of the matched elements. |
|---|
Bind a function to the keypress event of each matched element.
<p>Hello</p>
$("p").keypress( function() { alert("Hello"); } );
<p onkeypress="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the error event on each of the matched elements. |
|---|
Bind a function to the error event of each matched element.
<p>Hello</p>
$("p").error( function() { alert("Hello"); } );
<p onerror="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the blur event on each of the matched elements. |
|---|
Bind a function to the blur event of each matched element.
<p>Hello</p>
$("p").blur( function() { alert("Hello"); } );
<p onblur="alert('Hello');">Hello</p>
Trigger the blur event of each matched element. This causes all of the functions that have been bound to thet blur event to be executed.
Note: This does not execute the blur method of the underlying elements! If you need to blur an element via code, you have to use the DOM method, eg. $("#myinput")[0].blur();
<p onblur="alert('Hello');">Hello</p>
$("p").blur();
alert('Hello');
| fn | Function | A function to bind to the load event on each of the matched elements. |
|---|
Bind a function to the load event of each matched element.
<p>Hello</p>
$("p").load( function() { alert("Hello"); } );
<p onload="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the select event on each of the matched elements. |
|---|
Bind a function to the select event of each matched element.
<p>Hello</p>
$("p").select( function() { alert("Hello"); } );
<p onselect="alert('Hello');">Hello</p>
Trigger the select event of each matched element. This causes all of the functions that have been bound to thet select event to be executed.
<p onselect="alert('Hello');">Hello</p>
$("p").select();
alert('Hello');
| fn | Function | A function to bind to the mouseup event on each of the matched elements. |
|---|
Bind a function to the mouseup event of each matched element.
<p>Hello</p>
$("p").mouseup( function() { alert("Hello"); } );
<p onmouseup="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the unload event on each of the matched elements. |
|---|
Bind a function to the unload event of each matched element.
<p>Hello</p>
$("p").unload( function() { alert("Hello"); } );
<p onunload="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the change event on each of the matched elements. |
|---|
Bind a function to the change event of each matched element.
<p>Hello</p>
$("p").change( function() { alert("Hello"); } );
<p onchange="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the mouseout event on each of the matched elements. |
|---|
Bind a function to the mouseout event of each matched element.
<p>Hello</p>
$("p").mouseout( function() { alert("Hello"); } );
<p onmouseout="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the keyup event on each of the matched elements. |
|---|
Bind a function to the keyup event of each matched element.
<p>Hello</p>
$("p").keyup( function() { alert("Hello"); } );
<p onkeyup="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the click event on each of the matched elements. |
|---|
Bind a function to the click event of each matched element.
<p>Hello</p>
$("p").click( function() { alert("Hello"); } );
<p onclick="alert('Hello');">Hello</p>
Trigger the click event of each matched element. This causes all of the functions that have been bound to thet click event to be executed.
<p onclick="alert('Hello');">Hello</p>
$("p").click();
alert('Hello');
| fn | Function | A function to bind to the resize event on each of the matched elements. |
|---|
Bind a function to the resize event of each matched element.
<p>Hello</p>
$("p").resize( function() { alert("Hello"); } );
<p onresize="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the mousemove event on each of the matched elements. |
|---|
Bind a function to the mousemove event of each matched element.
<p>Hello</p>
$("p").mousemove( function() { alert("Hello"); } );
<p onmousemove="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the mousedown event on each of the matched elements. |
|---|
Bind a function to the mousedown event of each matched element.
<p>Hello</p>
$("p").mousedown( function() { alert("Hello"); } );
<p onmousedown="alert('Hello');">Hello</p>
| fn | Function | A function to bind to the mousedown event on each of the matched elements. |
|---|
Bind a function to the mouseover event of each matched element.
<p>Hello</p>
$("p").mouseover( function() { alert("Hello"); } );
<p onmouseover="alert('Hello');">Hello</p>