When we add an event to an element, we call this binding an event to that element. The binding means, attaching an event to the element. The Bind()event attaches one or more event handlers to the matching elements and specifies a function when the event occurs and also you can attach event handler directly to the elements. The call to bind() event occurs when those elements must exist at the point. When we use this, the event listener intimates JavaScript interpreter what function to call in the script. It is useful for adding event triggers and handlers to DOM elements. We can bind events to DOM elements such as submit, mouseenter, mouseleave, mouseover, mouseout etc.
The same way we can use the unbind() method to detach the events from the component. It is just like removing the earlier binding events.
JQuery Bind() Syntax
[code lang=”xml”]
$(selector).bind(event, [data],function)
[/code]
It contains following parameters :
- event: This is required parameter. It attaches one or more events the elements. It contains event types such as click, submit or custom event names.
- data: This is optional parameter. It contains data that will be passed to event handler.
- function: This is required parameter. It defines function which executes each time when event is triggered.
JQuery Bind() Example
[code lang=”xml”]
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Bind Event</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").bind("mouseover mouseout", function() {
$("p").toggleClass("mystyle");
});
});
</script>
<style type="text/css">
mystyle {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
<p>Welcome to JQuery!!! </p>
</body>
</html>
[/code]
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- The bind() event occurs when one or more event handlers attach the selected match elements and specifies a function when the event occurs.
- The bind() event uses mouseover event which occurs when the mouse is moved over a particular element and mouseout event occurs when the mouse is moved out of a particular element.
- We have used toggleClass() which add or remove one or more classes from each element in the set of matched elements and mystyle is class name defined inside toggle class method.
- The mystyle class uses font-size and color for the particular element when mouse pointer placed over a particular element.
- In the body , we have declared the particular element on which mouse events occurs.
When you run the above example, you would get the following output:
Using Unbind() Event
This event is used to detached the events from the elements.It tells web browser to no longer listen for the particular event for the element. It is just like removing the earlier binding events. If no arguments are specified, then unbind() event removes all the events from the specified elements. It works with every events in jQeury.
JQuery Unbind() Syntax
[code lang=”xml”]
$(selector).unbind(event,function)
[/code]
It contains following parameters :
- event: This is required parameter. It detaches one or more events from the elements. It contains event types such as click, submit or custom event names.
- function: This is required parameter. It defines function which is no longer to be executed and which is to be unbind from the specified event.
JQuery Unbind() Example
[code lang=”xml”]
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Bind Event</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").unbind("mouseover mouseout", function() {
$("p").toggleClass("mystyle");
});
});
</script>
<style type="text/css">
mystyle {
font-size: 150%;
color: red;
}
</style>
</head>
<body>
<p>Welcome to JQuery!!! </p>
</body>
</html>
[/code]
The above example is same as bind() event, but only one change is that we are using unbind() event in the place of bind() event to remove event handlers from the selected elements and remaining part will be as same as mentioned in the bind() event. After executing the code, When you keep mouse pointer on the line which will get display on the output, it would not toggle the text line because unbind() event is used in the program.
When you run the above example, you would get the following output:
Multiple Bind Events Example
You can also handle multiple events by using bind() method as shown in the following example:
[code lang=”xml”]
<!DOCTYPE html>
<head>
<meta charset="ISO-8859-1">
<title>Handling Multiple Events</title>
</head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("p").bind("click",function(){
alert("Welcome to JQuery!!!");
});
$("p").bind("click",function(){
alert("It is JavaScript library…");
});
$("p").bind("click",function(){
alert("It is easier to use JavaScript in web site..");
});
});
</script>
</head>
<body>
<p>Click Here!!! </p>
</body>
</html>
[/code]
jQuery allows to bind multiple event handlers using bind() event. Above example shows, binding three different event handlers to a click function where you can call bind() function three different times. When click event occurs, the first event handler will be called, followed by second and followed by third using alert box.
Leave a Reply