学習する上で理解しておく必要があるのが「セレクタ」「メソッド」「イベント」です。「セレクタ」と「メソッド」は前回エントリーしました。(セレクタ編)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&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。気づいたことや新しい発見など情報を発信していきます。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。独学で学習するなら動画学習が断然おススメ!Laravelが学べる評判の動画学習サイト3つご紹介します!PHPエンジニアとしての就職、転職、フリーランスに関しての情報はコチラ!Laravelが学べるプログラミングスクールに関しての記事をまとめています。アプリのチュートリアルをよく見ますよね。/まとめ環境構築PHPフレームワークのひとつであるLaravelを専門に書いている学習サイトです。