Event Bubbling vs Event Capturing

박광민·2023년 3월 22일
0

Event Bubbling

  • 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파되면서 같이 발생되는 이벤트 전파를 말함
    -> 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어짐

  • 브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파됨

Event Bubbling을 왜 쓰는가?

  • 코드 간소화
    • 부모 요소에서 이벤트 처리 하는 것을 허용함
      -> 개별 자식 요소에서 이벤트 처리기를 추가할 필요가 없어짐
      -> 코드를 간소화하고 유지보수를 용이하게 만듦
      -> 이벤트 처리 속도가 상당히 좋아짐

Event Delegation(이벤트 위임)

  • 많은 수의 이벤트 핸들러를 개별적으로 할당하는 것이 아니라,
    상위에서 하위요소로 전파시켜 하나의 이벤트 핸들러로 처리하는 기법
    -> 이벤트 핸들러의 수가 적어지므로 코드의 유지보수성과 성능을 개선할 수 있음

Event Capturing

  • 부모 요소에서 발생한 이벤트가 안쪽 자식 요소까지 도달 (실무에서 거의 안씀)
target.addEventListener("click", () => {}, true);

// addEventListener 메써드에 true 를 주게되면 캡처링됨

Event Capturing을 왜 쓰는가?

  • 이벤트 전파 순서를 명확하게 하여 이벤트 처리를 할 수 있음
  • 이벤트 전파를 중지하여 불필요한 이벤트 처리를 방지

Event Propagation(이벤트 전파)를 막고싶을 때

target.addEventListener("click", (event) => {

  event.stopPropagation();

});

// 이벤트의 전파를 원하지 않을 경우 e.stopPropagation() 메소드를 사용할 수 있음
profile
developer(Frontend)

0개의 댓글