前回の第10講では、JavaScriptを使ってHTML要素を取得し、テキストを書き換えるDOM操作を学習しました。
しかし、まだ大きな問題があります。
ユーザーが操作しても何も起きないことです。
例えば、ボタンを押しても反応しない。入力欄に文字を入力しても反応しない。
実際のWebサイトでは、ユーザーの操作に応じて画面が変化します。
- ボタンを押したら商品をカートへ追加する
- 検索欄へ入力したら候補を表示する
- フォームを送信したら内容を送る
- メニューをクリックしたら開く
これらを実現しているのがイベント処理です。
この記事では、JavaScriptのイベント処理の基本であるclickイベントとinputイベントを中心に、初心者向けにわかりやすく解説します。
イベントとは？
イベントとは、Webページ上で発生する出来事のことです。
例えば次のような操作はすべてイベントです。
- ボタンをクリックする
- 文字を入力する
- フォームを送信する
- マウスを乗せる
- キーボードを押す
JavaScriptは、イベントが発生した瞬間に処理を実行できます。
つまりイベント処理とは、
何かが起きたら処理を実行する仕組み
のことです。
イベント処理の流れ
① ユーザーが操作する ↓ ② イベントが発生する ↓ ③ JavaScriptが処理を実行する ↓ ④ DOMを書き換える ↓ ⑤ 画面が更新される
現在のWebアプリケーションの多くは、この流れで動いています。
なぜイベント処理が重要なのか？
イベント処理を学ぶことで、単なる表示だけのページから、ユーザーとやり取りできるページを作れるようになります。
例えば次のような機能はすべてイベント処理で実現されています。
- ECサイトのカート追加ボタン
- SNSの投稿ボタン
- Google検索フォーム
- お問い合わせフォーム
- ログイン画面
イベント処理はJavaScript学習の中でも特に重要なテーマです。
よく使うイベント一覧
| イベント名 | 内容 |
|---|---|
| click | クリックした時 |
| dblclick | ダブルクリックした時 |
| input | 入力した時 |
| change | 入力内容が確定した時 |
| submit | フォーム送信時 |
| mouseover | マウスを乗せた時 |
| keydown | キーを押した時 |
| load | ページ読み込み完了時 |
初心者のうちは、まずclickとinputを覚えれば十分です。
addEventListener()とは？
イベント処理を行うときはaddEventListener()を使用します。
要素.addEventListener(
"イベント名",
function () {
実行したい処理
}
);
少し長く見えますが、意味は単純です。
この要素で ↓ このイベントが発生したら ↓ この処理を実行する
JavaScriptのイベント処理は、ほぼすべてaddEventListener()から始まります。
clickイベントの使い方
まずはクリックを検知してみましょう。
HTML
<button id="btn">
クリック
</button>
JavaScript
const btn =
document.getElementById("btn");
btn.addEventListener(
"click",
function () {
console.log("クリックされました");
}
);
ブラウザで実行し、ボタンをクリックするとコンソールへメッセージが表示されます。
JavaScriptはクリックされるまで待機し、クリックされた瞬間に処理を実行しています。
クリックで文字を変更する
HTML
<p id="message">
こんにちは
</p>
<button id="btn">
変更
</button>
JavaScript
const message =
document.getElementById("message");
const btn =
document.getElementById("btn");
btn.addEventListener(
"click",
function () {
message.textContent =
"ようこそ";
}
);
ボタンをクリックすると、「こんにちは」が「ようこそ」に変わります。
これがイベント処理とDOM操作を組み合わせた最初の実践例です。
クリックで状態を変更する
HTML
<p id="status">
未完了
</p>
<button id="btn">
変更
</button>
JavaScript
const status =
document.getElementById("status");
const btn =
document.getElementById("btn");
btn.addEventListener(
"click",
function () {
status.textContent =
"完了";
}
);
Todoアプリやタスク管理アプリでは、このような処理が頻繁に登場します。
inputイベントの使い方
inputイベントは、入力欄へ文字が入力された時に発生するイベントです。
入力を検知する
HTML
<input id="name">
JavaScript
const name =
document.getElementById("name");
name.addEventListener(
"input",
function () {
console.log("入力されました");
}
);
キーボードを押すたびにイベントが発生します。
入力内容をリアルタイム表示する
HTML
<input id="name">
<p id="result"></p>
JavaScript
const name =
document.getElementById("name");
const result =
document.getElementById("result");
name.addEventListener(
"input",
function () {
result.textContent =
name.value;
}
);
入力した文字がそのまま画面へ表示されます。
検索フォームやチャットアプリなどでよく使われる仕組みです。
挨拶メッセージを表示する
HTML
<input id="name">
<p id="result"></p>
JavaScript
const name =
document.getElementById("name");
const result =
document.getElementById("result");
name.addEventListener(
"input",
function () {
result.textContent =
"こんにちは " +
name.value +
"さん";
}
);
例えば「田中」と入力すると、「こんにちは 田中さん」と表示されます。
valueとは？
inputイベントと一緒によく登場するのがvalueです。
name.value
valueは、入力欄に入力された値を取得するためのプロパティです。
入力欄 ↓ 山田 ↓ name.value ↓ "山田"
フォーム処理や検索機能を作るときに必須となる知識です。
例題
例題1
ボタンをクリックしたら「こんにちは」を「こんばんは」へ変更してください。
例題2
入力欄へ入力した内容をそのまま表示してください。
例題3
ボタンをクリックしたら「赤」を「青」へ変更してください。
まとめ
- イベントはWebページ上で発生する出来事
- addEventListener()でイベントを監視できる
- clickイベントでクリックを検知できる
- inputイベントで入力を検知できる
- valueで入力内容を取得できる
- DOM操作と組み合わせると画面を動かせる
イベント処理はJavaScriptの中でも特に重要な知識です。
フォーム処理、API通信、ミニアプリ制作など、今後の講義でも何度も登場します。
まずはclickイベントとinputイベントを使いこなし、ユーザーの操作に反応するページを作れるようになりましょう。
次回予告
次回はJavaScriptからCSSを変更し、画面の見た目を動的に変化させる方法を学習します。
文字色を変更する、背景色を切り替える、ボタンを押してデザインを変えるなど、より実践的なWebページ制作へ進んでいきましょう。
コメント