前の記事では、
JavaScriptで DOMを取得し、操作できる ことを学びました。
しかし、
取得して操作するだけでは、
ページは自動では動きません。
Webページが本当に「動く」ようになるのは、
ユーザーの操作に反応できるようになったとき です。
その仕組みが、
イベント処理 です。
この記事では、
JavaScriptの中核とも言える
イベント処理の基本 を整理します。
この記事で学べること
・イベントとは何か
・イベント処理の基本的な考え方
・click イベント
・change イベント
・イベント処理の全体像
イベントとは何か
イベントとは、
ユーザーやブラウザによって発生する出来事です。
代表的なイベントには、次のようなものがあります。
・クリックする
・入力内容が変わる
・ページが読み込まれる
JavaScriptは、
これらのイベントを 検知して処理を実行 します。
イベント処理とは何をしているのか
イベント処理とは、
次の考え方です。
「〇〇が起きたら、△△をする」
例えば、
・ボタンをクリックしたら表示を切り替える
・入力内容が変わったらチェックする
といった処理は、
すべてイベント処理です。
イベント処理の基本構造
イベント処理は、
必ず次の3要素で構成されます。
・どの要素で
・どのイベントが起きたら
・何をするか
この3点を意識すると、
コードの意味が分かりやすくなります。
clickイベントとは
clickイベントは、
要素がクリックされたときに発生するイベントです。
使いどころは非常に多く、
・ボタン
・リンク
・アイコン
など、
ユーザー操作の起点になります。
clickイベントの考え方
clickイベントでは、
・どの要素をクリックしたのか
・クリック後に何をしたいのか
を明確にすることが重要です。
「クリックされたら〇〇する」
という処理の基本形になります。
changeイベントとは
changeイベントは、
入力内容が変更されたときに発生するイベントです。
主に次の要素で使われます。
・input
・select
・checkbox
フォーム処理では、
非常によく使われるイベントです。
changeイベントの考え方
changeイベントは、
・入力内容が確定したタイミング
・選択肢が変わったタイミング
で発生します。
リアルタイム入力よりも、
「値が変わった後」に反応する
というイメージを持つと分かりやすくなります。
なぜイベント処理が重要なのか
イベント処理があることで、
・ユーザー操作に反応できる
・画面を動的に変えられる
・入力チェックができる
Webページは
一方通行の表示物から、対話できるUI
へと進化します。
DOM取得とイベント処理はセット
イベント処理は、
DOM操作と必ずセットで使われます。
流れを整理すると、
要素を取得する
イベントを設定する
処理を実行する
この流れは、
今後何度も繰り返し出てきます。
イベントは「待ち」の仕組み
JavaScriptのイベント処理は、
イベントが起きるまで待つ という特徴があります。
コードは最初に読み込まれますが、
・クリックされるまで
・入力が変わるまで
処理は実行されません。
この「待つ」という考え方は、
非同期処理を理解する際にも重要になります。
よくあるイベント処理の失敗例
初心者がよくつまずくポイントです。
・対象の要素が取得できていない
・イベントを付ける要素を間違えている
・HTML読み込み前に処理している
イベントが動かない場合は、
まず DOM取得ができているか を疑いましょう。
イベント処理とUXの関係
イベント処理は、
ユーザー体験（UX）に直結します。
・押したら反応がある
・入力したら結果が変わる
こうした「反応」があることで、
使いやすいWebページになります。
学習初期に意識すべきポイント
イベント処理では、
次の点を意識してください。
・どの要素が対象か
・どのイベントか
・何をしたいか
この3点を
日本語で説明できれば、
イベント処理は正しく書けています。
まとめ
イベント処理は、
JavaScriptの中心的な役割です。
・イベント＝出来事
・click＝クリック
・change＝入力変更
DOM取得と組み合わせることで、
Webページは
ユーザー操作に反応するUI になります。
次は、
実際にイベント処理を使った具体例 を通して、
理解をさらに深めます。
次に読むべき記事
▶ 次の記事
5-6 JavaScriptでできる簡単な実装例（表示切替・入力チェック）
▶ 関連記事
5-4 DOMの取得と操作の基本
コメント