今回は、JavaScriptにおけるイベント処理についてのプログラミングについて学習をしていきましょう！
「そもそもイベント、イベントハンドラって何？」
「イベント処理の作り方を知りたい」
「ボタンにイベント処理を追加したい」
このような内容も含めて、本記事では以下のような構成で解説していきます！
【基礎】「イベントハンドラ」の使い方
【実践】ボタンイベントの作り方
この記事で、イベント処理をしっかり学習してスキルアップを目指していきましょう！
イベントとは
みなさんは「イベント」とは何かわかりますか？
JavaScriptにおける「イベント」とは、ウェブページ上で発生するあらゆるアクションの総称です。
例えば、ボタンのクリック、フォームへの入力、ページの読み込み、マウスポインタを要素の上に合わせるなど、様々な出来事がページ上で発生します。
イベントハンドラとは
「イベント」と「イベントハンドラ」の違いは何でしょうか？
ハンドラとは英語のhandlerであり動詞handle（扱う）から由来しています。
実際、様々なイベントの発生時に処理を行うことが出来ます。
例えば、ボタンがクリックされた際にアラートを表示させる、ページが読み込まれた際に何かを表示させる、など様々な処理が考えられますよね。
このようなイベントの処理を行うのが「イベントハンドラ」の役目です。
ちなみに「on」キーワードの隣にイベント名をくっつけたものがイベントハンドラのネーミングパターンとなっています。
イベントハンドラの一覧
では、イベントハンドラが何か学んだところで、主要なイベントとそのイベントハンドラをリストアップしてみました。
| イベント名 | イベントハンドラ名 | 説明 |
| click | onclick | 要素がクリックされた時 |
| change | onchange | 要素の内容が変更された時 |
| keypress | onkeypress | キーボードのキーを押した時 |
| load | onload | ページが読み込まれた時 |
| mouseover | onmouseover | 要素にマウスのカーソルが重なった時 |
| select | onselect | テキストなどを選択した時 |
| dblclick | ondblclick | 要素がダブルクリックされた時 |
| drag | ondrag | 要素がドラッグされた時 |
| scroll | onscroll | スクロールバーがスクロールされた時 |
上の表にまとめイベントハンドラはどれも様々なシチュエーションに使えるので、ぜひ覚えておきたいものばかりです。
イベントハンドラの使い方
では、実際にイベント発生時の処理を設定してみましょう。
今回の記事では、changeイベント、すなわちonchangeイベントハンドラを使用してみましょう。
イベントハンドラを登録する方法はひとつではありません。
今回は、3種類ほどご紹介していきたいと思います。
HTML属性を使う方法
まず最初にHTMLのイベント属性を使用してイベント処理を行ってみましょう。
以下のコードをご覧ください。
<html>
<body>
<p>Please enter something...</p>
<input type="text" id="mytextbox" onchange="myfunc()">
<script>
function myfunc() {
console.log("Hello world!");
}
</script>
</body>
</html>
実行結果は以下の通りです。
Hello world!
上のコードでは、まず以下のような簡単なテキストボックスを作成しました。
そして、inputタグのコードにonchange属性を追加しました。
この場合、onchangeイベントハンドラを発動させるために、onchange属性の値に関数myfuncを指定しました。
myfuncはHello world!とJavaScriptコンソールに表示させる、シンプルな関数です。
すると、テキストボックスに何かを入力した際にJavaScriptコンソールにHello world!と表示させる事が出来ました。
イベントプロパティを使う方法
では次にご紹介する方法は、イベントプロパティを使用する方法です。
以下のコードをご覧ください。
<html>
<body>
<p>Please enter something...</p>
<input type="text" id = "mytextbox" onchange="myfunc()">
<script>
var mybox = document.getElementById("mytextbox");
function myfunc() {
console.log("Hello world!");
}
mybox.onchange = myfunc();
</script>
</body>
</html>
実行結果は以下の通りです。
Hello world!
上のコードでは、ドット（.）を使用し、onchangeプロパティの値として指定したい関数を代入します。
getElementById関数で任意の要素を取り出して変数myboxに格納しました。
そして、その要素のonchangeプロパティの値に関数を設定しています。
指定した関数はmyfuncで、console.log関数を使用してHello world!と表示させるシンプルな関数です。
ご覧いただけるように、myboxと記述した後にドットを使用してonchangeプロパティにアクセスしています。
この場合は、先ほどとは違いHTML要素の中身を変更しません。
イベントリスナーを使う方法
では、イベントリスナーを使用する方法をご紹介します。
先ほど紹介した二つの方法はシンプルですが、欠点がひとつあります。
同じ要素の同じタイプのイベントに複数の処理の登録が出来ないというところです。
複数の処理を登録しようとすると、以前に登録した処理が最新のものに上書きされてしまうのです。
イベントリスナーを使用する方法は、複数のイベントを登録することを可能にします。
イベントリスナーを使うということは、JavaScriptの既存メソッドのaddEventListenerを使用するということです。
以下のコードをご覧ください。
<html>
<body>
<p>Please enter something...</p>
<input type="text" id = "mytextbox" onchange="myfunc()">
<script>
var mybox = document.getElementById("mytextbox");
function myfunc() {
console.log("Hello world!");
}
mybox.addEventListener("change",myfunc);
</script>
</body>
</html>
実行結果は以下の通りです。
Hello world!
上のコードでは、フォームの作成や要素の取り出しなどは先ほどと何も変わりません。
変わるのは、その要素のメソッドaddEventListenerを使用し、処理を登録している部分です。
addEventListenerはふたつの引数を必要とします。
1つ目はイベント名です。
今回は「フォームの内容が変更された時」なので、changeイベントです。
ここではイベントハンドラではなくイベント自体を指定するので、onは付けなくて良いです。
2つ目は、処理の際に実行したい関数です。
この場合も、myfuncというHello world!とコンソールに表示させるシンプルな関数を指定してみました。
イベントリスナーについてのより詳しい説明は以下のリンクを参照してください。
ボタンイベントの作り方
この章では、ボタン要素にイベント処理を追加する方法について見ていきましょう！
主に、ラジオボタンにイベント処理を実装する方法について学んでいきます。
ラジオボタンを作ってみよう
まずは簡単なラジオボタンのフォームを作ってみましょう。
ラジオボタンは、いくつかの選択肢から1つだけクリックすることができるのが特徴です。
次のサンプル例を見てください！
この例では、「１」「１０」「１００」という3つの選択肢を配置したラジオボタンになります。
注目して欲しいのはいずれのフォーム要素にも「name属性」を設定している点です。
これにより、どれか1つをクリックした時にJavaScriptから簡単に値を取得できるようになるのです。
ラジオボタンをクリック(選択)してイベント処理を行う
それでは、実際にJavaScriptからラジオボタンのクリックイベントの処理をプログラミングしていきましょう。
まず、該当のフォーム要素を取得するには次のような構文を利用できます。
document.formタグのname属性値.inputタグのname属性値
このようにdocumentに続けてフォーム要素のname属性値を連結していくだけで目的の要素を取得することができるのです。
そのため、選択したラジオボタンの値を取得するには次のようになります。
document.myform.myradio.value
さらに、クリックした時に値を取得するには次のようなイベント処理を記述することができます。
document.myform.addEventListener('change', function() {
console.log(document.myform.myradio.value);
})
「document.myform」に続けてaddEventListenerで「change」イベント処理を記述することで、クリックされた時の処理を制御できます。
あとは、コールバック関数内で選択されたラジオボタンの値を取得すれば良いわけですね。
まとめ
今回はJavaScriptプログラミングにおいてよく見かける「on○○」、すなわちイベントハンドラやその使い方を解説しました。
イベント処理はJavaScriptプログラミングでは頻繁に出現するものなので、覚えておくと便利です。
みなさんもこの記事を通して、イベント処理やイベントハンドラについての知識をどんどん深めていってくださいね。
