学習する上で理解しておく必要があるのが「セレクタ」「メソッド」「イベント」です。「セレクタ」と「メソッド」は前回エントリーしました。(セレクタ編)jQuery入門(メソッド編)今回は最後の「イベント」についてエントリーします。イベントとはオブジェクト(セレクタ)が「誰が」、メソッドが「何をする」であるなら、イベントは「いつ」となります。イベントには下記のようなものがあります。.click()・・・クリックされたとき.focus()・・・フォーカスされたとき.resize()・・・画面サイズが変更されたとき.scroll()・・・スクロールされたとき.ready()・・・読み込みが終わったときこれで「ボタンがクリックされたら表示する」等の「誰が」「いつ」「何をする」という構成で文章が作成できます。おいては処理を実行するタイミングとイメージして問題ありません。イベントハンドラとイベントリスナイベント処理には、1)イベントハンドラ2)イベントリスナの2種類があります。1)イベントハンドライベントに対して処理を定義したメソッドです。$(セレクタ).イベント名(イベントが発生したときに実行したい処理)ポイント「イベントが発生したときに実行したい処理」はfunctionで設定します。ここでイベントの構文とメソッドの構文と比較してください。jQuery入門(メソッド編)名称がことなるだけで同じ構文なのが確認できます。これはjQueryがイベント発生時の処理をメソッドによって設定する仕組みを採用しているためです。jQueryではメソッドによってイベントを設定します。イベントハンドラのサンプルポイントイベントを設定するメソッドは引数に無名関数を設定することができます。2)イベントリスナイベントに対して処理を結びつける仕組みです。イベントで実行したい処理)onメソッドは対象となる要素にイベント名や関数を指定することで簡単にイベント処理を実現することができます。ポイント「イベントで実行したい処理」は無名関数(function)で設定します。使うイベントこの表にある「イベント名」の部分をonメソッドの引数に指定することで、それぞれのイベント処理を実装することができます。概要click要素をクリックしたときに発動changeフォームの部品(input、selectなど)の状態に何かしらの変化があったときに発動selectテキストボックス/テキストエリアのテキストを選択したときsubmitフォームが送信されたときに発動readyDOMの読み込みを完了したときの処理を設定します。イベントリスナのサンプルイベントハンドラ(clickメソッド)とイベントリスナ(onメソッド)の違い書き方でいうとイベントハンドラ(clickメソッド)のほうがシンプルで書きやすいですよね。イベントリスナ(onメソッド)があるのでしょうか?onメソッドは動的に追加した(※jQueryのappendメソッドでHTMLを追加した場合など)HTMLに対して簡単にイベントを検出できるからです。逆にclickメソッドだと途中から追加されたHTML要素を検出できません。「append()」を使ってボタン要素を追加している点に注目してください。この場合、「ボタン2」のボタンは「click()」のイベント処理が動作しません。次にonメソッドでの記述です。最初から存在している「div」を対象にして、on()の引数に「button要素」を指定します。このように記述することで、あとから追加された「button要素」も問題なく動作させることができます。以上のことからちょっと複雑な記述であるイベントリスナ(onメソッド)も場合によっては必要になるのです。これで、jQueryの「イベント編」については以上になります。実装して何か作ってみようと思います。よると、よく使われているプログラミング言語はJavaScriptが7年連続で第1位だそうです。(2019年現在)わからない箇所だけネットで調べるやり方は知識が断片化するので、いつか、本を読んでJavaScriptの知識を体系的に整理したいと思っていました。この本はAmazonでも評価が高く、以前から気になっていた本です。図解と実行結果、短めのサンプルプログラムと見やすく解りやすかったのでおススメですね。Ajaxの情報はネットでもあまりなかったので僕にとってはよかったです。気づいたことや新しい発見など情報を発信していきます。コメントをキャンセルメールアドレスが公開されることはありません。honjo_masanoriバナーWebエンジニアとしての就職、転職、フリーランスに関しての情報はコチラ!Laravelが学べるプログラミングスクールに関しての記事をまとめています。ENTRYLaravel6にメール設定(MailGun編)前回、Laravelのログイン機能を自動生成し、各画面を確認しました。ログイン機能を作成しました。/まとめ環境構築PHPフレームワークのひとつであるLaravelを専門に書いている学習サイトです。