JavaScriptからイベントを処理する方法を紹介します。

イベントハンドラの設定

特定のイベントが発生したときに、そのイベントを処理する関数を「イベントハンドラ」と呼びます。イベントハンドラを設定する方法はいくつかありますが、ここではJavaScriptにてハンドラを設定する方法を紹介します。例えば、以下のように、startというID属性を持つHTMLのボタンがあるとします。

<button id="start">Start</button>

このボタンがクリックされたときに、何らかの処理を行いたい場合は、以下のように、clickイベントに対してハンドラ(イベントリスナとも呼びます)を設定します。

// ID属性を指定して、ボタン要素を取得
var btn = document.getElementById("start");
// clickイベントに対して、startSomething関数をハンドラとして設定
btn.addEventListener('click', startSomething);

// 以下、startSomething関数の定義
function startSomething(e) {
    console.log("start");
     :
};

もちろん、startSomething関数を、独立した関数として定義する必要はありません。 匿名メソッドとして(addEventListenerの引数として)実装してもよいです。