29. 이벤트 위임에 대해 설명.
이벤트 위임(Event Delegation)
이벤트 위임은 JavaScript에서 효율적으로 이벤트를 처리하기 위한 기법으로, 부모 요소에 이벤트 핸들러를 설정하여 하위 요소에서 발생하는 이벤트를 처리하는 방식입니다. 이는 DOM 트리에서 이벤트가 버블링(bubbling) 단계를 통해 상위 요소로 전파되는 특성을 활용한 것입니다.
작동 원리
이벤트 버블링:
브라우저는 이벤트가 발생했을 때, 가장 구체적인 요소(이벤트의 타겟)에서 시작하여 상위 요소로 이벤트를 전파합니다.
이를 통해 부모 요소에 이벤트 핸들러를 설정하면, 자식 요소에서 발생한 이벤트도 처리할 수 있습니다.
핵심 아이디어:
모든 자식 요소에 개별적으로 이벤트 핸들러를 추가하는 대신, 공통된 부모 요소에 하나의 이벤트 핸들러를 추가합니다.
부모 요소는 이벤트의 target 프로퍼티를 통해 실제 이벤트가 발생한 자식 요소를 식별합니다.
예제 코드
개별 이벤트 핸들러 추가 (비효율적)
javascript
코드 복사
const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {
button.addEventListener('click', (event) => {
console.log(`Button ${event.target.textContent} clicked`);
});
});문제점: 많은 요소가 있을 경우, 각 요소마다 이벤트 리스너를 추가하는 것은 성능과 유지보수에 비효율적입니다.
이벤트 위임 사용
javascript
코드 복사
const container = document.querySelector('.container');
container.addEventListener('click', (event) => {
if (event.target.classList.contains('button')) {
console.log(`Button ${event.target.textContent} clicked`);
}
});이점:
단일 이벤트 핸들러로 여러 자식 요소의 이벤트를 처리합니다.
동적으로 추가된 자식 요소에도 적용됩니다.
이벤트 위임의 장점
효율성:
수백, 수천 개의 요소에 각각 이벤트 리스너를 추가할 필요가 없습니다.
유연성:
동적으로 추가되거나 제거되는 자식 요소도 별도의 코드 수정 없이 처리할 수 있습니다.
코드 유지보수 용이:
코드의 복잡도가 감소하고, 중앙에서 이벤트 처리를 관리할 수 있습니다.
주의점
이벤트 전파의 이해:
이벤트 위임은 이벤트 버블링을 기반으로 하므로, 이벤트 캡처링이 필요한 경우에는 적합하지 않습니다.
타겟 확인 필요:
이벤트가 부모 요소에서 발생하는 것이 아니므로, event.target이나 event.currentTarget을 적절히 사용하여 실제 이벤트 발생 요소를 식별해야 합니다.
성능 이슈:
너무 많은 이벤트를 부모 요소에서 처리하려고 하면, 반대로 성능이 저하될 수 있습니다.
실제 활용 사례
리스트 항목 클릭 이벤트 처리:
여러 개의 리스트 항목(li)에서 클릭 이벤트를 처리할 때 부모 요소(ul)에 이벤트 핸들러를 설정.
동적으로 생성된 요소 처리:
동적으로 추가된 버튼, 카드 등을 처리할 때 유용.
이벤트 위임은 DOM 조작이 많거나 동적으로 변화하는 웹 애플리케이션에서 매우 유용합니다.
