Javascript

이벤트 버블링

근혁 2022. 2. 24. 19:05

 

이벤트 버블링(Event Bubbling)

특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어가는 특성을 의미함

상위의 화면 요소?

HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며 body 태그를 최상위 요소라고 부른다.

{
    <body>
        <div class="one">
            <div class="two">
                <dib class="three">
                <div>
            <div>
        <div>
<body>
}
{
  var event = document.querySelectorAll("div");
        event.forEach(function(div) {
            div.addEventListener("click", logEvent);
        });

    function logEvent(event){
        console.log(event.currentTarget.className)
    }
}

위 코드는 세 개의 div 태그에 모두 클릭 이벤트를 등록하고 클릭했을 때 logEvent 함수를 실행시키는 코드다 여기서 위 그림대로 최하위 div 태그 class="three"를 클릭하면 결과는 아래와 같이 나온다

  • three
  • two
  • one

div 태그 한 개만 클릭했을 뿐인데 3개의 이벤트가 발생되는 이유는 브라우저가 이벤트 감지하는 방식 때문이다. 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상휘에 있는 화면요소까지 이벤트를 전파한다.