イベントハンドラー／イベントリスナーについて[addEventListener]

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

<div id="text" onclick="window.alert('テスト')" style="background:yellow;">テキスト</div>

1	<div id="text" onclick="window.alert('テスト')" style="background:yellow;">テキスト</div>

HTMLタグ内にonclick属性、つまりイベントハンドラー名を属性として記述し、アラートを呼び出しています。下記の例2では、JavaScriptの部分を関数でまとめています。

例2

<div id="text" onclick="showMessage()" style="background:yellow;">テキスト</div>

<script>

function showMessage(){
	window.alert('テスト');
}

</script>

function showMessage(){

window.alert('テスト');

}

</script>

DOM要素のプロパティにイベントハンドラーを指定

例3

<div id="text" style="background:yellow;">テキスト</div>

<script>

window.onload = function() {
	var obj = document.getElementById('text');

	obj.onclick = function(){
		window.alert('テスト');
	}

}

</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による処理は実行されません。詳しい挙動は下記の関連ページをご覧下さい。

関連ページ

getElementByIdについて[DOM][ノード][Element]

8行目
objオブジェクトのプロパティとして、onclickイベントハンドラーを設定しています。つまり、objオブジェクト（要素オブジェクト）をクリック（click）するとアラートが呼び出される関数が呼ばれます。

下記の例4では、obj.onclickに対して２つの関数（つまりイベントハンドラー）を設定していますが、結局呼ばれるのは二つ目の関数のみです。このようにある要素（例ではdiv要素）のイベント（例ではonclick）に対して、ひとつの関数（イベントハンドラー）しか設定できません。この問題を解決するのが「イベントリスナー」です。

例4

<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>

window.onload = function() {

var obj = document.getElementById('text');

obj.onclick = function(){

window.alert('クリック1');

}

obj.onclick = function(){

window.alert('クリック2'); //こちらのみが呼ばれる。

}

</script>

イベントリスナー

例5

<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>

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」とメッセージが表示され、２つの関数が呼ばれているのが分かります。

Pocket

思考の葉

思考の葉

イベントハンドラー／イベントリスナーについて[addEventListener]