jQuery【 on 】on メソッドの使い方
jQuery では、「 $(document).on(“click”, “div”, function () { }); 」のような記述で on メソッドを使用することがあります。
今回は、jQuery の on メソッドの使い方を解説いたします。
目次
1. on メソッド
2. on メソッドを使用した場合の処理の違い
3. まとめ
1. on メソッド
on メソッドは、click だけでなく 様々なイベント処理に関して、イベント発生時に特定の処理を行う場合に使用します。
対象となる要素とイベントとを結び付けているメソッドです。
on メソッドは、引数によって 2 通りの記述方法があります。
$(セレクタ).on( events [, selector] [, data], handler(eventObject) );
$(セレクタ).on( events-map [, selector] [, data] );
on メソッドの引数の内容は、それぞれ以下の通りです。
.on( events [, selector] [, data], handler(eventObject) )
| events |
| 「 click 」、「 keydown.myPlugin 」、「 .myPlugin 」などのイベント名、または任意に定義したカスタムイベント名の文字列を指定
複数のイベントを指定することも可能
|
| selector |
on メソッドの対象となるセレクタと同じセレクタを指定
|
| data |
イベントハンドラに渡したいデータをマップ値で指定
|
| handler(eventObject) |
| 紐付けたい関数を指定するか、「 false 」を指定
「 false 」を指定すると、単に false を返すだけの関数が自動的に紐付けられる
|
.on( events-map [, selector] [, data] )
| events-map |
| マップ値と組み合わせてイベントハンドラを指定
キーには、「 click 」、「 keydown.myPlugin 」、「 .myPlugin 」などのイベント名、又は任意に定義したカスタムイベント名の文字列を指定
複数のイベントを指定することも可能
値には、事前に紐付けられた関数を指定
|
| selector |
on メソッドの対象となるセレクタと同じセレクタを指定
|
| data |
イベントハンドラに渡したいデータをマップ値で指定
|
※イベントハンドラとは、イベントが発生した時に呼び出される処理のことです。
▲目次へ戻る
2. on メソッドを使用した場合の処理の違い
on メソッドを使用した場合と 使用しない場合とで、クリック時の処理を比較します。
各ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
$("#btn1").on("click", function() {
$("#dat").html("on 使用！");
});
$("#btn2").click(function() {
$("#dat").html("on 未使用！");
});
});
//-->
</script>
<div style="background-color : #CCC; padding : 20px 20px 10px;">
<input type="button" id="btn1" value=" on 使用">
<input type="button" id="btn2" value=" on 未使用">
<div id="dat"> </div>
</div>
上のサンプルでは、on メソッドを使用した場合と 使用しない場合とで 処理の違いを感じることは特にありません。
両者の違いは、非同期処理が意図したタイミングで確実に行われるか否か等、プログラムが複雑になった際に発生します。
on メソッドは、複雑なプログラムを記述する上で優れた働きをする というイメージを持っていて下さい。
また、処理の違いとは別に、on メソッドを使用して 次のように複数のイベントをスマートに記述することもできます。
$("#btn1").on(
"click", function() {alert("クリック");},
"focus", function() {alert("フォーカス");},
"blur", function() {alert("ブラー");}
);
▲目次へ戻る
3. まとめ
jQueryのonメソッドについて、いかがでしたでしょうか。
「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。
今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」
▲目次へ戻る
