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に対して2つの関数(つまりイベントハンドラー)を設定していますが、結局呼ばれるのは二つ目の関数のみです。このようにある要素(例では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と2つの関数を設定しているのが分かります。この関数がいわゆるイベントリスナー関数です。実際にクリックしてみると、例4と違い「クリック1」「クリック2」とメッセージが表示され、2つの関数が呼ばれているのが分かります。