[JS] 이벤트 시스템 - 이벤트 버블링, 이벤트 캡처링

해당 글은 패스트캠퍼스의 김민태의 프론트엔드 아카데미 강의를 수강한 내용을 정리한 것입니다

이벤트시스템이란

• 브라우저가 제공하는 시스템
• 사용자가 UI에 언제 반응할지 알 수 없으므로 나온 시스템
• 보통 addEventListener의 형태로 DOM에 어떤 요청이 들어왔을때 어떤 함수를 호출해줘라고 등록하는 형태를 취한다

---

이벤트 버블링

버블링은 안쪽의 있는 요소가 클릭이 됐을 때, 발생한 이벤트가 바깥쪽으로 확산되어 나가는 것

아래와 같은 형식의 HTML의 형태를 가지고 있고,

<div class="box1" data-name="blue">
        <div class="box2" data-name="yello">
            <div class="box3" data-name="orange">
            </div>
        </div>
    </div>

해당 DIV태그 마다 addEventListener를 통해서 클릭이벤트를 시스템을 등록해 놓는다면

let divs = document.querySelectAll('div');
divs.forEach((div) => div.addEventListener('click', eventLogger));

function eventLogger({ target, currentTarget, eventPhase }) {
        console.log(`${target.dataset.name}, ${currentTarget.dataset.name}, ${PHASE_NAME[eventPhase]}`);
 }

• 전파되어 발생한 것은 currentTarget을 통해 알 수 있다.
• 직접적으로 발생한 이벤트인지 전파된건지 확인하는 것은 eventPhase
  • TARGET → 직접발생, BUBBLING → 버블링으로 발생

주황색 DIV태그를 클릭한다면?

→ 결과

orange, orange, TARGET

orange, yello, BUBBLING

orange, blue, BUBBLING

---

이벤트 캡처링

이벤트 캡처링은 정확히 반대로 맨 안쪽을 클릭하면 맨 바깥부터 이벤트가 발생해서 안쪽으로 전파가 됩니다.

주황색 DIV태그를 클릭한다면?

→ 결과

orange, blue, CAPTURING

orange, yello, CAPTURING

orange, orange, TARGET