[JS] 이벤트 위임(Event Delegation)에 대해

이벤트 위임 소개

• 이벤트 위임이란 부모 요소에 이벤트 핸들러를 등록해서 자식 요소의 이벤트를 모두 핸들링하는 방법이다.
• 자식 요소마다 이벤트 핸들러를 등록해도 되긴 하지만, addEventListener의 수가 증가할 수록 메모리 사용량이 높아지고, 이는 곧 성능저하로 이루어질 수 있다.
• 또한, 하위 요소들을 동적으로 추가하더라도 일일이 이벤트 핸들러를 등록할 필요가 없기 때문에 보다 간결한 코드로 이벤트 핸들링할 수 있다.

💡상위 요소 이벤트 핸들러로 하위 요소 이벤트를?

DOM 트리 내 요소에 이벤트가 발생하면, 해당 요소에 할당된 이벤트 핸들러가 동작하게 된다. 이때 해당 요소의 부모, 혹은 자식 요소에도 이벤트가 전파되게 되는 현상을 Event Propagation이라고 부른다. Event Propagation은 크게 다음과 같이 볼 수 있다.

1. Capturing : 이벤트가 발생한 요소의 자식들에게 순차적으로 이벤트가 전파되는 방식 (상위 → 하위)
2. Bubbling : 이벤트가 발생한 요소의 부모요소들에게 순차적으로 이벤트가 전파되는 방식 (하위 → 상위)

즉, 자바스크립트로 이벤트 핸들링 하는 경우 이벤트는 DOM 트리 내 타 요소에도 전파 된다. 따라서 이런 성질을 통해 상위 요소에 이벤트 핸들러를 등록해서 하위 요소 이벤트를 제어할 수 있다.

• 참고: ✍️Event Propagation(Capturing, Bubbling)에 대해 더 자세히 알아보기

이벤트 위임 Demo

💡Example 1: 이벤트 위임을 하지 않았을 때

• 상단 예시를 보면 HTML에서 이미 추가된 li들은 querySelectorAll을 통해 lists라는 배열에 담기게 된다.
• 그리고 해당 li 태그들이 담긴 배열을 순회하며 각각 addEventListener를 등록했기 때문에 클릭시 line-through 효과가 생기게 되는 것을 볼 수 있다.
• 반면 새로운 일 추가라는 버튼을 통해 동적으로 생성된 li요소들은 addEventListener가 등록되지 않기 때문에 line-through 효과가 생기지 않는다.
• 즉, 이벤트 위임패턴을 사용하지 않으면 사용자로 인해 새로운 li가 생성될 때마다 새로운 이벤트 핸들러를 등록해주어야 정상 작동한다는 것이다.

💡Example 2: 이벤트 위임을 했을 때

• Example 1과 다르게 li의 부모 요소인 ul에만 이벤트 핸들러를 등록했다.
• 이후 event.target, 즉 이벤트가 실제로 발생한 곳에 위치한 요소에만 'completed'라는 class명을 toggle 해주어, 클릭된 li요소에만 line-through 효과가 나타날 수 있도록 수정했다.
• 이렇게 하면 새로운 일 추가 버튼을 통해 할 일은 무한 추가해도, 각 li 요소에 line-through 효과가 적용되는 것을 볼 수 있다.
• 즉, Example 1에서는 li요소마다 이벤트 핸들러를 새로 등록한 것인데, Example 2에서는 단 하나의 이벤트 핸들러를 통해 동적으로 생성되는 li요소까지 모두 제어할 수 있는 것이다.

References:

1. 1분코딩 - 자바스크립트 이벤트 위임 핵심 정리
2. da.som님 이벤트 위임 (Event Delegation) 블로그 글