jQuery bind()

0 1329

This function is used In jQuery to attach one or more event handlers to one or more HTML DOM elements.
It binds a function to run when the event occurs.
The working of this function is the same as the working of jQuery on() method.

Related Topics:

jQuery click

jQuery dblclick

jQuery bind

Syntax:

$(selector).bind(event,data,function,map);

Parameter description:

event: This parameter represents one or more events to attach to the elements. Multiple values can be added by separating each of them by commas. It is a required parameter.
data: This parameter represents the additional data to pass along to the function. It is optional.
function: This represents a function that is run when the event occurs. It is a required parameter.
map: This represents an event map that contains one or more events to attach to the elements, and also contains functions to run when the event occurs

Example 1

In this example, we learn how to attach multiple events to an element.

<html>
 <head>
 <title>jQuery Example</title>
 <script type = "text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
<script>
$(document).ready(function(){
  $(".bt").dblclick(function(){
  $(this).css("background","green");
    $("body").css("background","yellow");
  });

   $("p").dblclick(function(){
    $(this).css("display","none");
  });
});
</script>
 </head>
 <body>

<h2>jQuery Bind event Example</h2>

<p>Double click on me to hide me.</p>
<p>Double click on me to hide me.</p>
<button class="bt">Double Click me to change the color of background</button>

 </body>
</html>

Output:

After, hover the cursor on paragraph,

Example 2

In this example, we will learn how to use an event map to attach several events/functions to the selected elements.

<html>
 <head>
 <title> jQuery Example </title>
 <script type = "text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
	  <style>
	  .my2 {
font-size: 35;
  color: green;
}
</style>
<script>
$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle(); $(this).css("background","green");},
    mouseover:function(){$("body").css("background-color", "gray");$("h2").toggleClass("my2");},
    mouseout:function(){$("body").css("background-color", "#FFFFFF");$("h2").toggleClass("my2");}
  });
});
</script>
 </head>
 <body>

<h2> jQuery Bind event Example </h2>
<p> This is a paragraph. </p>
<button> Click me! </button>
 </body>
</html>

Output:

When you hover the cursor on the button,

Example 3

In this example, we will learn how to pass along data to a custom named event handler.

<html>
 <head>
 <title>jQuery Example</title>
 <script type = "text/javascript"
        src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      </script>
<script>
function myFunction(e){
  alert(e.data.msg);
}

$(document).ready(function(){
  $("button").bind("click", {msg: "You just clicked the button!"}, myFunction)
});
</script>
 </head>
 <body>

<h2>jQuery Bind event Example</h2>
<button>Click me!</button>
 </body>
</html>