INDEX
目次
前の章に戻る本章では、Webページ上でインタラクションを実現するために必須の概念であるイベントとイベントハンドラーについて学習します。
【2-1】イベントとは
イベントの仕組み
ブラウザで発生する出来事のことを「イベント（event）」といいます。
この「イベント」にはさまざまな種類があります。
例えば、「ページの読み込みが完了した」「ボタンがクリックされた」「マウスが画像の上に乗った」「ページがスクロールされた」「フォームの入力内容が送信された」などです。
ブラウザは、常にこれらのイベントが発生しないかを見守っており、イベントを検知すると、そのイベントに関連づけられたJavaScriptのプログラムに通知を行います。
このイベントが発生したという通知をトリガー（きっかけ）にして、プログラムの処理を実行することができます。
この「イベント」にはさまざまな種類があります。
例えば、「ページの読み込みが完了した」「ボタンがクリックされた」「マウスが画像の上に乗った」「ページがスクロールされた」「フォームの入力内容が送信された」などです。
ブラウザは、常にこれらのイベントが発生しないかを見守っており、イベントを検知すると、そのイベントに関連づけられたJavaScriptのプログラムに通知を行います。
このイベントが発生したという通知をトリガー（きっかけ）にして、プログラムの処理を実行することができます。
1. ブラウザはイベントの発生を常に待っている
2.ブラウザがイベントの発生を検知する
3.プログラムを呼び出す
以下の表はブラウザで発生する主要なイベントの一覧です。
ブラウザで発生する主要なイベント一覧
| イベント名 | 発生するタイミング | 主な対象要素名 |
|---|---|---|
| load | ページの読み込みが完了したとき | body img |
| DOMContentLoaded | ページの読み込み（画像以外）が完了したとき | body |
| scroll | 画面がスクロールしたとき | body |
| submit | 送信ボタンが押されたとき | form |
| change | フォームの内容が変更されたとき | input select |
| click | 要素がクリックされたとき | a img inputなど |
| dblclick | 要素がダブルクリックされたとき | a img inputなど |
| mouseover | 要素にマウスが乗ったとき | a imgなど |
| mouseout | 要素からマウスが外れたとき | a imgなど |
| contextmenu | 要素が右クリックされたとき | body |
| keydown | キーが押されたとき | - |
| keypress | キーが押されているとき | - |
| keyup | 押されたキーから指が離れたとき | - |
| dragstart | 要素がドラッグされはじめたとき | - |
| drag | ドラッグ操作されている最中 | - |
| dragend | ドラッグ操作が終わったとき | - |
- ブラウザは、これらのイベントの発生を検知しようと常に待ち構えています。
- JavaScriptでは、あるイベントが発生したときに、あらかじめ記述しておいたプログラムを呼び出して処理を実行する仕組みをつくることができます。
- そのような処理の仕組みをつくることにより、ユーザーの操作に反応するWebページのインタラクションを実現します。
- イベントに対応させるべくあらかじめ記述しておく処理全体のことをイベントハンドラー（event handler）、またはイベントリスナー（event listener）と呼びます。
💡 イベントハンドラー・イベントリスナーの処理は、次の3つを定義することにより作成されます。
- どこが（オブジェクト）
- どうされたとき（イベント）
- 何が起こるのか（実行される処理）
- この3つを定義して相互に関連づけ、イベントハンドラー / イベントリスナーの処理を設定します。そのための方法を、以下に解説します。
【2-2】イベントハンドラー / イベントリスナーの設定方法
- ■ 3種類の設定方法
💡 3種類の内容
- HTMLのタグの要素の属性として記述する
- タグの要素オブジェクトのプロパティとして記述する
- addEventListenerメソッドを使い記述する
- ※イベントハンドラーとイベントリスナーは同じ意味で使われる言葉ですが、厳密には1.と2.で定義されたものを「イベントハンドラー」、3.で定義されたものを「イベントリスナー」と呼びます。
-
- イベントハンドラーは多くの場合、関数という仕組みを使って設定されます。
- 関数については、次章で詳しく解説します。
- イベントハンドラーは多くの場合、関数という仕組みを使って設定されます。
- 本章では、関数を使わなくても記述できる1.の方法を、まずは解説します。
-
- HTMLのタグの要素の属性として記述する
💡 記述ルール
- HTMLタグの属性としてイベント名を追加する
- その際、イベント名の先頭に「on」をつけて記述する
- 「””」内の属性値部分にJavaScriptのコードをそのまま記述する
- それでは、前章で学習した「ダイアログボックスを出す」JavaScript を、ボタンクリック時に実行するプログラムに書き換えてみましょう。
ボタンをクリックしたときにダイアログボックスを出す
- 新しいHTMLファイルを用意して下さい（ファイル名は任意）。
- buttonタグでボタンを1つ作成します。
- HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>イベントハンドラーの設定1</title>
</head>
<body>
<button>ダイアログボックスを出す</button>
</body>
</html>サンプル
- 「ダイアログボックスを出す」ボタンをクリックしたときに、ダイアログボックスが表示される仕組みを作成します。
- HTMLとJavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>イベントハンドラーの設定1</title>
</head>
<body>
<button onclick="alert('クリックイベントを検出しました！');">
ダイアログボックスを出す
</button>
</body>
</html>サンプル
💡 サンプルコード解説
- buttonタグ内にonclick属性を記述します。
- 属性値としてJavaScriptのコードを直接記述します。
- ※ダブルクォーテーションを二重に記述してはいけないというルールがあるため、このような場合は、「onclick="alert('クリックイベントを検出しました！')"」のように、内側をシングルクォーテーションにします。
- 続いて、「背景色を設定する」JavaScript も、ボタンクリック時に実行するプログラムに書き換えてみましょう。
ボタンをクリックしたときに背景色を変える
- 任意のファイル名でHTMLファイルを作成し、以下のコードを入力して下さい。
- ※色名（#ff0000）の部分はシングルクォーテーションで囲みます。
- HTMLとJavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>イベントハンドラーの設定2</title>
</head>
<body>
<button onclick="document.bgColor='#ff0000';">背景色を変える</button>
</body>
</html>サンプル
- イベントハンドラーを設定して、ボタンにクリックイベントが発生したときの処理を作成することができました。
- ただし、今回は2つとも非常に短く簡単な処理でしたので、属性値部分にJavaScriptの処理をそのまま記述しても大きな問題はありませんでしたが、もっと複雑で長いJavaScriptのコードにイベントを設定する場合は、以下の理由からこの記述法は避けるべきです。
💡 属性値部分に複雑なJavaScriptのコードを記述してはいけない理由
-
コードの可読性の観点から、HTMLとJavaScriptのコードは記述場所を分離するべきだから。
- このイベントハンドラーの設定方法を使用するのは、簡易的にコードのテストなど行う場合などに留めておきましょう。
- 現在のトレンドでは、HTMLとJavaScriptのコードを明確に分離して記述する方が好ましいとされています。
- そのようなイベント処理の作成には、関数というしくみが必須です。
- 次章では、関数の定義方法を解説しながら、2.と3.のイベントハンドラーの設定方法も学んでいきます。
- これで「2章：イベントとイベントハンドラーを学ぼう」の解説を終わります。
- 次の章に進みましょう。