| 이벤트 버블링(Event Bubbling)

이벤트 버블링은 DOM요소에서 이벤트가 발생했을 때, 해당 이벤트가 부모 요소로 전파되는 것을 말합니다.

아래 코드를 보면 버튼을 클릭하면 "자식 요소 클릭", "부모 요소 클릭"이 동시에 출력이 됩니다.

</div>

document.getElementById('parent').addEventListener('click', () => {

console.log('부모 요소 클릭');

});

document.getElementById('child').addEventListener('click', (e) => {

console.log('자식 요소 클릭');

});

만약 이때 "자식 요소 클릭"만 출력되도록 이벤트 버블링을 막고 싶으면

e.stopPopagation()을 자식 요소에 추가해 주면 됩니다.

document.getElementById('parent').addEventListener('click', () => {

console.log('부모 요소 클릭');

});

document.getElementById('child').addEventListener('click', (e) => {

console.log('자식 요소 클릭');

e.stopPropagation(); // 이벤트 버블링 막기

});

| 이벤트 위임(Event Delegation)

이벤트 버블링을 활용하여 상위 요소에 이벤트 리스너를 추가하면

하위 요소에서 발생한 이벤트도 상위 요소에서 감지할 수 있습니다.

이벤트 위임은 이를 활용해 많은 하위 요소에 이벤트를 등록하려 할 때,

모든 요소에 개별적으로 리스너를 추가하는 것이 아닌,

상위 요소에 하나만 등록하여 하위 요소에서 발생한 이벤트를 처리하는 이벤트 핸들링 패턴입니다.

아래 코드와 같이 event.target 속성을 통해 실제로 이벤트가 발생한 요소를 식별할 수 있습니다.

</ul>

document.getElementById('list').addEventListener('click', (event) => {

if (event.target.tagName === 'LI') {

console.log('클릭한 아이템:', event.target.textContent);

}

});

이처럼 리스트들의 상위 요소에 이벤트 핸들러를 등록하고,

클릭된 요소가 li태그 일 경우에 해당 요소의 text를 출력할 수 있습니다.

이렇게 하면 새로운 리스트가 추가되어도 이벤트 핸들러를 별도로 등록할 필요가 없습니다.

이벤트 위임과 버블링을 잘 활용하면 코드의 유지보수성을 높이는데 도움을 줄 수 있을 거 같습니다.

기존에 대략 알고 있던 개념이지만 실제 프로젝트에서 제대로 이해하고 활용해 본 경험은 많이 없는 거 같아서 이번 기회에 개념을 한번 정리하고 이후에 활용해 보고자 합니다.