Bubbling & Capturing

shorry·2022년 7월 15일
0

Frontend

목록 보기
5/8

📌이벤트 버블링 - Event Bubbling


  • 이벤트 버블링은 위의 그림과 같이 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 화면 요소들로 전달되어 가는 특성을 의미한다.
    HTML 요소는 기본적으로 트리 구조를 갖는다. 여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 한다.
  • 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다.
  • 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문이다.
  • 몇몇 이벤트를 제외하곤 대부분의 이벤트는 버블링 된다.

✔️버블링 중단하기

  • 이벤트 버블링은 타깃 이벤트에서 시작해서 <html> 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생한다.
  • 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 한다. 이 때도 모든 핸들러가 호출된다.
  • 그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.
  • 이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 됩니다.

event.stopImmediatePropagation()

  • 한 요소의 특정 이벤트를 처리하는 핸들러가 여러개인 상황에서, 핸들러 중 하나가 버블링을 멈추더라도 나머지 핸들러는 여전히 동작한다.
  • event.stopPropagation()은 위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못한다.
  • 버블링을 멈추고, 요소에 할당된 다른 핸들러의 동작도 막으려면 event.stopImmediatePropagation()을 사용해야 한다.
  • 이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.

✔️꼭 필요한 경우를 제외하곤 버블링을 막지 마라!

  • 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막아라.
  • 이벤트 버블링을 막아야 하는 경우는 거의 없다.

📌 이벤트 캡쳐 - Event Capture


  • 이벤트 버블링과 반대 방향으로 진행되는 이벤트 전파 방식이다.
  • 실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있다.
  • 표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.
  1. 캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
  2. 타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
  3. 버블링 단계 – 이벤트가 상위 요소로 전파되는 단계
  • 캡처링 단계를 이용해야 하는 경우는 흔치 않다.
  • 캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture 옵션을 true로 설정해야 한다.
elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 된다.
elem.addEventListener(..., true)

📌Reference


profile
I'm SHORRY about that

0개의 댓글