The aim of this example is to show you how to use the jQuery bind() method. This method is used to attach a handler to an event of HTML elements.
This method has three overloaded signatures
1- .bind( eventType [, eventData ], handler )
The event type is the event name as “click”,”change”, etc. This method can bind one handler to many events, the event types must be separated by a space as “click change”.
2- .bind( eventType [, eventData ] [, preventBubble ] )
This signature is used to prevent an event where preventBubble is a boolean value, set preventBubble to false will prevent the event.
3- .bind( events )
Here we can bind many events at same time. Each event has it’s own handler. It’s syntax is like $( "selector" ).bind({event1: handler1,event2: handler2});.
Let’s look at some examples. To download the jQuery library, click here.
1. HTML
First of all you need to create a simple html document.
<!DOCTYPE html> <html> <head> <title>jQuery bind example</title> <script src="jquery-2.1.4.min.js"></script> </head> <body> <!-- HTML --> </body> </html>
2. jQuery bind examples
2.1 Changing the input text value to uppercase example
Let’s add the following simple html code.
Last Name :<input type="text" id="lastName"/>
As you can notice in the following jQuery code, the line 2 of the code binds a handler to change event.
<script type="text/javascript">
$( "#lastName" ).bind("change",function () {
var value = $(this).val().toUpperCase();
$(this).val(value);
});
</script>
The result in the browser would be:
2.2 Prevent click event example
Let’s add the following simple html code.
<a href="http://www.webcodegeeks.com/" class="link" id="link1">Link1</a><br/> <a href="http://www.webcodegeeks.com/" class="link" id="link2">Link2</a>
The following code is used to prevent the click event of the second link.
<script type="text/javascript">
$( "#link2" ).bind("click",false);
</script>
The result in the browser would be:
2.3 Binding mouse events
Let’s add the following simple html code.
<div> id="container" style="width:100px;height:100px;background-color:#f00"></div>
In the following jQuery code, the third bind() method signature is used to bind many events at the same time.
<script type="text/javascript">
$("#container").bind({
mouseenter:function(){
$(this).css("background-color","#0f0");
},
mouseleave:function(){
$(this).css("background-color","#f00");
}
});
</script>
The result in the browser would be:
3.Conclusion
The jQuery provides easy method to bind a handler to an event of HTML elements. The jQuery .bind() is used for this purpose. This method has many overloaded signatures that can be used.
4. Download
