bind

Syntax

.bind(eventType[, eventData], handler)

Parameters

eventType: A string containing one or more JavaScript event types such as click, submit, or custom event names
eventData (optional): A map of data passed to the event handler
handler: A function to execute

Return value

The jQuery object, for chaining purposes.

Description

Attach a handler to an event for the elements.

For example, to bind a mouseover event:


$("#objId").bind('mouseover', function(event){ 
    // code here... 
});

jQuery also has method shortcuts for creating event handlers.


$("#el").bind('click', function(event){ 
// do stuff 
});

can be rewritten as:


$("#el).click(function(event){ 
// do stuff 
});

bind click event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").bind("click", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text("Click happened! " + str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

bind the same action twice

 
<html> 
    <head>
        <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
        <script> 
            $(function(){ 
                $("#aDiv").bind('click', function(){ 
                    document.writeln("Handler 1"); 
                });
                $("#aDiv").bind('click', function(){ 
                    document.writeln("Handler 2"); 
                }); 
            });
        </script> 
    </head> 
    <body>
        <div id="aDiv" class="boxDiv">Press Me 
        </div> 
    </body> 
</html>

Click to view the demo

Bind double click event to header

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").bind("dblclick", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text("Click happened! " + str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Mouse enter event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").bind("mouseenter mouseleave", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text("Click happened! " + str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Mouse leave event

 
<html>
  <head>
    <script src="http://java2s.com/Book/JavaScriptDemo/jQuery/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
             $("h1").bind("mouseenter mouseleave", function(e){
                 var str = "( " + e.pageX + ", " + e.pageY + " )";
                 $("h1").text("Click happened! " + str);
             });
        });
    </script>
  </head>
  <body>
    <body>
       <div><h1>header 1</h1></div>
    </body>
</html>

Click to view the demo

Home
JavaScript Book
jQuery

Event: