カテゴリー別アーカイブ: イベント

JavaScript イベントの伝搬を可視化するデモをつくってみた

JavaScript (やActionScript) のイベントの伝搬って簡単そうで考えだすと結構こんがらがってしまうので (少なくとも自分は…),

イベントの伝搬 (バブリング) を可視化するデモをつくってみました.

右側の<div>ブロックをclickするとイベントの伝搬 (バブリング) に応じて, event.currentTarget (= イベントリスナーが設定されている要素) は円に, event.target (イベントが発生した要素) は, 赤でハイライトするようになっています.

また, イベント伝搬の中止 (stopPropagation, stopImmediatePropagation) やバブリングフェーズかキャップチャリングフェーズでイベントリスナーを設定するかを選択可能です.