Portfolio

이벤트 전파

이벤트 버블링과 캡처는 같은 이벤트 타입의 두 이벤트 핸들러가 한 요소에서 작동되었을 때 무슨 일이 일어나는지를 기술하는 두 메커니즘입니다. 제가 MDN 정의를 보고 해석한 내용은 DOM Tree 생성 과정에서 등록된 이벤트 핸들러를 이벤트 단계(e.eventPhase)에 따라 사용자 인터페이스(click, mouse, keyboard)를 찾아가는 과정입니다.

🔑

이벤트 핸들러: 이벤트가 발생했을 떄 브라우저에 호출을 위함하는 함수 → [Dive Dive 도서 792p 참고]

버블링 (bubbling)

이벤트 버블링은 이벤트 전파에서 하나의 유형입니다. 이벤트 버블링이 발생하는 원리는 한 요소(DOM Element)에서 이벤트가 발생하면, 현재 요소에 등록된 이벤트 핸들러가 동작하고 상위 요소의 이벤트 핸들러가 동작하는 과정을 반복하면서 최상위 요소(window 객체)에 도달하면 이벤트 전파가 마무리되는 과정입니다.


<body>
    <ul class="fruits">
      <li class="banana">내가 좋아하는 과일은 <span>바나나</span></li>
    </ul>

    <script>
      const $fruits = document.querySelector('.fruits');
      const $banana = document.querySelector('.banana');
      const $span = document.querySelector('.banana > span');

      $fruits.addEventListener('click', e => {
        console.log('과일 목록 중에 최상위 요소', e.eventPhase);
      });

      $banana.addEventListener('click', e => {
        console.log('과일 목록 중간 요소', e.eventPhase);
      });

      $span.addEventListener('click', e => {
        console.log('과일 목록 중에 최하위 요소', e.eventPhase);
      });


    </script>
  </body>

예시에 보이는 이벤트 버블링 과정에서 span 요소를 클릭하면 다음과 같은 일이 벌어집니다.

span 에 등록된 이벤트 핸들러가 동작합니다.

span 의 부모 요소 li 요소에 등록된 이벤트 핸들러가 동작합니다.

최상위 요소 ul 요소에 등록된 이벤트 핸들러가 동작합니다.

window 객체에 도달하기까지 위의 과정을 반복해서 동작하고 이벤트 버블링 과정이 마무리 됩니다.

event.target

이밴트 핸들러가 동작하는 과정에서 암묵적으로 브라우저에서 이벤트 객체를 이벤트 핸들러에 동적으로 생성합니다. 이벤트 객체에는 이벤트 관련해서 다양한 정보를 담고 있으면 event.target 프로퍼티는 이벤트가 발생한 정확한 요소의 DOM 정보를 담고 있습니다. event.target 는 event.currentTarget 프로퍼티와 유사한 정보를 담고 있지만 명확한 차이점이 있습니다.

event.target : 사용자가 action한 실제 요소의 DOM 정보 객체, 이벤트 버블링이 진행되어도 event.target 는 변화하지 않습니다.

event.currentTarget : 이벤트 핸들러가 등록된 요소의 DOM 정보 객체

캡쳐링 (capturing)

이벤트 캡쳐링은 이벤트 전파에서 하나의 유형입니다. 이벤트 캡쳐링이 발생하는 원리는 한 요소(DOM Element)에서 이벤트가 발생하면

span click: span → li → ul

span click: ul → li → span

이벤트 전파 방지

이벤트 위임

스터디 과정에서 답변하지 못했던 보안점

이벤트 캡쳐링을 활용한 예제가 있는가요?

브라우저에서 이벤트 핸들러를 찾을 수 있는 방법이 무엇인가요?

참고 자료

MDN 이벤트 입문

버블링과 캡처링

Deep Dive

이벤트 버블링, 캡쳐링