JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー

JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。

Explore DOM Events
https://domevents.dev/

ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると……

イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加していないため、そのまま素通りしています。この画像だけでも、イベントが発動した際は親要素から順番に「Capture」のイベントリスナーを確認していき、ターゲット要素まで来たら今度は「Bubble」のイベントリスナーを確認して親要素に戻っていく様子が見てとれます。また、ページ下部ではその伝わる最中に何が起きたのかが時系列で表示されていました。

要素の真ん中にある「＋」ボタンでイベントリスナーを追加可能です。

いくつかイベントリスナーを追加してイベントを発動させてみました。イベントが途中にあるイベントリスナーを起動しながら「親要素のCaptureフェーズ」「子要素のCaptureフェーズ」「孫要素のCaptureフェーズ」と進み、こんどは逆の順番でBubbleフェーズに設定されているイベントリスナーを起動しています。

それぞれのイベントリスナーを細かく設定することも可能です。例えば「Stop propagation」を設定してみると……

「Stop propagation」に設定されたイベントリスナーがあるフェーズでイベントの進行がストップすることが分かります。「子要素をクリックした時に親要素のクリックイベントの発動を止めたい」など、特定のケースでは非常に役立ちそう。

他にも、道中の全てのイベントリスナーを「Passive」に設定してみると……

左上の表記が「BLOCKING」から「PASSIVE」に変わり、ブラウザがよりスムーズにイベントを処理できるようになったとポップアップで表示されました。

それぞれのキーワードについてはページの左下で解説が行われているため、何か分からない単語があったらここを確認すればOK。

なお、作者の「Alex Reardon」さんによるムービー形式での解説講座が用意されており、左上の「WATCH COURSE」からアクセスできます。ただし講座は有料で、受講する場合は月額25ドル(約2750円)の会員になる必要があるとのことです。