.on()【イベントハンドラ設定】1.7

メモ

  • 該当要素にイベントハンドラを設定
    • 下記の非推奨メソッドを統一
      .bind()【イベントハンドラ設定】 1.0 / 1.4 / 1.4.33.0
      .delegate()【イベントハンドラ設定 (セレクタ指定)】 1.4.2 / 1.4.33.0
      .live()【イベントハンドラ設定 (動的要素対応)】 1.3 / 1.4 / 1.4.31.71.9
    • 処理の実行は設定順
    • 同一イベントハンドラを複数回設定可能 1.4
    • イベントハンドラ解除は、.off()【イベントハンドラ解除】
    • 1回のみ実行するイベントハンドラを設定するには、.one()【イベントハンドラ設定 (1回のみ実行)】
  • イベント名
    (例：標準イベント ＋ 名前空間・カスタムイベント＋追加パラメータ 参照)
  • 直接イベント (direct events)・代理イベント (delegated events)
    (例：直接イベント・代理イベント 参照)
    • 該当要素の子孫のセレクタ文字列あり (直接イベント)：該当する追加子孫要素のイベントはその都度設定 (ハンドラは複数)
    • 該当要素の子孫のセレクタ文字列なし (代理イベント)：該当する追加子孫要素のイベントは自動的に追加設定 (ハンドラは１つ)
    • 代理イベントは、SVG で未サポート
  • イベント オブジェクト・データ・追加パラメータ
    (例：イベント オブジェクト・データ 参照)
  • イベントのバブルアップ・処理抑止
    (例：バブルアップ・処理抑止 参照)
    • イベントのほとんどは親要素にバブルアップ (document要素まで)
    • event.stopPropagation()【親要素イベント伝播抑止】によりバブリング抑止
    • event.stopImmediatePropagation()【イベント伝播即時抑止】 により現在要素の他のイベントハンドラの実行も抑止
    • event.preventDefault()【デフォルト処理抑止】 によりブラウザのデフォルト処理抑止 (但し、全ての抑止は不可)
    • イベントハンドラが false を返却すると、自動的に event.stopPropagation()【親要素イベント伝播抑止】 ・event.preventDefault()【デフォルト処理抑止】 呼び出し
    • イベントハンドラに false 指定は、function(){ return false; } の省略形
  • 以下はイベント名をAPI名とした .on( "イベント名", ...) の省略形
    イベントハンドラ解除は、.off()【イベントハンドラ解除】
    API説明
    .blur()《フォーカス喪失 (バブリングなし)》イベントハンドラ設定
    .change()《変更》イベントハンドラ設定
    .click()《クリック》イベントハンドラ設定
    .contextmenu()《コンテキストメニュー》イベントハンドラ設定
    .dblclick()《ダブルクリック》イベントハンドラ設定
    .error() 1.83.0 《エラー》イベントハンドラ設定
    .focus()《フォーカス取得 (バブリングなし)》イベントハンドラ設定
    .focusin()《フォーカス取得》イベントハンドラ設定
    .focusout()《フォーカス喪失》イベントハンドラ設定
    .keydown()《キーダウン》イベントハンドラ設定
    .keypress()《キー押下》イベントハンドラ設定
    .keyup()《キーアップ》イベントハンドラ設定
    .load() 1.83.0《ページ ロード完了》イベントハンドラ設定
    .mousedown()《マウスボタンダウン》イベントハンドラ設定
    .mouseenter()《マウス進入 (バブリングなし)》イベントハンドラ設定
    .mouseleave()《マウス退出 (バブリングなし)》イベントハンドラ設定
    .mousemove()《マウス移動》イベントハンドラ設定
    .mouseout()《マウス退出》イベントハンドラ設定
    .mouseover()《マウス進入》イベントハンドラ設定
    .mouseup()《マウスボタンアップ》イベントハンドラ設定
    .resize()《リサイズ》イベントハンドラ設定
    .scroll()《スクロール》イベントハンドラ設定
    .select()《テキスト選択》イベントハンドラ設定
    .submit()《送信》イベントハンドラ設定
    .unload() 1.83.0《ページ アンロード》イベントハンドラ設定

構文

説明構文戻り値
イベントハンドラ設定 .on( events [, selector ] [, data ], handler ) 1.7

String events：イベント名 上記メモ 参照 (複数：スペース区切り)
[ String selector ]：該当要素の子孫のセレクタ文字列 (null・省略：フィルタリングなし)
[ Anything data ]：イベントデータ (文字列の場合、selector 必須)
handler：イベントハンドラ (false：return false の省略形)
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
[ Anything extraParameter ... ] 追加パラメータ (下記で指定)
・.trigger()【イベント実行 (ブラウザデフォルト処理あり)】
・.triggerHandler()【イベント実行 (ブラウザデフォルト処理なし)】
(this)直接イベント：該当要素
代理イベント：セレクタ
戻り値説明
false
その他		メモ：イベントのバブルアップ・処理抑止 参照
処理続行
jQuery
.on( events [, selector ] [, data ] )  1.7

PlainObject events：【キー：イベント名】・【値：イベントハンドラ】のオブジェクト
  【キー：イベント名】上記メモ 参照 (複数：スペース区切り)
  【値：イベントハンドラ】詳細は上記構文参照 (false：return false の省略形)
[ String selector ]：該当要素の子孫のセレクタ文字列 (null・省略：フィルタリングなし)
[ Anything data ]：イベントデータ (文字列の場合、selector 必須)
jQuery

関連

例

標準イベント (メモ・構文)

<p>
  <button id="buttonSimple1">[ buttonSimple1 ]</button>
  <button id="buttonSimple2">[ buttonSimple2 ]</button>
</p>
<p>
  click イベント：<span id="outputSimple" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#buttonSimple1").on( "click", function() {
  $("#outputSimple").text("[ " + this.id + " ] click");
});
$("#buttonSimple2").on( {
  click: function() {
    $("#outputSimple").text("[ " + this.id + " ] click")
  }
});
</script>

click イベント：【出力】

標準イベント ＋ 名前空間 (メモ・構文)

<p>
  <button id="buttonName1">[ buttonName1 ]</button>
  <button id="buttonName2">[ buttonName2 ]</button>
  <button id="buttonName3">[ buttonName3 ]</button>
</p>
<p>
  click イベント：<span id="outputName" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#buttonName1").on( "click.name1", function() { $("#outputName").text("[ " + this.id + " ] (click.name1)"); } )
  .on( "click.name2", function() { $("#outputName").append(" (click.name2)"); } )
  .on( "click.name3", function() { $("#outputName").append(" (click.name3)"); } )
  .off( "click.name2" );

$("#buttonName2").on( { "click.nameA": function() { $("#outputName").text("[ " + this.id + " ] (click.nameA)"); } } )
  .on( { "click.nameB": function() { $("#outputName").append(" (click.nameB)"); } } )
  .on( { "click.nameC": function() { $("#outputName").append(" (click.nameC)"); } } )
  .off( "click.nameC" );

$("#buttonName3").on( "click", function() {
  $("#outputName").text("[ " + this.id + " ]");
  $("#buttonName1").trigger("click.name3");
});
</script>

click イベント：【出力】

カスタムイベント＋追加パラメータ (メモ・構文)

<p>
  <button id="buttonCustom1">[ buttonCustom1 ]</button>
  <button id="buttonCustom2">[ buttonCustom2 ]</button>
</p>
<p>
  click イベント：<span id="outputCustom" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#outputCustom").on( "Custom_:_Event", function(event, p1) {
  $(this).text(" [ " + p1 + " ] -> [ " + this.id + " ] (" + "Custom_:_Event" + ")");
});

$("#buttonCustom1").on( "click", function() {
  $("#outputCustom").trigger("Custom_:_Event", [ this.id ]);
});
$("#buttonCustom2").on( { click: function() {
  $("#outputCustom").trigger("Custom_:_Event", [ this.id ]) }
});
</script>

click イベント：【出力】

複数イベント (メモ・構文)

<style>
#pMulti { border:1px red solid; padding:1px 5px; width:100px; }
#outputMulti { border:1px black solid; padding:1px 5px; }
.styleMulti { background-color:lightgreen; }
</style>

<p id="pMulti">[ pMulti ]<br>click<br>mouseenter<br>mouseleave</p>
<p>
  click・mouseenter・mouseleave イベント：<span id="outputMulti">【出力】</span>
</p>

<script>
$("#pMulti").on( {
  click: function() {
    $("#outputMulti").text("click");
  },
  mouseenter: function() {
    $(this).addClass("styleMulti");
    $("#outputMulti").text("mouseenter");
  },
  mouseleave: function() {
    $(this).removeClass("styleMulti");
    $("#outputMulti").text("mouseleave");
  }
});
</script>

[ pMulti ]
click
mouseenter
mouseleave

click・mouseenter・mouseleave イベント：【出力】

イベント オブジェクト・データ (メモ・構文)

<p>
  <button id="buttonData1">[ buttonData1 ]</button>
  <button id="buttonData2">[ buttonData2 ]</button>
  <button id="buttonData3">[ buttonData3 ]</button>
</p>
<p>
  click イベント：<span id="outputData" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
$("#buttonData1").on( "click", null, { data1:"DATA1", data2:"DATA2" }, function(event) {
  $("#outputData").text("[ " + event.target.id + " ] " + event.type +
    " (" + event.data.data1 + ", " + event.data.data2 + ")");
});

$("#buttonData2").on( "click", null, "DATA", function(event, p1, p2, p3) {
  $("#outputData").text("[ " + event.target.id + " ] " + event.type +
    " (" + event.data + ") ( " + p1 + ", " + p2 + ", " + p3 + " ) ");
});

$("#buttonData3").on( "click", function() {
  $("#buttonData2").trigger("click", [ "buttonData3", "P2", "P3" ]);
});
</script>

click イベント：【出力】

直接イベント・代理イベント (メモ・構文)

<style>
.classEvent  { border:1px red solid; padding:5px 5px; margin:1px 5px; }
</style>

<p>
  <span id="spanEvent10" class="classEvent">[ spanEvent10 ]</span>
  <span id="spanEvent11" class="classEvent">[ spanEvent11 ]</span>
  <span id="spanEvent12" class="classEvent">[ spanEvent12 ]</span>
</p>
<p>
  click イベント：<span id="outputEvent1" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<p id="parentEvent2">
  <span id="spanEvent20" class="classDelegated classEvent">[ spanEvent20 ]</span>
  <span id="spanEvent21" class="classDelegated classEvent">[ spanEvent21 ]</span>
  <span id="spanEvent22" class="classDelegated classEvent">[ spanEvent22 ]</span>
</p>
<p>
  click イベント：<span id="outputEvent2" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
function funcEvent1() {
  $("#outputEvent1").text("[ " + this.id + " ] ");
}

function funcEvent2() {
  $("#outputEvent2").text("[ " + this.id + " ] ");
}

$("#spanEvent10").on("click", funcEvent1);
$("#spanEvent11").on("click", funcEvent1);
$("#spanEvent12").on("click", funcEvent1);
$("#spanEvent12").after('<span id="spanEvent13" class="classEvent">[ spanEvent13 ] (イベント手動追加)</span>');
$("#spanEvent13").on("click", funcEvent1);

$("#parentEvent2").on("click", ".classDelegated", funcEvent2);
$("#spanEvent22").after('<span id="spanEvent23" class="classDelegated classEvent">[ spanEvent23] (イベント自動追加)</span>');
</script>

[ spanEvent10 ] [ spanEvent11 ] [ spanEvent12 ]

click イベント：【出力】

[ spanEvent20 ] [ spanEvent21 ] [ spanEvent22 ]

click イベント：【出力】

バブルアップ・処理抑止 (メモ・構文)

<style>
.classBubble0 { border:1px red solid; padding:5px 5px; }
.classBubble1 { border:1px red solid; padding:15px 5px; }
.classBubble2 { border:1px red solid; padding:25px 5px; }
</style>

<p style="padding:40px 5px;"><!--border:1px blue solid; -->
  <span id="spanBubble12" class="classBubble2">[ spanBubble12 ]
    <span id="spanBubble11" class="classBubble1">[ spanBubble11 ]
      <span id="spanBubble10" class="classBubble0">[ spanBubble10 ]</span>
    </span>
  </span>
</p>
<p>
  click イベント：<span id="outputBubble1" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<p style="padding:40px 5px;"><!--border:1px blue solid; -->
  <span id="spanBubble22" class="classBubble2">[ spanBubble22 ]
    <span id="spanBubble21" class="classBubble1">[ spanBubble21 ] event.stopPropagation()
      <span id="spanBubble20" class="classBubble0">[ spanBubble20 ]</span>
    </span>
  </span>
</p>
<p>
  click イベント：<span id="outputBubble2" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<p style="padding:40px 5px;"><!--border:1px blue solid; -->
  <span id="spanBubble32" class="classBubble2">[ spanBubble32 ]
    <span id="spanBubble31" class="classBubble1">[ spanBubble31 ] event.stopImmediatePropagation()
      <span id="spanBubble30" class="classBubble0">[ spanBubble30 ]</span>
    </span>
  </span>
</p>
<p>
  click イベント：<span id="outputBubble3" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<p style="padding:40px 5px;"><!--border:1px blue solid; -->
  <span id="spanBubble42" class="classBubble2">[ spanBubble42 ]
    <span id="spanBubble41" class="classBubble1">[ spanBubble41 ] false
      <span id="spanBubble40" class="classBubble0">[ spanBubble40 ]</span>
    </span>
  </span>
</p>
<p>
  click イベント：<span id="outputBubble4" style="border:1px black solid; padding:1px 5px;">【出力】</span>
</p>

<script>
function funcBubble(event, elm, output) {
  var $outputBubble = $(output);
  if (elm.id === event.target.id) {
    $outputBubble.text("[ " + elm.id + " ] ");
  }
  else {
    $outputBubble.append("[ " + elm.id + " ] ");
  }
}

function funcBubble2(event, output) {
  $(output).append("( " + event.type + " ) ");
}

// 通常
$("#spanBubble10").on("click", function() { funcBubble(event, this, "#outputBubble1"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble1"); });
$("#spanBubble11").on("click", function() { funcBubble(event, this, "#outputBubble1"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble1"); });
$("#spanBubble12").on("click", function() { funcBubble(event, this, "#outputBubble1"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble1"); });

// event.stopPropagation()
$("#spanBubble20").on("click", function() { funcBubble(event, this, "#outputBubble2"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble2"); });
$("#spanBubble21").on("click", function() { funcBubble(event, this, "#outputBubble2"); })
  .on("click", function(event) { event.stopPropagation(); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble2"); });
$("#spanBubble22").on("click", function() { funcBubble(event, this, "#outputBubble2"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble2"); });

// event.stopImmediatePropagation()
$("#spanBubble30").on("click", function() { funcBubble(event, this, "#outputBubble3"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble3"); });
$("#spanBubble31").on("click", function() { funcBubble(event, this, "#outputBubble3"); })
  .on("click", function(event) { event.stopImmediatePropagation(); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble3"); });
$("#spanBubble32").on("click", function() { funcBubble(event, this, "#outputBubble3"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble3"); });

// false 指定
$("#spanBubble40").on("click", function() { funcBubble(event, this, "#outputBubble4"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble4"); });
$("#spanBubble41").on("click", function() { funcBubble(event, this, "#outputBubble4"); })
  .on("click", false)
  .on("click", function(event) { funcBubble2(event, "#outputBubble4"); });
$("#spanBubble42").on("click", function() { funcBubble(event, this, "#outputBubble4"); })
  .on("click", function(event) { funcBubble2(event, "#outputBubble4"); });
</script>

[ spanBubble12 ] [ spanBubble11 ] [ spanBubble10 ]

click イベント：【出力】

[ spanBubble22 ] [ spanBubble21 ] event.stopPropagation() [ spanBubble20 ]

click イベント：【出力】

[ spanBubble32 ] [ spanBubble31 ] event.stopImmediatePropagation() [ spanBubble30 ]

click イベント：【出力】

[ spanBubble42 ] [ spanBubble41 ] false [ spanBubble40 ]

click イベント：【出力】