DOM Event Listeners が発生する順番を観察する

1. このページの目的

DOM イベントリスナーの発生タイミングを観察する。

Explore DOM Events の細かいところを調べるために、このページを作成した。

2. デモ

ボタンをクリックし、実行されるリスナーの順番を観察する。

Output を参照するには、Console を開いてください。

3. ソースコード

ブラウザで本ページのソースを開くと、コードを見ることができます。

4. DOM Events のイメージ図

5. 参考

• JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー - GIGAZINE
• Explore DOM Events
• EventTarget.addEventListener() - Web APIs | MDN
• Passive event listeners | Can I use...