[CS] 이벤트 캡처링과 이벤트 버블링에 대해

이벤트 캡처링(Event Capturing)

 

설명

 

• 이벤트가 상위 요소에서 하위 요소로 향하는 방향으로 전파되는 것
• 이벤트가 발생한 요소의 최상위 부모 요소부터 시작하여 이벤트가 발생한 요소까지 이벤트가 전파
• addEventListener 메서드의 세 번째 인자를 true로 설정하여 사용, 기본은 false.
• 이벤트 캡처링을 사용하면 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다.

 

---

 

장점과 단점

 

장점

 

• 상위 요소에서 하위 요소로 이벤트를 전파하면서 이벤트를 가로챌 수 있다.
• 이벤트 전파 경로 상의 중간 요소에서 이벤트를 처리할 수 있으므로, 더 정교한 이벤트 처리 로직 구현 가능

 

단점

 

• 이벤트 캡처링을 사용하면 이벤트 핸들러가 상위 요소부터 호출되므로,
  이벤트 핸들러의 실행 순서가 예측하기 어려울 수 있다.
• DOM 트리의 모든 요소에 대해 이벤트 핸들러가 호출되므로, 이벤트 처리의 성능에 영향을 줄 수 있다.

 

---

 

이벤트 캡처링 예시

 

// HTML 요소 가져오기
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

// 이벤트 캡처링 단계에서 이벤트 처리
parentElement.addEventListener('click', function() {
    console.log('부모 요소에서 클릭 이벤트 발생');
}, true);

childElement.addEventListener('click', function() {
    console.log('자식 요소에서 클릭 이벤트 발생');
}, true);

 

---

 

이벤트 버블링(Event Bubbling)

 

설명

 

• 이벤트가 하위 요소에서 상위 요소로 향하는 방향으로 전파되는 것
• 이벤트가 발생한 요소에서 시작하여 상위 요소로 이벤트가 전파
• addEventListener 메서드의 세 번째 인자를 생략하거나, false로 설정하며, 기본적으로 이벤트 버블링 적용
• 이벤트 캡처링을 사용하면 하위 요소에서 상위 요소로 이벤트를 전파되면서 상위 요소에서 이벤트를 처리할 수 있다.

 

---

 

장점과 단점

 

장점

 

• 이벤트 버블링은 DOM 트리의 구조와 일치하여 자연스러운 동작을 나타낸다.
• 이벤트가 하위 요소에서 상위 요소로 전파되면서, 상위 요소에서 이벤트를 처리할 수 있다.

 

단점

 

• 이벤트 버블링을 사용하면 하위 요소에서 상위 요소로 이벤트가 전파되면서
  상위 요소에서 불필요한 이벤트 핸들러가 호출될 수 있다.
• 이벤트 버블링을 사용하면 이벤트 핸들러의 실행 순서가 예측하기 어려울 수 있다.

 

---

 

이벤트 버블링 예시

 

// HTML 요소 가져오기
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

// 이벤트 버블링 단계에서 이벤트 처리
parentElement.addEventListener('click', function() {
    console.log('부모 요소에서 클릭 이벤트 발생');
});

childElement.addEventListener('click', function() {
    console.log('자식 요소에서 클릭 이벤트 발생');
});

 

 

---

 

공통점

 

• 이벤트 캡처링과 버블링은 DOM 트리의 계층 구조에 따라 이벤트가 전파되는 방식
• 둘 다 이벤트 위임(Event Delegation)을 구현하는데 사용될 수 있으며, 이를 통해 효율적인 이벤트 처리 가능
• addEventListener 메서드의 세 번째 인자를 통해 제어 가능

 

---

 

주의할 점

 

이벤트 중단

 

• 이벤트 중단 메서드인 stopPropagation()을 사용하여 이벤트 전파를 중단 가능
• 남용하면 다른 이벤트 핸들러의 실행을 방해할 수 있다.

 

이벤트 처리의 복잡성

 

• 이벤트 캡처링과 버블링을 함께 사용하면 이벤트 처리가 복잡할 수 있다.
• 이벤트가 여러 요소를 거치면서 전파되므로 이벤트 핸들러의 실행 순서와 상태 관리에 주의

 

성능 고려

 

• 이벤트 캡처링과 이벤트 버블링은 DOM 트리를 전파하는 과정이므로 이벤트 핸들러의 실행 횟수가 증가할 수 있다.
• 이벤트 처리의 성능에 영향을 줄 수 있으므로, 필요한 경우에만 사용하고
  불필요한 이벤트 핸들러를 등록하지 않도록 주의

 

이벤트 위임

 

• 이벤트 캡처링과 이벤트 버블링을 이용하여 이벤트 위임(Event Delegation)을 구현
• 이벤트 위임은 상위 요소에 하나의 이벤트 핸들러를 등록하여 하위 요소들의 이벤트를 처리하는 방식
  
  
• 이벤트 위임은 성능 개선과 동적으로 생성되는 요소에 대한 이벤트 처리를 효율적으로 관리할 수 있지만,
  이벤트 핸들러가 상위 요소에 의해 처리되므로 이벤트가 발생한 요소에 대한 정보를 추출해야 할 수 있다.

 

---

 

함께 사용하는 경우 예시

 

// HTML 요소 가져오기
const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

// 이벤트 캡처링과 버블링 단계에서 각각 이벤트 처리
parentElement.addEventListener('click', function() {
    console.log('부모 요소에서 클릭 이벤트 발생 (캡처링)');
}, true);

childElement.addEventListener('click', function() {
    console.log('자식 요소에서 클릭 이벤트 발생 (캡처링)');
}, true);

parentElement.addEventListener('click', function() {
    console.log('부모 요소에서 클릭 이벤트 발생 (버블링)');
});

childElement.addEventListener('click', function() {
    console.log('자식 요소에서 클릭 이벤트 발생 (버블링)');
});

 

 

이벤트 중단 예시

 

// HTML 요소 가져오기
const element = document.getElementById('myElement');

// 이벤트 핸들러 등록
element.addEventListener('click', function(event) {
    console.log('클릭 이벤트 발생');
    event.stopPropagation(); // 이벤트 중단
});

 

 

---