(수근수근)

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

type & Javascript

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

InformationFarm 2021. 11. 17. 23:43

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

이벤트시스템이란

  • 브라우저가 제공하는 시스템
  • 사용자가 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

'type & Javascript' 카테고리의 다른 글

[클린코드 JS] 경계 다루기  (0) 2022.02.06
[클린코드JS] 타입 다루기  (0) 2022.02.02
[JS]동기와 비동기  (0) 2021.11.17
TDD로 하는 API 서버 개발 -(2)  (0) 2021.10.16
TDD 로 하는 API 서버 개발 -(1)  (0) 2021.10.14
Comments