JavaScriptのイベント伝播を動きで理解する
JavaScriptのDOMイベントでは、クリックした要素だけでなく親要素にもイベントが伝わります。JS EVENT FLOW VISUALIZERは、その流れをDOMツリーと画面上の要素で同時に可視化し、イベント伝播を理解しやすくするWEB LAB実験です。
可視化したい流れ
- キャプチャリングフェーズ
- ターゲットフェーズ
- バブリングフェーズ
- イベントリスナーが実行される順序
- stopPropagationを使った場合の変化
なぜ可視化するのか
イベント伝播はコードだけを読んでもイメージしにくく、親子要素が増えるほど混乱しやすくなります。どの要素をイベントが通過しているかを色やアニメーションで示すことで、実際の挙動とコードの関係を結び付けます。
想定ユーザー
JavaScriptでクリックイベントを扱い始めた人、イベントデリゲーションやstopPropagationの挙動が分かりにくい人を主な対象にします。
CODE LABとの役割分担
CODE LAB : HTML & CSSのような総合学習環境ではなく、JavaScriptのイベント伝播という一つのテーマを深く理解するための専門可視化ツールとして設計します。
研究ステータス
現在はNEXT EXPERIMENTS段階です。DOMツリーの見せ方、イベント順序のアニメーション、初心者向け解説の量を検討します。