Introduction to jQuery bind()
The jQuery bind() method is used to handle one or more events. This method is a built-in method in jQuery. The jQuery bind() method accepts one or more event handlers for the matched html elements from the collection of elements. This method accepts the name of the function also which is to be executed when an event occurs. Usually, the jQuery bind() method is used along with other methods or events of jQuery like click, blur, resize, focus, load, unload, scroll, etc.
Syntax:
$(selector).bind( event, data, function, map )
This method is used to attach and handle one or more events for the matched html elements from the collection of elements.
Parameters:
- Event: Event parameter is not an optional parameter, which is used to specify one or more events attach to the matched html elements from the collection of elements. To specify multiple events, each event must be separated by space.
- Data: Data parameter is an optional parameter, which is used to pass the data to the function.
- Function: Function parameter is not an optional parameter, which is used to specify the name of a function that is to be executed when an event occurs.
- Map: The map parameter is used to map function or one or more events attached to the html element.
Examples to Implement jQuery bind()
Here are some of the examples which are as follows:
Example #1
This is the html code to understand the jQuery bind() method more clearly with the following example, the bind() method used to handle the click event for the button element.
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery bind( ) method </title>
<!-- code to show the jQuery bind( ) working method -->
<script>
$(document).ready(function(){
$("#btn").bind("click", function(){
alert("The button was clicked.");
});
});
</script>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button </button>
</body>
</html>
Output:
Once we click the button,
In the above code, the bind() method is used and the specified event that is click is attached to the selected html elements that are < button > in the jQuery collection, so as in output once we click the button, the event occurs and to handle an event the function is executing.
4.5 (7,615 ratings)
View Course
Example #2
Next example is to attach and handle multiple events on the button html element, as in the below code –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery bind( ) method </title>
<style>
button {
font-weight: bold;
background: yellow;
cursor: pointer;
padding: 6px;
}
button.over {
background: red;
}
span {
color: black;
}
</style>
</head>
<body>
<h2> The button to handle click, double click, mouseenter, mouseleave events : </h2>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button </button>
<span></span>
<!-- code to show the jQuery bind( ) working method -->
<script>
$( "#btn" ).bind( "click", function( event ) {
var pos = "( " + event.pageX + ", " + event.pageY + " )";
$( "span" ).text( "This is a single click and position is " + pos );
});
$( "#btn" ).bind( "dblclick", function() {
$( "span" ).text( "This is a double click event on " + this.nodeName );
});
<!-- code to show the jQuery bind( ) working with more than one events -->
$( "#btn" ).bind( "mouseenter mouseleave", function( event ) {
$( this ).toggleClass( "over" );
});
</script>
</body>
</html>
Output:
Once we move the mouse over the “ click on this button ” button, the output is,
Once we click on the “ click on this button ” button, the output is,
Once we double on click the “click on this button” button, the output is,
Example #3
In the next example code, we rewrite the above code to pass the message as the data to the function. As shown in the below example –
Code:
<!DOCTYPE html>
<html lang= "en" >
<head>
<meta charset= "utf-8" >
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery bind( ) method </title>
<script>
function eventhandler(e) {
alert(e.data.msg);
}
<!-- code to show the jQuery bind( ) working method with passing data along with function-->
$(document).ready(function() {
$("#btn").bind("click", { msg: "You clicked the Button!" }, eventhandler)
});
</script>
<style>
button {
font-weight: bold;
background: yellow;
cursor: pointer;
padding: 6px;
}
</style>
</head>
<body>
<!-- Click on this button to see the change -->
<button id="btn"> Click on this button </button>
</body>
</html>
Output:
Once we click on the “ click on this button ” button, the output is,
Conclusion
The bind() method is a method of the jQuery, which uses to handle the different kinds of events for a specified html element. The jQuery bind() method accepts an event parameter, its values can be a click, blur, resize, focus, load, unload, scroll, etc. It also accepts the function parameter, which executes when an event occurs.
Recommended Articles
This is a guide to jQuery bind(). Here we discuss the syntax, Parameters and different examples of jQuery bind() along with code implementation. You can also go through our other related articles to learn more –
