jQuery入門(イベント編)

2021/12/13

jQuery を学習する上で理解しておく必要があるのが「セレクタ」「メソッド」「イベント」です。

「セレクタ」と「メソッド」は前回エントリーしました。

今回は最後の「イベント」についてエントリーします。

 

イベントとは

オブジェクト(セレクタ)が「誰が」、メソッドが「何をする」であるなら、イベントは「いつ」となります。

例えば、イベントには下記のようなものがあります。

.click()・・・クリックされたとき
.focus()・・・フォーカスされたとき
.resize()・・・画面サイズが変更されたとき
.scroll()・・・スクロールされたとき
.ready()・・・読み込みが終わったとき

これで「ボタンがクリックされたら表示する」等の「誰が」「いつ」「何をする」という構成で文章が作成できます。

jQuery においては処理を実行するタイミングとイメージして問題ありません。

 

イベントハンドラとイベントリスナ

イベント処理には、

1)イベントハンドラ
2)イベントリスナ

の2種類があります。

 

1)イベントハンドラ

イベントに対して処理を定義したメソッドです。


$(セレクタ).イベント名(イベントが発生したときに実行したい処理)

ポイント

「イベントが発生したときに実行したい処理」はfunctionで設定します。

ここでイベントの構文とメソッドの構文と比較してください。

名称がことなるだけで同じ構文なのが確認できます。

これはjQueryがイベント発生時の処理をメソッドによって設定する仕組みを採用しているためです。つまり、jQueryではメソッドによってイベントを設定します。

 

イベントハンドラのサンプル

ポイント

イベントを設定するメソッドは引数に無名関数を設定することができます。

 

2)イベントリスナ

イベントに対して処理を結びつける仕組みです。

書式としては 「on」 メソッドを使います。

「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()」を使ってボタン要素を追加している点に注目してください。

この場合、「ボタン2」のボタンは「click()」のイベント処理が動作しません。

では次にonメソッドでの記述です。

最初から存在している「div」を対象にして、on()の引数に「button要素」を指定します。

このように記述することで、あとから追加された「button要素」も問題なく動作させることができます。

以上のことからちょっと複雑な記述であるイベントリスナ(onメソッド)も場合によっては必要になるのです。

これで、jQueryの「イベント編」については以上になります。

次回は Laravel ( Blade ) に jQuery を実装して何か作ってみようと思います。

フロントエンド おススメ教材(by Udemy)
動画でプログラミング学習!ドットインストール、Schoo、Udemyのどれがいい?
 
Udemyを使ったLaravel学習方法

【JavaScript&CSS】ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

基礎を終えた方に最適!基礎レベルから一気にプロレベルへ!JavaScript、CSSの基礎~実践までを最短で学習。世界が変わる19時間。
4.5(4295)

 

本庄マサノリ

仕事で Laravel を使っています。気づいたことや新しい発見など情報を発信していきます。問い合わせはこちら

>> Twitter をフォローする

 

-周辺知識