Hextomino

JavaScriptのaddEventListenerとremoveEventListenerの使い方にちょっと迷ったので、
ちょっとメモっておこうかと。

※試してみて勝手に解釈した内容なので間違っている可能性が充分にあります。
読まれる場合は参考程度にどうぞ。

両メソッドの三つ目の引数、useCaptureに真偽値を与えることによって、
キャプチャリング、ターゲットノード、バブリングの、
どの段階でイベントを捕捉させるか指定することができる。
キャプチャリングはDOMツリーの上から、
バブリングはDOMツリーの下から探索する。

イベントが発生すると、ＤＯＭツリーの上から順にどのエレメントのオブジェクトかを探索していく。
たとえば、次のようなHTMLの場合。

	

		

			テキスト
		
	

エレメントそれぞれにイベントを追加する。

var l1 = document.getElementById('level1');
var l2 = document.getElementById('level2');
var para = document.getElementById('para');

l1.addEventListener(
	'click',
	function() { alert('level1'); },
	false);
l2.addEventListener(
	'click',
	function() { alert('level2'); },
	false);
para.addEventListener('click',
	function() { alert('para'); },
	false);

useCaptureをfalseにした場合、イベントはバブリング段階で捕捉される。
なので、"テキスト"をクリックした場合は、

para → level2 → level1

の順でイベントが捕捉される。

useCaptureをtrueにした場合、そのイベントはキャプチャリング段階で捕捉される。
たとえば、次のように書き換える。

level2.addEventListener(
	'click',
	function() { alert('level2') },
	true);

この場合、"テキスト"をクリックすると、

level2 → para → level1

の順でイベントが捕捉される。

要するに、

useCaptureがtrueのとき

キャプチャリング(DOMツリーを上から順にたどっていく)の際に捕捉。
バブリングの際には捕捉されない。

useCaptureがfalseのとき

バブリング(DOMツリーを下から順にたどっていく)の際に捕捉。
キャプチャリングの際には捕捉されない。

ってことになる。