JavaScript 基礎 第11回ではDOM操作で実際にHTMLファイルに直接アクセスしてみました。
今回解説する「イベント」は私たちが日ごろ見るWebページに多く使用されている仕組みです。この章ではその「イベント」を解説していきます。
イベントとは
普段みなさんが使っているWebページにはユーザーの動作をきっかけとして実行されるプログラムが多く存在します。
例えば、お問い合わせフォームはユーザーが送信ボタンをクリックすることでプログラムが実行され、入力した内容が送信される仕組みを持っています。
この「送信ボタンをクリックする」のような、プログラムを実行するきっかけとなる動作をプログラミングの世界では「イベント」といいます。
JavaScriptでは、このイベントと関数を紐づけることで、特定の動作が行われた場合にプログラムを実行させることができます。
イベントタイプ
JavaScriptで設定できるイベントにはさまざまな種類（イベントタイプ）がありますが、その中から一部紹介します。
■主なイベントタイプ
| イベントタイプ | プログラムが実行されるタイミング |
| click | 要素がクリックされると実行 |
| dblclick | 要素がダブルクリックされると実行 |
| mouseover | 要素にマウスポインタが乗ったときに実行 |
| mouseout | 要素からマウスポインタが離れたときに実行 |
| keyup | キーボードのキーを離したときに実行 |
| keydown | キーボードのキーを押したときに実行 |
| submit | フォームを送信したときに実行 |
| load | ページの読み込みが完了したときに実行 |
イベントリスナー
イベント発生時に動作するプログラムを指定する方法は「イベントリスナーで指定する方法」と「イベントハンドラ方式」の2つに大きく分類されますが、現在は「イベントリスナーで指定する方法」が主流となっています。その理由としては、イベントハンドラ方式は1つの要素・イベントに対して1つの設定しか行うことができないからです。
イベントリスナーとは、イベントが発生した際に動作するように紐づけられた関数のことです。イベントリスナーでイベントを指定することで、1つの要素・イベントに対して複数の設定を行うことが可能です。
ではイベントリスナーを使ってイベントを設定してみましょう。
イベントリスナーを追加するには「addEventListenerメソッド」を使います。イベントリスナーで関数を指定するには以下の構文を用います。
■addEventListenerメソッドで関数を指定
●対象の要素●.addEventListener('●イベントタイプ●', ●実行する関数名●);なお、上記の構文では関数に引数を渡すことができません。そのため、行いたい処理を指定するには第6回で解説した無名関数を使うのが基本となります。
もし名前のある関数に引数を指定する場合は、引数がついた無名関数をイベントリスナーとして指定し、その無名関数内で名前のついた関数を呼び出し、引数を渡す形になります。
■addEventListenerメソッドで無名関数を指定
●対象の要素●.addEventListener('●イベントタイプ●', function(●引数●) {
●実行する処理●
});本項ではイベントリスナーを使ったプログラムの設定方法を紹介しましたが、ここでイベントハンドラ方式についても触れておきましょう。
イベントハンドラとは、イベント発生時に実行する関数を紐づけるための方法です。イベントハンドラは「onclick」「onmouseover」のように、「on＋イベント名」の形で記述され、1つのイベントに複数の設定を行うことができない点がイベントリスナーとの大きな違いになります。
イベントリスナーを登録する方法には、「①HTML属性にイベントハンドラを登録する方法」と「②プロパティを使ってイベントハンドラを登録する方法」の2つがあります。
■①HTML属性にイベントハンドラを登録する方法
<button id="●id名●" ●イベントハンドラ名●="●実行する関数名●();">○○○○</button>■②プロパティを使ってイベントハンドラを登録する方法
●対象の要素●.●イベントハンドラ名● = ●実行する関数名●前述のとおり、現在はイベントリスナーによる指定が主流となっているものの、依然イベントハンドラが用いられる場面もあるので、このようなイベントの指定方法があるということは理解しておくとよいでしょう。
イベントを使って応募フォームを作ってみよう
イベントについて理解できてきたところで、実際にイベントを使ってプログラムを作ってみましょう。この項目では簡易的な応募フォームの作成方法を紹介します。
①HTMLファイルを作成する
まずHTMLファイルを作成します。
今回は「応募する」ボタンがクリックされたタイミングで応募フォームを表示させるようにします。
以下のコードをHTMLに追加すると「応募するボタン」「フォーム（名前、年齢）」「送信するボタン」が表示されます。
■例1. 応募フォームのHTMLファイル
<body>
<button id="button">応募する</button>
<form action="" id="form">
<p>氏名：<textarea id="username" name="username" cols=25 rows=1 maxlength="20"></textarea></p>
<p>年齢：<input id="age" name="age" type="number"></p>
<p><input id="submit" type="submit" value="送信する"></p>
</form>
<script src="js/app.js"></script>
</body>
②CSSファイルを作成する
次にCSSファイルを作成します。
最初に応募フォームは隠しておきたいので、フォーム部分をdisplay: none;で非表示にします。
■例2. 応募フォームのCSSファイル
#form {
display: none;
}
③JavaScriptファイルを作成する
ここからはJavaScriptファイルを作成していきましょう。
処理の流れとしては以下のとおりです。
- 第11回で紹介した「getElementById()」メソッドを使ってボタンとフォームの要素を取得
- 「addEventListener()」メソッドを使ってイベントリスナーを作成
- 無名関数でCSSファイルを変更してフォームを表示
■応募フォームのJSファイル
// 変数の指定
// フォームの要素を取得
let button = document.getElementById('button');
let form = document.getElementById('form'); // 要素を取得…①
// イベント処理
// 「応募する」ボタンをクリックしたとき
button.addEventListener('click', function() { // イベントリスナーを作成
// フォームを表示…②
form.style.display = 'block'; // スタイルを変更してフォームを表示…③
});今回はイベント「click（要素がクリックされたとき）」が発生したタイミングでフォームを表示するイベントリスナーを登録しました。
また、イベントリスナーの関数は無名関数で指定しています。名前付きの関数でも指定は可能ですが、基本的に使用頻度が高いのは無名関数なので、今のうちに使い方をマスターしておきましょう。
④作成したプログラムを動かしてみる
JSファイルまで作成できたらindex.htmlをブラウザで起動してみましょう。
下の図のように、ページを開いた時点では「応募する」ボタンのみが表示された状態ですが、ボタンをクリックする（イベント「click」が実行される）ことで関数が呼び出され、応募フォームが表示されます。
まとめ
イベントを使ってプログラムを作成する感覚は掴めてきたでしょうか？
今回はイベント「click」を使って関数を呼び出しましたが、もちろんほかのイベントでも同様に関数を呼び出すことができるので、さまざまなイベントを使って動作を確認しておくのもよいかもしれません。
今回紹介したように、イベントと関数を関連付けることで扱えるプログラムの幅はぐっと広がります。これまで学んだ条件分岐やDOMなどと併用して、より複雑なプログラムを作ってみましょう。
コメント