From jQuery JavaScript Library
« Back to Events
bind( type, [data], fn )
Binds a handler to a particular event (like click) for each matched element. Can also bind custom events.
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. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element.
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 parameter (and the handler function as the third), see second example.
Arguments:| type | String | |
|---|
| An event type |
| data (Optional) | Object | |
|---|
| 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
function callback(eventObject) {
this; // dom element
}
|
Examples:| Name | Type |
|---|
Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.
$("p").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.tagName);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.tagName);
});
});
</script>
<style>
p { background:yellow; font-weight:bold; cursor:pointer;
padding:5px; }
span { color:red; }
</style>
</head>
<body>
<p>Click or double click here.</p>
<span></span>
</body>
</html>
To display each paragraph's text in an alert box whenever it is clicked:
$("p").bind("click", function(){
alert( $(this).text() );
});
You can pass some extra data before the event handler:
function handler(event) {
alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)
To cancel a default action and prevent it from bubbling up, return false:
$("form").bind("submit", function() { return false; })
To 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();
});
Can bind custom events too.
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="../jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("p").bind("myCustomEvent", function(e, myName, myValue){
$(this).text(myName + ", hi there!");
$("span").stop().css("opacity", 1)
.text("myName = " + myName)
.fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
$("p").trigger("myCustomEvent", [ "John" ]);
});
});
</script>
<style>
p { color:red; }
span { color:blue; }
</style>
</head>
<body>
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
</body>
</html>