티스토리 뷰

개발공부/기술면접 대비

[JS] 이벤트 버블링 & 이벤트 캡처링

chihoya 2023. 4. 5. 22:06

이벤트 버블링(Event Bubbling)

이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날때까지 반복되면서 핸들러가 동작하는 현상을 말한다.

버블링 예제코드

 <body>
    <div class="DIV1">
      DIV1
      <div class="DIV2">
        DIV2
        <div class="DIV3">DIV3</div>
      </div>
    </div>
  </body>

 

const divs = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divs.forEach((div) => {
  div.addEventListener("click", clickEvent, false); // false 생략가능하다.
});

div를 클릭하면 해당하는 클래스의 이름이 콘솔로 출력되는 코드다.

JS는 기본적으로 버블리이 발생하기 때문에 DIV3을 클릭한다면 콘솔에는 DIV3, DIV2, DIV1순으로 출력이 된다.

즉, 하위요소에서 상위요소로 전파되는 것이다.

 

이벤트 캡처링(Event Capturing)

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려간다.

캡처링 예시

const divs = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divs.forEach((div) => {
  div.addEventListener("click", clickEvent, true);
});

addEventListener 의 옵션 객체에 { capture: true } 또는 true를 설정해주면 캡처링을 구현할 수 있다.

DIV3를 클릭한다면 위에서부터 찾아 내려오기 때문에 콘솔에는 DIV1, DIV2, DIV3이 순서대로 찍힌다.

즉, 상위요소에서 하위요소로 전파되는 것이다.

 

이벤트 버블링 & 캡처링 막기

  • 이벤트 객체의 메서드인 .stopPropagation()을 사용
    stopPropagation()은 해당 이벤트가 전파되는걸 막는다. 단 현재 이벤트는 처리된다.
  • 요소에 할당된 다른 핸들러 동작도를 막으려면 .stopImmediatePropagation()을 사용
    stopImmediatePropagation() 메소드를 호출하면, 이벤트 전파와 더불어 형제 이벤트 실행을 중지한다.
  • .preventDefault()는 이벤트 전파 뿐 아니라, 기본 이벤트 동작 수행을 막는다.
    <a href="url">의 링크 기능을 막거나, <form>태그의 submit 이벤트를 취소하는등
    기본으로 수행하는 동작들을 막는다.

 

정리

  • 이벤트 버블링 : 하위 요소에서 상위오소로 전파
  • 이벤트 캡처링 : 상위요소에서, 하위요소로 이벤트 전파
  • .stopPropagation() : 이벤트 전파 중지
  • .stopImmediatePropagation() : 이벤트 전파 중지 + 형제 이벤트 실행 중지
  • .preventDefault() : 이벤트 전파 중지 + 형제 이벤트 실행 중지 + 이벤트 기본 동작 중지

 

출처
https://velog.io/@yuni/JS-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EC%BA%A1%EC%B2%98%EB%A7%81

 

JS - 이벤트 버블링 & 이벤트 캡처링

자바스크립트에서 이벤트 버블링과 캡처링은 이벤트 모델에서 이벤트가 발생한 요소로부터 상위 요소로 전파되는 방식을 뜻합니다.HTML에서 이벤트는 일반적으로 아래 3가지 단계를 거쳐 전파

velog.io

https://velog.io/@tlatjdgh3778/%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%B2%84%EB%B8%94%EB%A7%81%EA%B3%BC-%EC%BA%A1%EC%B2%98%EB%A7%81%EC%97%90-%EB%8C%80%ED%95%9C-%EC%A0%95%EB%A6%AC

'개발공부 > 기술면접 대비' 카테고리의 다른 글

CSR 과 SSR의 차이  (0) 2023.04.06
[JS] require vs import  (0) 2023.04.06
[JS] 객체지향 프로그래밍  (0) 2023.04.04
[JS] forEach vs Map  (0) 2023.04.04
CORS  (0) 2023.04.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함