.bind()

jQuery 1.7 現在、ドキュメントへイベント・ハンドラをアタッチするには、.on() メソッドが望ましいとされています。以前のバージョンでは、要素に直接イベントハンドラをアタッチするために、.bind() メソッドが使用されていました。 ハンドラは、jQueryオブジェクトで現在選択されている要素にアタッチされているので、これらの要素は .bind() への呼び出しが発生した時点で存在していなければなりません。 より柔軟なイベントバインディングについては、.on() または .delegate()での event delegation に関する議論を参照して下さい。

どのような文字列でも、eventTypeには正当です; 文字列がネイティブDOMイベントの名前でない場合は、ハンドラはカスタムイベントにバインドされます。 これらのイベントは、ブラウザから呼び出されることはありませんが、 .trigger() または .triggerHandler() を使用して、他のJavaScriptコードから手動でトリガすることができます。

eventType 文字列にピリオド (.) が含まれている場合、イベントは名前空間化されています。 ピリオド文字は、名前空間からイベントを分離します。 例えば、コール .bind('click.name', handler) 内の文字列 click はイベントのタイプで、文字列 name は名前空間です。名前空間にすると、他に影響を与えずに、タイプのいくつかのイベントのバインドを解除、またはトリガすることができます。詳細については、.unbind() の説明を参照してください。

イベントハンドラをアタッチまたはトリガするために使用することができる、.click() のようないくつかの標準的なブラウザ・イベントのためのショートハンド・メソッドがあります。ショートハンド・メソッドの完全なリストは、イベントカテゴリを参照してください。

イベントが要素に到達すると、要素のイベント·タイプにバインドされているすべてのハンドラが起動されます。登録されたハンドラが複数ある場合、常に結合した順序で実行されます。全ハンドラの実行後、イベントは通常のイベント伝達パスに沿って継続します。

.bind() の基本的な使用法:

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

このコードは、foo のIDを持つ要素を click イベントに反応させます。 その後、ユーザがこの要素の内側をクリックすると、警告が表示されます。

複数のイベント

複数のイベントタイプを、スペースで区切ることで一度にバインドできます:

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

<div id="foo">（最初に "entered" クラスを持っていないとき）のこの効果は、<div> にマウスが乗ったときに "entered" クラスが追加され、マウスが離れたとき削除されることです。

jQuery 1.4 現在、イベントタイプ/ハンドラのペアのマップを渡すことによって、同時に複数のイベントハンドラをバインドできます:

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

イベント・ハンドラ

handler 上記のように、パラメータはコールバック関数を取ります。ハンドラ内で、this キーワードはハンドラがバインドされているDOM要素を参照します。 jQueryで要素を使用するには、通常の $() 関数に渡すことができます。例えば:

$('#foo').bind('click', function() {
  alert($(this).text());
});

このコードが実行された後、ID が foo である要素内をクリックすると、テキスト内容がアラートとして表示されます。

jQuery 1.4.2 現在、複製のイベント・ハンドラは、破棄する代わりに、要素にバインドすることができます。 イベントデータ機能が使われている時、または他のユニークなデータがイベントハンドラ機能のまわりの閉鎖にある時には、これは有益です。 (This is useful when the event data feature is being used, or when other unique data resides in a closure around the event handler function.)

jQuery 1.4.3では、現在、イベントハンドラの代わりに false を渡すことができます。 これは、次と等価なイベント・ハンドラをバインドします: function(){ return false; }。この関数は、次を呼び出すことによって、後で削除することができます: .unbind( eventName, false )。

イベント・オブジェクト

handler のコールバック関数は、パラメータを取ることもできます。関数が呼び出されると、イベントオブジェクトが、最初のパラメータに渡されます。

ハンドラがトリガされたときに、何を行う必要があるかを正確に知るために、ハンドラがバインドされた場合、通常十分なコンテキストが利用可能になるため、イベントオブジェクトは多くの場合不要であり、パラメータは省略されます。 しかし、時にはイベントが開始された時点で、ユーザ環境に関する詳細な情報を収集するために必要となります。完全なイベントオブジェクトを参照して下さい。

ハンドラから false を返すことで、イベントオブジェクトの .preventDefault() と .stopPropagation() の双方を呼び出すことと同等です。

ハンドラ内での event オブジェクト使用は、次のようになります:

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

パラメータを、無名関数に与えた点に注意してください。 このコードは、ID foo を持つ要素をクリックした時に、クリックした時点におけるマウス・カーソルのページ座標を報告します。

イベントデータ渡し

オプションのl eventData パラメータは、一般的に使用されません。指定した場合、この引数は、ハンドラへの追加情報を渡すことを可能にします。このパラメータの便利な使用の1つは、クロージャによって引き起こされる問題を回避することです。例えば、双方ともに同じ外部変数を参照する2つのイベントハンドラがあったとします:

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

ハンドラは、それぞれの環境に message を持つクロージャですので、トリガされると、両方とも同じメッセージ Not in the face! を表示します。変数の値が変更されます。これを回避するために、eventData を使用して message を渡すことができます:

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

今回、変数はハンドラ内を直接参照しません; 代りに、変数は、イベントがバインドされた時点での値を修正した eventData を通した、 値で渡されます。最初のハンドラは Spoon! を表示し、一方2番目は Not in the face! を警告表示します。

オブジェクトは、このシナリオをさらに複雑にする、参照で関数に渡されることに注意してください。

eventData が存在する場合は、.bind() メソッドの2番目の引数です; 追加のデータをハンドラに送る必要がない場合は、コールバックは、2番目で最後の引数として渡されます。

ハンドラがバインドされたではなく、イベントが発生した時点でハンドラへデータを渡す方法に対しては、.trigger() メソッドのリファレンスを参照してください。

jQuery 1.4 現在、Javaアプレットにデータをアタッチするときに、重大なエラーが発生するため、もはや object、embed、または applet 要素にデータ（例えば、イベント）をアタッチすることはできません。

注: 次の例で示されているように、click と dblclick イベントの双方を同じ要素にバインドすることはお勧めできません。イベントトリガのシーケンスは、dblclickの前と、他の1回だけの2つのクリックイベントを受け取り方は、ブラウザによって異なります。ダブルクリック感度（ダブルクリックとして検出されるクリック間の最大時間）は、オペレーティングシステムやブラウザで変更したり、ユーザ設定ができるようになっています。

<!DOCTYPE html>
<html>
<head>
  <style>
p { background:yellow; font-weight:bold; cursor:pointer; 
padding:5px; }
p.over { background: #ccc; }
span { color:red; }
</style>
  <script src="/files/jquery.js"></script>
</head>
<body>
  <p>Click or double click here.</p>
<span></span>
<script>
$("p").bind("click", function(event){
var str = "( " + event.pageX + ", " + event.pageY + " )";
$("span").text("Click happened! " + str);
});
$("p").bind("dblclick", function(){
$("span").text("Double-click happened in " + this.nodeName);
});
$("p").bind("mouseenter mouseleave", function(event){
$(this).toggleClass("over");
});
</script>
</body>
</html>

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
p { color:red; }
span { color:blue; }
</style>
  <script src="/files/jquery.js"></script>
</head>
<body>
  <p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>
<script>
$("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>
</body>
</html>

$("div.test").bind({
  click: function(){
    $(this).addClass("active");
  },
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
});