자바스크립트 이벤트 버블링: 이해와 활용 방법

이벤트 버블링이란 무엇인가요?

자바스크립트 이벤트 버블링은 이벤트가 발생한 요소에서 상위 요소로 이벤트가 전파되는 방식입니다. 예를 들어, 한 div 안에 다른 div 요소가 있을 때, 내부 div 요소에서 클릭 이벤트가 발생하면, 이벤트는 가장 깊이 있는 요소에서부터 가장 상위 요소까지 버블링 형태로 전파됩니다.

const outerDiv = document.querySelector('#outerDiv');
const innerDiv = document.querySelector('#innerDiv');

innerDiv.addEventListener('click', function(event) {
  // 이벤트 핸들러 함수
});

이벤트 버블링 캡처링이란 무엇인가요?

이벤트 버블링 캡처링은 이벤트가 가장 상위 요소로 전파되기 전에 가장 깊이 있는 요소에서부터 상위 요소로 이벤트가 전파되는 방식입니다. 예를 들어, 한 div 안에 다른 div 요소가 있을 때, 내부 div 요소에서 클릭 이벤트가 발생하면, 이벤트는 가장 바깥쪽 요소에서부터 가장 깊이 있는 요소까지 캡처링 형태로 전파됩니다.

const outerDiv = document.querySelector('#outerDiv');
const innerDiv = document.querySelector('#innerDiv');

innerDiv.addEventListener('click', function(event) {
  // 이벤트 핸들러 함수
}, true);

이벤트 전파 중지하는 방법은 무엇인가요?

이벤트 전파를 중지하는 방법에는 두 가지가 있습니다. 하나는 이벤트 캡처링/버블링 단계에서 event.stopPropagation() 메서드를 호출하는 것이고, 또 다른 하나는 이벤트 캡처링/버블링 단계에서 event.preventDefault() 메서드를 호출하는 것입니다.

const outerDiv = document.querySelector('#outerDiv');
const innerDiv = document.querySelector('#innerDiv');

innerDiv.addEventListener('click', function(event) {
  event.stopPropagation(); // 이벤트 전파 중지
});

이벤트 위임이란 무엇인가요?

이벤트 위임은 동적으로 생성된 요소에 이벤트를 등록하는 방식입니다. 이벤트 버블링을 활용하여 상위 요소에서 하위 요소로 이벤트를 전파하기 때문에, 상위 요소에 이벤트를 등록하면 하위 요소들에 대해서도 이벤트가 발생합니다. 이는 코드의 간결성을 높이고 메모리 사용량을 줄일 수 있습니다.

const container = document.querySelector('#container');

container.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    // 이벤트 핸들러 함수
  }
});

결론

자바스크립트 이벤트 버블링은 이벤트를 효율적으로 처리할 수 있도록 도와줍니다. 이벤트 버블링 캡처링, 이벤트 전파 중지, 이벤트 위임 등의 기술을 활용하여 코드의 간결성과 성능을 향상시킬 수 있습니다.

자바스크립트 이벤트 버블링에 대한 설명입니다. 이벤트가 발생한 요소에서 상위 요소로 이벤트가 전파되는 방식을 의미합니다.