Webページのイベントハンドラ

Webページそのもの、またWebページに配置されたHTML要素に対しては、「イベント」の設定を行うことができます。

イベントとは、「ページが読み込まれた」「HTML要素がクリックされた」「キーボードのキーが押された」など特定の状況が生じることです。Webページや各HTML要素には、イベントに応じて呼び出されるJavaScriptの「イベントハンドラ」を設定できます。

このイベントの仕組みを使うと、「ページが読み込まれたらJavaScriptで記述してあるゲームを起動する」「特定のHTML要素がクリックされたら特定のJavaScript関数を呼び出す」といったことができるわけですね。

ゲームでよく使うイベントは

クリックされた時に発生するClickイベント
キーボードのキーが押された時に発生するKeyDownイベント
キーボードのキーが離された時に発生するKeyUpイベント
内容が変更された時に発生するchangeイベント

といったあたりでしょうか。スマートフォンのブラウザでは、ジェスチャーやマルチタッチに関するイベントを設定できる場合もあります。

こうしたイベントを処理するためのイベントハンドラ（JavaScriptコード）を設定する場合は、

1.HTML要素の属性（on～）を設定する

2.JavaScriptのaddEventListener()関数を使う

方法があります。

まず、HTML要素自体にイベントを設定する方法を見てみましょう。

例として「クリックされたらメッセージダイアログを出すspan要素」を作ってみます。下の「onclickテスト」という文字列をクリックしてみてください。

onclickテスト

この部分のHTMLソースは、以下のようになっています。

<p><span onclick='alert("クリックされました")'>onclickテスト</span></p>

このようにon～というイベントハンドラ設定のためのタグの属性が用意され、そこにJavaScriptのコードを設定するわけですね。

次に、addEventListenerの方も試してみましょうか。

下の「clickイベントハンドラテスト」の部分をクリックすると、設定されているイベントハンドラが起動され、「イベントが生じた要素のid」が表示されます。

Clickイベントハンドラテスト

この部分のソースは、以下のとおりです。

<p><span id="event_test1">Clickイベントハンドラテスト</span></p>

<script>

var elm1 = document.getElementById('event_test1');

elm1.addEventListener("click", onClickHandler1, false);

function onClickHandler1(e) {
	alert("イベント発生オブジェクトID:" + e.target.id);
}

</script>

addEventListener()は、引数としてイベント種別、イベントハンドラ（JavaScript関数）、イベント伝達に関するフラグという3つの引数を取ります。イベント種別は「click」「keyDown」「keyUp」などハンドラを追加するイベントの種類を文字列で指定し、そのイベントが生じると二番目の引数の関数が呼び出されるわけですね。

最後の引数では、イベントハンドラが実行される優先順位を指定します。

ある要素でイベントが生じると、そのイベントは要素を含む親にも伝達されますが、その順番は通常「イベントが生じた要素に登録されているイベントハンドラ」「親要素のイベントハンドラ」です。上の例では、span要素でclickイベントが生じるのでまずspan要素に登録されているイベントハンドラが（もしあれば）呼び出され、次にspanを包むp要素のイベントハンドラが（もしあれば）呼び出されます。

しかし、addEventListener()の第三引数にtrueを指定すると、この通常のイベント呼び出しの前にイベントハンドラが呼び出されるので、「最優先」で（自分自身と自分が包み込んでいる要素の）イベントを処理できるわけです。