Frontend/Javascript

Event Bubbling/Capturing

간지나제 2021. 3. 9. 23:14

쉽게 말해 이벤트에 전파이다.
browser가 이벤트를 어떻게 인식할까를 생각한다면 조금 더 와닿게 쉽다.

html element들은 트리구조로 되어있고
body가 최상위 구조라고 한다면 그 밑에 자식들을 두는 그런 형태이다.

<html>  
    <body>  
        <div class="one">t  
            <div class="two">tes
                <div class="three">test</div>
            </div>  
        </div>  
    </body>  
</html>
function handleClick(event) {
    console.log(event.currentTarget.className);
}

const one = document.querySelector(".one");
one.addEventListener("click", handleClick);

예를 들어 이 상태에서 three를 클릭하면 one이 console에 찍힌다.

three를 클릭했는데도 one이 찍힌 이유는 click event가 상위element인 one으로 버블링 되었기때문이다.

클릭이벤트는 발생하는거고 그것을 Listen하는 것을 "one"이라는 class라는 가지는 div가 하는 것이다.

반대로 상위구조에서 하위구조로 이벤트가 전달되는 것도 가능한데

그것을 capturing이라고 한다.

잘 쓰진 않으나 유용할 때가 있다고 한다.

ul태그에 li요소가 새롭게 추가될 때 이벤트를 넣어줘야하는데 굳이 그렇게 할 필요없이 상위요소인 ul태그에 Listener를 추가함으로써 버블링을 활용할 수 있다.

joshua1988.github.io/web-development/javascript/event-propagation-delegation/