.on()

http://api.jquery.com/on/

マッチした要素に任意のイベントをバインドします。また、対象となるエレメントは現在マッチしているものも含め、将来的にマッチするものも対象となります。

.on( events [, selector] [, data], handler(eventObject) ) 1.7追加
.on( events-map [, selector] [, data] ) 1.7追加
補足事項
サンプル
デモ

.on( events [, selector] [, data], handler(eventObject) ) 1.7追加

戻り値:jQuery

引数	説明
events	"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。また、スペース区切りで複数のイベントを指定することも可能です。
[selector]	.on()によってイベントをバインドしたセレクタと同じセレクタを指定します。
[data]	イベントハンドラに渡したいデータをマップ値で指定します。
handler(eventObject)	バインドさせたい関数を指定するか、特別な値falseを指定します。 falseを指定すると、単にfalseを返すだけの関数が自動的に指定されます。

.on( events-map [, selector] [, data] ) 1.7追加

戻り値:jQuery

キーと値の組み合わせでバインドされたイベントハンドラを削除します。

引数	説明
events-map	マップ値の組み合わせで、削除するイベントハンドラを指定します。キーには、"click"や"keydown.myPlugin",".myPlugin"などのイベント名、または任意に定義したカスタムイベント名の文字列を指定します。また、スペース区切りで複数のイベントを指定することも可能です。値には、事前にバインドされた関数を指定します。
[selector]	.on()によってイベントをバインドしたセレクタと同じセレクタを指定します。
[data]	イベントハンドラに渡したいデータをマップ値で指定します。

補足事項

名前空間を使用したイベント名を指定は、イベントの削除や発火を簡潔にしてくれます。例えば、"click.myPlugin.simple"は「myPlugin」と「simple」の両方の名前空間をこのクリックイベントに定義します。こうして登録されたイベントハンドラは .off("click.myPlugin") または .off("click.simple")のどちらかで、他のイベントハンドラに影響を与えること無く、削除することが出来ます。どれか１つの名前にマッチすれば階層的に指定されてなくても良い所がCSSに類似しています。また、名前空間の最初にアンダースコア(_)を使うことはjQueryによって予約されています。

ほとんどの主要なブラウザでは、イベント伝搬(バブリング)は要素の一番内側から、BODYに向かっていきます。ただし、IE8以下のバージョンでは一部のイベント(changeやsubmit)でこれらの動作とは違った動きをしますが、 jQueryがこれらの違いを内部的に正しています。

セレクタ引数を省略、またはnullを指定するとイベントハンドラは選択された要素を直接参照するようになります。その選択要素でのイベント発生、または子孫要素でのイベント伝搬でイベントハンドラが実行されるようになります。セレクタが指定されれば、選択要素を直接参照するのはなく、delegateのようにそのセレクタにマッチした部分でイベントが発生した場合にイベントハンドラを実行するようになります。

.on()では選択要素とセレクターがありますが、選択要素は.onメソッドが呼ばれる前にページ上に存在している必要があります。 .on()のような委任タイプのイベントの利点として、もし新しい要素が後からjavaScriptの動的な処理によって選択要素内に追加されたとしても、セレクタにマッチしていればその新しい要素に対してもイベントハンドラが有効になります。

また、委任タイプのイベントのもう一つの利点として、多くの要素でイベントの監視を行う必要がある場合非常に低いオーバーヘッドでそれを実現することができます。

下記の例では、データテーブル上のTBODY内に1,000行存在した場合、それぞれ1,000の要素に対してイベントハンドラを登録してしまいます。

$("#dataTable tbody tr").on("click", function(event){
	alert($(this).text());
});

それを下記のようにすると、イベントハンドラが登録されるのはTBODY要素１つだけになり、イベントの1階層のバブルアップが必要になるだけになります。

$("#dataTable tbody").on("click", "tr", function(event){
	alert($(this).text());
});

イベントハンドラに登録した関数が戻り値としてfalseを返すと、自動的にevent.stopPropagation()とevent.preventDefault()が実行されます。また、イベントハンドラの関数を指定する引数に特別な値falseを指定すると、function(){return false;}が登録されたことになります。これらの特性を利用して、$("a.disabled").on("click", false);とすれば、disableクラスを割り当てられた全てのリンクは本来のページ遷移処理とイベントのバブルアップがキャンセルされることになります。

jQueryでは階層的にしないシンプルなセレクタの指定をするほうがパフォーマンスが向上します。例えば、$("body").on("click", "#commentForm .addNew", addComment)とするより、 $("#commentForm").on("click", ".addNew", addComment)とした方が良いでしょう。

サンプル

P要素をクリックした際に、要素ないのテキストをアラートに表示します。

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

イベントハンドラにデータを渡します。アラートに渡したfooキーの値、"bar"が表示されます。

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

イベントハンドラを指定する引数にfalseを指定することで、本来実行されるフォームの送信処理とイベント伝搬をキャンセルします。

$("form").on("submit", false);

preventDefaultを指定することで、本来実行されるフォームの送信処理のみをキャンセルします。

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

stopPropagation、イベント伝搬のみをキャンセルします。

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

デモ

カスタムイベントの登録と実行を行います。

<!DOCTYPE html>
<html>
<head>
<style>
p { color:red; }
span { color:blue; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>カスタムイベントが登録されています</p>
<button>カスタムイベント実行</button>
<span style="display:none;"></span>
<script>
$("p").on("myCustomEvent", function(e, firstName, lastName){
  $(this).text(lastName + firstName + "です, こんにちは!");
  $("span").stop().css("opacity", 1)
    .text("firstName = " + firstName + ", lastName = " + lastName)
    .fadeIn(30).fadeOut(1000);
});
$("button").click(function () {
  $("p").trigger("myCustomEvent", [ "太郎", "山田" ]);
});
</script>
</body>
</html>

マップ値を指定して、同時に複数のイベントハンドラを登録します。

<!DOCTYPE html>
<html>
<head>
<style>
.test { color: #000; padding: .5em; border: 1px solid #444; }
.active { color: #900;}
.inside { background-color: aqua; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="test">test div</div>
<script>$("div.test").on({
  click: function(){
    //クリック処理
    $(this).toggleClass("active");
  },
  mouseenter: function(){
    //マウスが要素上に入った時の処理
    $(this).addClass("inside");
  },
  mouseleave: function(){
    //マウスが要素上から離れた時の処理
    $(this).removeClass("inside");
  }
});
</script>
</body>
</html>

新しく生成されたP要素にもイベントハンドラが有効になっていることを確認してください。

<!DOCTYPE html>
<html>
<head>
<style>
  p { background:yellow; font-weight:bold; cursor:pointer;
      padding:2px; font-size:12px;}
  p.over { background: #ccc; }
  span { color:red; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>クリックしてください。</p>
<span></span>
<script>
  var count = 0;
  $("body").on("click", "p", function(){
    $(this).after("<p>別のP要素です。クリックしてください。 "+(++count)+"</p>");
  });
</script>
</body>
</html>