(수근수근)
[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
'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