Jquery .bind() Function Example

Jquery .bind() Function Example

By Yashwant Chavan, Views 1068, Date 05-Nov-2015

Most of the time we deal with events through Jquery functions. As the names imply, Jquery .bind() is used to simply attach a handler to an event for the elements. So let start with different examples of Jquery .bind() function.

tags jquery jquery-events

Most of the time we deal with events through Jquery functions. As the names imply, Jquery .bind() is used to simply attach a handler to an event for the elements. So let start with different examples of Jquery .bind() function.

Jquery .bind() Syntax

.bind( eventType [, eventData ], handler )
.bind( eventType [, eventData ] [, preventBubble ] )
.bind( events )

eventType String specifies one or more DOM event types.

eventData An object containing data that will be passed to the event handler.

handler A function to be executed each time whenever event is triggered.

preventBubble Boolean flag value is used to stops the event from bubbling. The default is true

In below examples. We are using .bind() event binding method whose handler is executed at once per element per event type.

Jquery .bind() click event

$( "#demo" ).bind( "click", function() {
  alert("Demo Example");
});

Jquery .bind() Multiple Events

$( "#demo" ).bind( "mouseenter mouseleave", function() {
  alert("Multiple Events with Common handler");
});

Jquery .bind() function with multiple events and separate handler

$( "#demo" ).bind({
  click: function() {
    alert("Clicked!!!!");
  },
  mouseenter: function() {
    alert("Mouse Entered!!!!");
  }
});

Jquery .bind() function with event object

Get the event object pageX and pageY properties

 $("#demo").bind("click", (function (event) {   
  alert("Click Position X = " + event.pageX + " Y = " + event.pageY);
 }));

Jquery .bind() function with event data

Inside event handler you can access the object which containing data values, like event.data.msg value.

 $("#demo").bind("click", {msg: "Hello!!!"},(function (event) {   
  alert("Click Position X = " + event.pageX + " Y = " + event.pageY + " Message Value = " + event.data.msg);
 }));

Jquery .bind() Example

<!DOCTYPE html>
<html>
   <head>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  
      <script>
         $(document).ready(function(){      
          $("#demo").bind("click", {msg: "Hello!!!"},(function (event) {   
           alert("Click Position X = " + event.pageX + " Y = " + event.pageY + " Message Value = " + event.data.msg);
          }));
           });  
          
      </script>   
   </head>
   <style>
      .box{  
      height:100px;
      width:100px;  
      padding:10px;
      margin:10px;
      float:left;
      display:inline-block;
      background:#ff9900;  
      }
   </style>
   <body>
      <h1>Jquery .bind() function Example</h1>
      <div id="container">
         <div class="box" id="demo"></div>
      </div>
   </body>
</html>

Output

jquery .bind() function example
Yashwant

Yashwant

Hi there! I am founder of technicalkeeda.com and programming enthusiast. My skills includes Java,J2EE, Spring Framework, Nodejs, PHP and lot more. If you have any idea that you would want me to develop? Lets connect: yashwantchavan[at][gmail.com]