event bubblingとは?

ブラウザには、特定のスクリーン要素でイベントが発生したときに、最もスクリーン要素に近いイベントにイベントを伝播する機能があります.これらのイベントをより高度なスクリーン要素*に渡すJavaScriptの特性をイベントbublingと呼ぶ.

💡 上部のスクリーン要素:HTMLツリーの上部にある要素.bodyラベルは一番上の要素です.

例

HTML

<div class="loginContainer">
        <h1 class="title">Westagram</h1>
        <form class="loginForm">
            <input class="userID" type="text" placeholder="전화번호, 사용자 이름 또는 이메일" />
            <input class="userPW" type="password" placeholder="비밀번호" />
            <button class="submitBtn" type="submit">로그인</button>
        </form>
        <a href="#" class="forgot_link">비밀번호를 잊으셨나요?</a>
    </div>

Javascript

const form = document.querySelector(".loginForm");

const formInput = form.addEventListener("keydown", () => {
    const idInput = document.querySelector(".userID").value.length; 
    const pwInput = document.querySelector(".userPW").value.length;
		const submitBtn = document.querySelector(".submitBtn");

    idInput && pwInput > 0 
        ? submitBtn.classList.add("activeBtn") 
        : submitBtn.classList.remove("activeBtn");
})

上記のHTMLによれば、form>userID、userPW、submitBtn、formからなる.
イベントバブルの概念を使用して、addEventListerを全体userIDに送信し、その後、userPWにイベントを送信し、formの要素はすべてこのイベントを聞くことができる.
上記の場合、formで発生したすべてのイベントを選択し、idInput、pwInput変数を作成して、各プロジェクトのイベント値を引き出します.
このようにevent bubblingを使用すると、グローバル変数の乱用を低減し、コードをより簡潔にすることができます.

一緒に勉強すればいい内容

event capture

event.stopPropagation()