ドキュメント

Events/bind

From jQuery JavaScript Library

Jump to: navigation, search

« Back to Events

bind( type, [data], fn )

Binds a handler to one or more events (like click) for each matched element. Can also bind custom events.
Possible event values: blur, focus, load, resize, scroll, unload, beforeunload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, ready

The event handler is passed an event object that you can use to prevent default behaviour. To stop both default action and event bubbling, your handler has to return false. Note that this will prevent handlers on parent elements from running but not other jQuery handlers on the same element. The full list of properties that are available on the event object can be found in the jQuery.Event documentation.

In most cases, you can define your event handlers as anonymous functions (see first example). In cases where that is not possible, you can pass additional data as the second parameter (and the handler function as the third), see second example.

jQuery also supports namespaced events. These allow you to trigger or unbind specific groups of bound handlers without having to reference them directly.

Arguments:

typeString
One or more event types separated by a space
data (Optional)Object
Additional data passed to the event handler as event.data
fnFunction
A function to bind to the event on each of the set of matched elements, passed an event object.
function callback(eventObject) {
  this; // dom element
}
Examples:

Handle click and double-click for the paragraph. Note: the coordinates are window relative so in this case relative to the demo iframe.

    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").bind("click", function(e){
      var str = "( " + e.pageX + ", " + e.pageY + " )";
      $("span").text("Click happened! " + str);
    });
    $("p").bind("dblclick", function(){
      $("span").text("Double-click happened in " + this.tagName);
    });
    $("p").bind("mouseenter mouseleave", function(e){
        $(this).toggleClass("over");
    });

  });
  </script>
  <style>
  p { background:yellow; font-weight:bold; cursor:pointer; 
      padding:5px; }
  p.over { background: #ccc; }
  span { color:red; }
  </style>
</head>
<body>
  <p>Click or double click here.</p>
  <span></span>
</body>
</html>

To display each paragraph's text in an alert box whenever it is clicked:

$("p").bind("click", function(){
  alert( $(this).text() );
});

You can pass some extra data before the event handler:

function handler(event) {
  alert(event.data.foo);
}
$("p").bind("click", {foo: "bar"}, handler)

To cancel a default action and prevent it from bubbling up, return false:

$("form").bind("submit", function() { return false; })

To cancel only the default action by using the preventDefault method.

$("form").bind("submit", function(event){
  event.preventDefault();
});

Stop only an event from bubbling by using the stopPropagation method.

$("form").bind("submit", function(event){
  if( event.stopPropagation ) { event.stopPropagation(); } //For 'Good' browsers
  else { event.cancelBubble = true; } //For IE
});

Can bind custom events too.

    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    
    $("p").bind("myCustomEvent", function(e, myName, myValue){
      $(this).text(myName + ", hi there!");
      $("span").stop().css("opacity", 1)
               .text("myName = " + myName)
               .fadeIn(30).fadeOut(1000);
    });
    $("button").click(function () {
      $("p").trigger("myCustomEvent", [ "John" ]);
    });

  });
  </script>
  <style>
  p { color:red; }
  span { color:blue; }
  </style>
</head>
<body>
  <p>Has an attached custom event.</p>
  <button>Trigger custom event</button>
  <span style="display:none;"></span>
</body>
</html>

NameType