【もりけん塾】JS課題13 addEventListener/ モーダルウィンドウ / fetch

現在、もりけん塾で
マークアップエンジニアの方がフロントエンドエンジニアになる為の課題に取り組んでいます。
今回は課題13の実装で学んだことをブログへまとめます。

課題

①ボタンをクリックしたらモーダルが表示
②モーダル内のボタンをクリックしたらfetchを使用しJSONデータを取得
(データ取得の間はくるくるさせる)
③取得したデータを加工し、ブラウザに表示

今回実装したコード

See the Pen Click modal & Click Request by Sae (@Sae_codepen) on CodePen.

課題を実装するにあたりイベントハンドラについて調べました！
以下、学んだことをまとめていきます。

addEventListener

element.addEventListener(event, handler[, phase]);

イベントは以下の様な流れをするそうです

① イベント発生
② キャプチャリングフェーズ
最上位にあるwindowオブジェクトから下位要素にイベントが伝播する
③ ターゲットフェーズ
イベントの発生元に到達
④ バブリングフェーズ
イベントの発生元から最上位のwindowオブジェクトまで伝播する

イベントバブリング

イベントが親へ親へと流れていくことを イベントバブリング という

以下の例を見ると どの様にイベントバブリングが起きているかがわかります

See the Pen Untitled by Sae (@Sae_codepen) on CodePen.

一番下位要素のbuttonをクリックすると…
button→div→body とイベントが伝播していることがわかります

イベントキャプチャ

addEventListenerの第三引数にtrueを指定すると、
伝播の流れが変わり イベントキャプチャが行われます
(使用されるケースは, ほとんどない とありました…)

document.getElementById('js-button').addEventListener('click', () => {
  alert("button"); 
},true);

See the Pen Untitled by Sae (@Sae_codepen) on CodePen.

先ほどと同様、最下位の要素buttonをクリックすると
今回は最上位のbodyから順に下位へイベントの伝播が起きていることが確認できました

onclick

onclickもaddEventListenerと同様、
クリックが起きた際のイベントハンドラを設定することができる
またクリックだけではなく、onの後にイベントの種類を指定することも可能

on<event>

addEventListenerとの違いをまとめてみました

参考記事

Event Bubbling and Capturing in JavaScript

How to Handle JavaScript Event Propagation Life Cycle

blog.bitsrc.io

ブラウザイベントの紹介

ja.javascript.info

---