jQuery入門 | イベント処理 | イベントのバインドと処理 .on() .off() .one()

Tags:

イベントのバインド(event binding)

特定の要素で発生するイベントを処理するには、イベントハンドラー(event handler)関数を作成する必要がある。
このように作成したイベントハンドラーを特定の要素に関連付けることを、イベントバインディング(event binding)という。

jQueryはイベントバインディングのためのさまざまな方法を提供している。

次の例は、idが"btn"である要素にクリック(click)イベントハンドラーをバインドするさまざまな方法である。

$("#btn").click(function(event) { // 実行したいjQueryコード });
$("#btn").bind("click", function(event) { // 実行したいjQueryコード });
$("#btn").on("click", function(event) { // 実行したいjQueryコード });
$("body").on({"click": function(event) { // 実行したいjQueryコード }}, "#btn");
$("body").on("click", "#btn", function(event) { // 実行したいjQueryコード });

jQuery 1.7以降では、.bind()や.click()メソッドを使用しても、内部的には.on()メソッドを使ってイベントハンドラーをバインドする。

イベント処理の発展

jQueryの発展に伴い、イベントを処理する方法も変化してきた。
jQuery 1.0では、.bind()メソッドを使用してイベントハンドラーを登録した。
その後、.live()メソッドと.delegate()メソッドを経て、現在は.on()メソッドを使ってイベントを処理している。

.on()メソッド

jQueryは、特定の要素にイベントをバインド(event binding)するためにon()メソッドを使用する。 jQuery 1.7から導入された.on()メソッドには、次のような特徴がある。

  1. 選択した要素に任意の種類のイベントを関連付けることができる。
  2. 1つのイベントハンドラーに複数のイベントを同時に関連付けることができる。
  3. 選択した要素に複数のイベントハンドラーと複数のイベントをまとめて関連付けることができる。
  4. カスタムイベント(custom event)のために、イベントハンドラーへデータを渡すことができる。
  5. 今後扱う要素をイベントにバインドできる。

基本形

次の例は、要素をクリックしたときにアラートを表示する例である。

$("p").on("click", function(){
  alert("文がクリックされました。");
});

コードを実行

1つのイベントハンドラーに複数のイベントを設定する

.on()メソッドを使用すると、1つのイベントハンドラーに複数のイベントを同時にバインドできる。

次の例では、<p>要素にmouseenterとmouseleaveイベントを設定している。

$("p").on("mouseenter mouseleave", function() {
  $("div").append("マウスカーソルが文の上に入るか、文から出ました。<br>");
});

コードを実行

また、1つの要素に複数のイベントハンドラーを使用して、複数のイベントをまとめてバインドすることもできる。

$("p").on({ 
  click: function() {
    $("div").append("マウスが文をクリックしました。<br>");
  },
  mouseenter: function() {
    $("div").append("マウスカーソルが文の上に入りました。<br>");
  },
  mouseleave: function() {
    $("div").append("マウスカーソルが文から出ました。<br>");
  }
});

コードを実行

.off()メソッド

.off()メソッドは、これ以上使用しないイベントとのバインディング(binding)を削除する。

$("#btn").on("click", function() {
  alert("ボタンがクリックされました。");
});
$("#btnBind").on("click", function() {
  $("#btn").on("click").text("ボタンをクリック可能");
});
$("#btnUnbind").on("click", function() {
  $("#btn").off("click").text("ボタンをクリック不可");
});

コードを実行

.one()メソッド

.one()メソッドは、バインド(binding)されたイベントハンドラーを一度だけ実行し、その後は実行しない。

$("button").one("click", function() {
  $("div").append("もうクリックできません。<br>");
});

コードを実行

.one()メソッドは、on()メソッドと同じ引数を受け取る。
したがって、複数のイベントハンドラーや複数のイベントを持てるなど、.on()メソッドと同じ特徴を持つ。

参照