addEventListenerについて

JavaScript

onclickは一つの要素に同じ種類のイベントは１つしか設定できない
そこで、addEventListenerを使うのだが、IE8以下では対応していない。
E8以下に対応するためにはattachEventを使うのだが、ブラウザによって処理を分ける必要がある。
今回は、addEventListenerで複数の処理が行える事と第3引数useCapture(false,true）について検証してみる。
例）対象の要素.addEventListener(何か起きたら,何かをする,false | true);

※trueの検証をするためHTMLは入れ子を作っておく。

＜HTML＞

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript" charset="utf-8" />
<title>イベント</title>
<script type="text/javascript" src="hellow.js" charset="utf-8"></script>
</head>
<body>
	<div id="parentsbox">
		<div id="box">ボックス
			<button id="btn">アラートの表示</button>
		</div>
	</div>
</body>
</html>

＜JSファイル＞

/*onclickは一つの要素に同じ種類のイベントは１つしか設定できない
//そこで、addEventListenerを使うのだが、IE8以下では対応していない。
/IE8以下に対応するためには、attachEventを使う必要があるが、ブラウザによって処理を分ける必要がある。
//例）対象の要素.addEventListener(何か起きたら,何かをする,false);
*/
window.onload = function(){
	//btn要素を取得
	var btn = document.getElementById('btn');
	var parentsbox = document.getElementById('parentsbox');
	var box = document.getElementById('box');

	btn.addEventListener('click', function(){
		box.style.backgroundColor ='red';
	},false);
	
	//⑤第三引数が同じ『false』だった場合子が優先される
	parentsbox.addEventListener('click', function(){
		//クリックされたらアラーとを出す
		alert('クリック1');
	},false);

	//④第三引数が同じ『false』だった場合子が優先される
	box.addEventListener('click', function(){
		//クリックされたらアラーとを出す
		alert('クリック2');
	},false);
	
	//③第三引数が同じ『false』だった場合子が優先される
	btn.addEventListener('click', function(){
		//クリックされたらアラーとを出す
		alert('クリック3');
	},false);	
	
	//②第三引数が同じ『true』と『false』だった場合、『true』が優先される
	box.addEventListener('click', function(){
		//クリックされたらアラーとを出す
		alert('クリック4');
	},true);

	//①第三引数が同じ『true』だった場合、親が優先される。
	parentsbox.addEventListener('click', function(){
		//クリックされたらアラーとを出す
		alert('クリック5');
	},true);
};

＜結果＞
・『true』と『false』では『true』が優先される
・同じ『true』だった場合、親が優先される
・同じ『false』だった場合、子が優先される