みかづきブログ その3

3ヶ月つづけてみました。

addEventListenerの際にuseCaptureを指定する


EventTarget.addEventListener - Web API インターフェイス | MDN


addEventListenerの第3引数でuseCaptureを指定することができます。


useCaptureがfalse

簡単にいえば子要素からイベントが発火します。


useCaptureがtrue

簡単にいえば親要素からイベントが発火します。


挙動の原因

http://www.w3.org/TR/DOM-Level-3-Events/images/eventflow.svg

Document Object Model (DOM) Level 3 Events Specification


と、キャプチャフェーズで親から対象まで辿っていき、バブリングフェーズで対象から親まで戻っていくことが原因となります。

useCapture が true のイベントは行き(キャプチャフェーズ)で発火し、false の要素は帰り(バブリングフェーズ)で発火するわけです。