
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.08.03
jQuery では、「 $(document).on(“click”, “div”, function () { }); 」のような記述で on メソッドを使用することがあります。
今回は、jQuery の on メソッドの使い方を紹介したいと思います。
1.on メソッド
2.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 イベントハンドラに渡したいデータをマップ値で指定
※イベントハンドラとは、イベントが発生した時に呼び出される処理のことです。
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("ブラー");} );
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.