[Javascript] 이벤트 전파

[Javascript] 이벤트 전파Web, Front-end2024. 8. 27. 00:21@junyeokk

Table of Contents

DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파됨

<!DOCTYPE html>
<html>
<body>
    <ul id="fruits">
        <li id="apple">Apple</li>
        <li id="banana">Banana</li>
        <li id="orange">Orange</li>
    </ul>
</body>
</html>

ul 요소의 두 번째 자식 요소인 li 요소를 클릭하면 클릭 이벤트
- 생성된 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됨

<div id="grandparent">
    <div id="parent">
        <button id="child">클릭하세요</button>
    </div>
</div>

<script>
// 캡처링 단계에서 이벤트 리스너 등록
document.getElementById('grandparent').addEventListener('click', function(e) {
    console.log('캡처링: Grandparent');
}, true);

document.getElementById('parent').addEventListener('click', function(e) {
    console.log('캡처링: Parent');
}, true);

document.getElementById('child').addEventListener('click', function(e) {
    console.log('캡처링: Child');
}, true);

// 버블링 단계에서 이벤트 리스너 등록
document.getElementById('grandparent').addEventListener('click', function(e) {
    console.log('버블링: Grandparent');
});

document.getElementById('parent').addEventListener('click', function(e) {
    console.log('버블링: Parent');
});

document.getElementById('child').addEventListener('click', function(e) {
    console.log('버블링: Child');
});

// 타겟 단계 (버튼 클릭 시)
document.getElementById('child').addEventListener('click', function(e) {
    console.log('타겟: Button clicked!');
});
</script>

과정

이벤트 전파는 이벤트 객체가 전파되는 방향에 따라 3단계로 구분됨
- 캡처링 단계
  - 이벤트가 DOM 트리 최상위 요소에서 시작해 타겟 요소를 향해 내려감
  - window -> document -> html -> body -> grandparent -> parent -> child
  - 캡처링 단계의 이벤트를 캐치하려면 addEventListener 메서드의 3번째 인수로 true를 전달해야 함
  - 3번째 인수를 생략하거나 false를 전달하면 타깃 단계와 버블링 단계의 이벤트만 캐치할 수 있음
- 타겟 단계
  - 이벤트가 실제 타겟 요소에 도달함
  - 여기서는 button 요소가 타겟
- 버블링 단계
  - 이벤트가 타겟 요소에서 시작해 DOM 트리를 따라 다시 위로 올라감
  - child -> parent -> grandparent -> body -> html -> document -> window
결과

전파되지 않는 이벤트

아래 이벤트들은 버블링되지 않음

이벤트가 발생한 요소에서만 감지됨
상위 요소로 자동으로 전파되지 않음
따라서 이벤트 타깃의 상위 요소에서 이벤트를 감지하려면, 캡처링 단계의 이벤트를 캐치해야 함

focus / blur
- 요소가 포커스를 받거나 잃을 때 발생함
load / unload
- 페이지나 리소스의 로딩 상태와 관련이 있음
scroll
- 요소나 창이 스크롤될 때 발생하며 해당 요소에만 국한됨
mouseenter / mouseleave
- 마우스 포인터가 요소에 진입하거나 빠져나갈 때 발생함
- 자식 요소에 대해서는 발생하지 않음
버블링이 필요한 경우, 일부 이벤트는 대체 이벤트를 사용할 수 있음
- focus -> focusin
- blur -> focusout
- mouseenter -> mouseover
- mouseleave -> mouseout

728x90

저작자표시

'Web, Front-end' 카테고리의 다른 글

[Javascript] 브라우저 팝업 차단으로 인한 문제와 해결책 (0)	2024.12.01
[Typescript] 사진과 영상을 FormData로 서버에 전송하기 (6)	2024.09.19
[Javascript] 이벤트 핸들러 등록 (0)	2024.08.27
[Javascript] const 키워드 (0)	2024.06.05
[Javascript] let 키워드, 일시적 사각지대 (0)	2024.06.05

@junyeokk :: 나무보다 숲을

컴퓨터 전공 관련, 프론트엔드 개발 지식들을 공유합니다. React, Javascript를 다룰 줄 알며 요즘에는 Typescript에도 관심이 생겨 공부하고 있습니다. 서로 소통하면서 프로젝트 하는 것을 즐기며 많은 대외활동으로 개발 능력과 소프트 스킬을 다듬어나가고 있습니다.

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

과정

전파되지 않는 이벤트

'Web, Front-end' 카테고리의 다른 글

티스토리툴바