Webページ上（Webアプリケーション上）で、ボタンをクリックしたり画像上をマウスオーバーするなどのアクションや、ページを読み込むなどの一連の挙動を「イベント」と呼びます。
そして、それら様々なイベントに対応して発動させる処理のことを（つまり関数）を「イベントハンドラー」または「イベントリスナー」と呼びます。
スポンサーリンク
イベントには主に下記のような種類があります。
| イベント名 | アクション／挙動 | イベントハンドラー名（onイベント名） |
| click | クリックした時 | onclick |
| dblclick | ダブルクリックした時 | ondblclick |
| mouseover | マウスオーバーした時 | onmouseover |
| mouseout | マウスアウトアウトした時 | onmouseout |
| keydown | キーを押した時 | onkeydown |
| keypress | キーを押して放した時 | onkeypress |
| load | HTML文書の読み込みが完了した時 | onload |
| unload | ページを移動する時 | onunload |
上記以外にも多くのイベントが存在します（下記リンク参照）。
Event reference
イベントに対応した処理の記述方法は、大きく分けて3つに分けられます。
・HTML要素の属性としてのイベントハンドラー
・DOM要素のプロパティにイベントハンドラーを指定
・イベントリスナー
具体的なイベントハンドラー／イベントリスナーのコードを説明していきます。
HTML要素の属性としてのイベントハンドラー
例1
|
1 |
<div id="text" onclick="window.alert('テスト')" style="background:yellow;">テキスト</div> |
HTMLタグ内にonclick属性、つまりイベントハンドラー名を属性として記述し、アラートを呼び出しています。下記の例2では、JavaScriptの部分を関数でまとめています。
例2
|
1 2 3 4 5 6 7 8 9 |
<div id="text" onclick="showMessage()" style="background:yellow;">テキスト</div> <script> function showMessage(){ window.alert('テスト'); } </script> |
DOM要素のプロパティにイベントハンドラーを指定
例3
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="text" style="background:yellow;">テキスト</div> <script> window.onload = function() { var obj = document.getElementById('text'); obj.onclick = function(){ window.alert('テスト'); } } </script> |
例1、2と違うのは、HTMLの属性としてイベントハンドラー名を記述していない点です。JavaScriptのコードとHTMLは混在させないようにするのが理想的です。
5行目
onloadイベントハンドラーはWebページの読み込みが完了した際に呼び出されるイベントハンドラーです。DOM要素が全て読み込まれた後でないと、下記で説明するようなDOMによる処理は実行されません。詳しい挙動は下記の関連ページをご覧下さい。
関連ページ
DOMContentLoadedイベントとloadイベントの違い
6行目
idがtextのdiv要素を取得し、objオブジェクト（要素オブジェクト）に代入しています。要素オブジェクトについては下記の関連ページをご覧下さい。
関連ページ
getElementByIdについて[DOM][ノード][Element]
8行目
objオブジェクトのプロパティとして、onclickイベントハンドラーを設定しています。つまり、objオブジェクト（要素オブジェクト）をクリック（click）するとアラートが呼び出される関数が呼ばれます。
下記の例4では、obj.onclickに対して２つの関数（つまりイベントハンドラー）を設定していますが、結局呼ばれるのは二つ目の関数のみです。このようにある要素（例ではdiv要素）のイベント（例ではonclick）に対して、ひとつの関数（イベントハンドラー）しか設定できません。この問題を解決するのが「イベントリスナー」です。
例4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div id="text" style="background:yellow;">テキスト</div> <script> window.onload = function() { var obj = document.getElementById('text'); obj.onclick = function(){ window.alert('クリック1'); } obj.onclick = function(){ window.alert('クリック2'); //こちらのみが呼ばれる。 } } </script> |
イベントリスナー
例5
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="text" style="background:yellow;">テキスト</div> <script> window.onload = function() { var obj = document.getElementById('text'); function fnc1(){ window.alert('クリック1'); } function fnc2(){ window.alert('クリック2'); } obj.addEventListener( 'click', fnc1, false ); obj.addEventListener( 'click', fnc2, false ); } </script> |
16、17行目
objオブジェクトにaddEventListenerメソッドを設定しています。
addEventListenerの第1引数にはイベント名、第2引数には呼び出したい関数名、第3引数にはイベント伝搬の設定をします。通常はfalseで良いでしょう。イベント伝搬の挙動（キャプチャフェーズ／ターゲットフェーズ／バブリングフェーズ）については本記事においては説明しません。
objオブジェクトのクリック（click）イベントに対してfnc1、fnc2と２つの関数を設定しているのが分かります。この関数がいわゆるイベントリスナー関数です。実際にクリックしてみると、例4と違い「クリック1」「クリック2」とメッセージが表示され、２つの関数が呼ばれているのが分かります。
