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

JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して

[sisya]

個人的には「知ってる人にはわかりやすい」という印象を受けた。仕組みをそのまま可視化しているので「どうやって動いているのか知りたい」という人にならわかりやすいが、初学者には工場見学程度にしか見えない。

[mohno]

「イベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれる」

[circled]

自分でコード書いて動きを確かめるのを繰り返すのが一番の近道よね。

[kazkun]

前に見たヤツの説明ね。まだ使ってなかったけどやっぱりいい感じだね。

[spark7]

この手のは実戦で悪戦苦闘した方が身につく感あるな

[mayumayu_nimolove]

はてなでは前に見たな

[kenzy_n]

javascriptを体験する