イベントの伝播

前回の投稿でイベントの伝播(バブリングとキャプチャリング)について書きました。

バブリングはDOMツリーの各要素でイベントハンドラが呼び出された後、ツリーの親要素のイベントハンドラが呼び出されます。
親要素で登録したイベントハンドラは、その子要素でもイベントハンドラとして機能します。

実際にどんな動きになるのか、試してみます。
下記の簡単なサンプルを用意しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>

<body>

<div id="test1p">
	テスト親
	<div id="test1c">
		テスト子
	</div>
</div>

<script type="text/javascript">
// 親要素にクリックイベントを登録
let element_test1p = document.getElementById('test1p');
element_test1p.addEventListener('click',  testclick1p, false);
function testclick1p() {
	alert('on p !');
}

// 子要素にクリックイベントを登録
let element_test1c = document.getElementById('test1c');
element_test1c.addEventListener('click',  testclick1c, false);
function testclick1c() {
	alert('on c !');
}

</script>

</body>
</html>

サーバ上のHTMLはこちら(test1.html)

画面上には2つのDOM要素「テスト親」と「テスト子」があります。
親要素には「test1p」、子要素には「test1c」のidを割り当てています。

この時、「テスト親」をクリックすると「on p !」のアラートだけが表示されます。
次に「テスト子」をクリックすると「on c !」のアラートが表示され、続いて「on p !」のアラートだけが表示されます。
(呼び出される順としては子要素 → 親要素でした)

このように、親要素で登録したイベントハンドラはネストされている子要素のDOMにも同時に登録されます。

イベントのバブリングについて注意点

バブリングする際の注意点は
・forcus、blur、scrollはDocumentまでバブリングされ、それ以上のDOMにはバブリングされない
・Windowsオブジェクトのloadイベントはドキュメント全体がロードされた時のみに発生する

イベントのキャプチャリングについて

イベントのキャプチャリングは、イベントのバブリングとは伝播する順番が異なります。
Windowオブジェクト→Dobumentオブジェクト→bodyオブジェクト→HTMLのDOM構造(親要素→子要素→孫要素…)、の順でのキャプチャリングハンドラが呼び出されます。
DOM構造がネストされている場合は、最後の末端のDOM要素まで順に呼び出されます。

イベントキャプチャリング

キャプチャリングの際にイベントターゲットにイベントが伝播する前にイベント情報を参照することができます。
具体的な例は別な投稿で試す予定です。