event bubbling이란?

브라우저는 특정 화면 요소에서 이벤트가 발생하면 해당 이벤트를 최사위 화면 요소에 까지 이벤트를 전파시키는 특성을 갖는다. 이러한 해당 이벤트가 더 상위의 화면 요소*들로 전달되어 가는 자바스크립트의 특성을 이벤트 버블링이라고 한다.

💡 상위의 화면 요소 : 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 형태로 구성되어있다.

event bubbling 개념을 사용하여 form 전체에 addEventLister 준 다음 userID, userPW 에게 이벤트를 발생시키면, form 안의 요소들이 모두 해당 이벤트를 들을 수 있다.

위의 경우도 그렇게 해서 form 안에서 발생하는 이벤트를 모두 잡을 수 있도록 선택한 다음 idInput, pwInput 변수를 생성하여 각 항목별로 event 값을 끌어오도록 하였다.

이런식으로 event bubbling을 사용하면 전역변수 남용을 줄일 수 있어 보다 코드를 깔끔하게 만들 수 있다.

같이 공부하면 좋은 내용

• event capture
• event.stopPropagation()