イベントのバブリングやキャプチャリングなどについて復習、確認する。

<h2>情報源</h2>
<ul>
<li>&quot;3.1. Event dispatch and DOM event flow&quot;</li>
</ul>
<p><a href="https://www.w3.org/TR/DOM-Level-3-Events/#event-flow" target="_blank" rel="nofollow noopener noreferrer">https://www.w3.org/TR/DOM-Level-3-Events/#event-flow</a></p>
<h2>まとめ</h2>
<ul>
<li>アプリケーションは<code>dispatchEvent()</code>メソッドを使用することでイベントを発火することができる。</li>
<li>発火したイベントは決まったDOMイベントフローを通ってDDOM treeを伝搬していく。</li>
<li>イベントオブジェクトはevent targetに向けてディスパッチされる。ディスパッチが開始される前にevent objectの伝搬経路が決定されている必要がある。</li>
<li>伝搬経路（propagation path）とはイベントが通過するcurrent event targetの順番リストである。（イベントの伝搬ではcurrent event targetが次々に他のDOM要素に移り変わるがその移り変わる順番のリストを伝搬経路と呼んでいる。）</li>
<li>伝搬経路はドキュメントの木の階層を反映している。</li>
<li>伝搬経路の最後の要素はevent targetである。リストで先行する要素はターゲットの親要素である。</li>
<li>伝搬経路が決定されるとイベントオブジェクトはイベントフェーズを通って渡されていく。</li>
<li>イベントフェーズには3つあり、キャプチャリングフェーズとターゲットフェーズとバブルフェーズである。</li>
<li>各フェーズはサポートされていない場合（イベントによってサポートされていなかったりする）やイベント伝搬がストップする場合はそのフェーズがスキップされる。</li>
<li>キャプチャフェーズはWindowを起点にevent targetの親要素を伝搬しevent targetに向かってevent objectが渡されるフェーズである。</li>
<li>ターゲットフェーズはevent objectがevent targetに到着した段階である。バブリングが停止されている場合、イベント伝搬はここで終了する。</li>
<li>バブルフェーズはキャプチャフェーズの逆順でevent objectが伝搬する段階である。</li>
</ul>
<h2>特筆するべき知見</h2>
<ul>
<li>イベントオブジェクトが伝搬経路に沿って渡されていくことでイベントが伝搬する。</li>
</ul>


DOM Level 3 Eventsを理解する