2021/12/13
jQuery を学習する上で理解しておく必要があるのが「セレクタ」「メソッド」「イベント」です。
「セレクタ」と「メソッド」は前回エントリーしました。
今回は最後の「イベント」についてエントリーします。
イベントとは
オブジェクト（セレクタ）が「誰が」、メソッドが「何をする」であるなら、イベントは「いつ」となります。
例えば、イベントには下記のようなものがあります。
.click()・・・クリックされたとき
.focus()・・・フォーカスされたとき
.resize()・・・画面サイズが変更されたとき
.scroll()・・・スクロールされたとき
.ready()・・・読み込みが終わったとき
これで「ボタンがクリックされたら表示する」等の「誰が」「いつ」「何をする」という構成で文章が作成できます。
jQuery においては処理を実行するタイミングとイメージして問題ありません。
イベントハンドラとイベントリスナ
イベント処理には、
１）イベントハンドラ
２）イベントリスナ
の２種類があります。
１）イベントハンドラ
イベントに対して処理を定義したメソッドです。
$(セレクタ).イベント名（イベントが発生したときに実行したい処理）
「イベントが発生したときに実行したい処理」はfunctionで設定します。
ここでイベントの構文とメソッドの構文と比較してください。
名称がことなるだけで同じ構文なのが確認できます。
これはjQueryがイベント発生時の処理をメソッドによって設定する仕組みを採用しているためです。つまり、jQueryではメソッドによってイベントを設定します。
イベントハンドラのサンプル
イベントを設定するメソッドは引数に無名関数を設定することができます。
２）イベントリスナ
イベントに対して処理を結びつける仕組みです。
書式としては 「on」 メソッドを使います。
.off()・・・設定された処理を解除
.ready()・・・読み込まれたときの処理を設定
$("対象要素").on（イベント名, セレクタ, イベントで実行したい処理）
onメソッドは対象となる要素にイベント名や関数を指定することで簡単にイベント処理を実現することができます。
「イベントで実行したい処理」は無名関数（function）で設定します。
よく使うイベント
この表にある「イベント名」の部分をonメソッドの引数に指定することで、それぞれのイベント処理を実装することができます。
| イベント名 | 概要 |
|---|---|
| click | 要素をクリックしたときに発動 |
| change | フォームの部品（input、selectなど）の状態に何かしらの変化があったときに発動 |
| select | テキストボックス／テキストエリアのテキストを選択したとき |
| submit | フォームが送信されたときに発動 |
| ready | DOMの読み込みを完了したときの処理を設定します。 |
イベントリスナのサンプル
イベントハンドラ（clickメソッド）とイベントリスナ（onメソッド）の違い
書き方でいうとイベントハンドラ（clickメソッド）のほうがシンプルで書きやすいですよね。
ではなぜイベントリスナ（onメソッド）があるのでしょうか？
onメソッドは動的に追加した（※jQueryのappendメソッドでHTMLを追加した場合など）HTMLに対して簡単にイベントを検出できるからです。
逆にclickメソッドだと途中から追加されたHTML要素を検出できません。
例えばclickメソッド場合
「append()」を使ってボタン要素を追加している点に注目してください。
この場合、「ボタン２」のボタンは「click()」のイベント処理が動作しません。
では次にonメソッドでの記述です。
最初から存在している「div」を対象にして、on()の引数に「button要素」を指定します。
このように記述することで、あとから追加された「button要素」も問題なく動作させることができます。
以上のことからちょっと複雑な記述であるイベントリスナ（onメソッド）も場合によっては必要になるのです。
これで、jQueryの「イベント編」については以上になります。
次回は Laravel ( Blade ) に jQuery を実装して何か作ってみようと思います。
Udemyを使ったLaravel学習方法
仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら。