• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

JQuery bind() And unbind() Example

April 18, 2014 //  by Krishna Srinivasan//  Leave a Comment

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]
  • Try It On JSFIDDLE
  • 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:

Bind Event

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]
  • Try It On JSFIDDLE

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:

Unbind Event

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]
  • Try It On JSFIDDLE

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.

Category: jQueryTag: JQuery Events

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Java PushbackReader Example
Next Post: JQuery Callbacks Object jquery»

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

np.zeros

A Complete Guide To NumPy Functions in Python For Beginners

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact