[JavaScript] 이벤트 전달 방식 / 이벤트 버블링, 캡쳐링

8318 단어 JavaScriptJavaScript

JavaScript에서 이벤트는 단순히 자신에게만 발생하는 동작이 아닙니다.
자신의 부모, 자식 태그까지 해당 이벤트가 전달됩니다.

이러한 이벤트의 전달 방식에는 2가지가 존재합니다.

이벤트 버블링 / Event Bubbling

이벤트 버블링은 이벤트 발생시 자신의 부모(상위) 태그를 찾아 이벤트가 전파되는 방식입니다.

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

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


위와 같은 코드에서 three 클래스의 이벤트가 발동하면
같은 "click" 이벤트가 존재하는 부모(상위) 태그들의 이벤트 또한 실행되게 됩니다.

var one = document.querySelector(".one");
var two = document.querySelector(".two");
var three = document.querySelector(".three");

one.addEventListener("click", logEvent);
two.addEventListener("mouseover", logEvent);
three.addEventListener("click", logEvent);

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

동일한 HTML에서 two 클래스의 이벤트 타입을
"click"에서 "mouseover"로 바꿔 봤습니다.

three 클래스에 마우스를 올렸을 경우 two 콘솔이 찍히고
three 클래스를 클릭했을 경우 three, one 콘솔이 찍히게 됩니다.
(two 클래스는 다른 이벤트 이므로 무시!)


이벤트 캡쳐링 / Event Capturing

이벤트 켭쳐링같은 경우 버블링의 반대입니다.
이벤트가 발생한 경우 최상위 태그 body 태그에서
이벤트 발생 태그까지 내려오면서 이벤트를 전파합니다.

  div.addEventListener("click", logEvent, true);

기존의 addEventListener 메소드는 이벤트 버블링이 default(false) 값으로 지정되어 있습니다.
따라서 3번째 인자에 true를 넣어주면 이벤트 캡쳐링 방식으로 이벤트 리스너가 등록됩니다.

기존 코드에서 위와 같이 코드를 변경하고 three 클래스 이벤트를 실행해보면
최상위인 one 클래스부터 콘솔이 출력됩니다.

[프로그래머스](python) 키패드 누르기 - 2020 카카오 인턴십
사과나무(다이아몬드)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage