[javascript] 이벤트 위임을 활용한 동적 이벤트 처리
웹 개발에서 동적으로 생성되는 엘리먼트에 이벤트를 처리해야 할 때 이벤트 위임(Event Delegation)은 유용한 기술입니다. 이벤트 위임을 사용하면 동적으로 추가되는 엘리먼트들에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다. 이 글에서는 이벤트 위임을 활용한 동적 이벤트 처리에 대해 알아보겠습니다.
이벤트 위임이란?
이벤트 위임은 부모 엘리먼트로 이벤트를 위임하여 동적으로 생성되는 자식 엘리먼트들의 이벤트를 관리하는 방법입니다. 동적으로 생성되는 엘리먼트에 직접 이벤트 핸들러를 등록하는 대신, 부모 엘리먼트에서 하나의 이벤트 핸들러를 등록하여 자식 엘리먼트의 이벤트를 처리합니다.
이점
1. 효율적인 메모리 관리: 동적 엘리먼트가 많을 경우 각각의 엘리먼트에 이벤트를 등록하는 것은 메모리 관리에 부담이 될 수 있습니다. 이벤트 위임을 통해 이를 방지할 수 있습니다.
2. 코드 간결화: 모든 이벤트를 부모 엘리먼트에서 처리하므로 코드를 간결하게 유지할 수 있습니다.
예제
다음은 버튼이 추가되는 예시 코드입니다.
const container = document.getElementById('parent-container');
container.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
// 버튼 클릭 처리 로직
console.log('버튼이 클릭되었습니다.');
}
});
위 예제에서는 parent-container의 하위 엘리먼트 중 버튼이 클릭되면 그에 맞는 처리 로직을 수행합니다.
마무리
이벤트 위임을 활용하면 동적으로 생성되는 엘리먼트에 대한 이벤트 처리를 효율적으로 관리할 수 있습니다. 이를 통해 메모리를 효율적으로 관리하고 코드를 간결하게 유지할 수 있습니다. 이벤트 위임을 적절히 활용하여 웹 애플리케이션을 개발하면 유용한 기술이 될 수 있습니다.