addEventListener
의 수가 증가할 수록 메모리 사용량이 높아지고, 이는 곧 성능저하로 이루어질 수 있다. DOM 트리 내 요소에 이벤트가 발생하면, 해당 요소에 할당된 이벤트 핸들러가 동작하게 된다. 이때 해당 요소의 부모, 혹은 자식 요소에도 이벤트가 전파되게 되는 현상을 Event Propagation이라고 부른다. Event Propagation은 크게 다음과 같이 볼 수 있다.
즉, 자바스크립트로 이벤트 핸들링 하는 경우 이벤트는 DOM 트리 내 타 요소에도 전파 된다. 따라서 이런 성질을 통해 상위 요소에 이벤트 핸들러를 등록해서 하위 요소 이벤트를 제어할 수 있다.
li
들은 querySelectorAll
을 통해 lists
라는 배열에 담기게 된다.li
태그들이 담긴 배열을 순회하며 각각 addEventListener
를 등록했기 때문에 클릭시 line-through 효과가 생기게 되는 것을 볼 수 있다. 새로운 일 추가
라는 버튼을 통해 동적으로 생성된 li
요소들은 addEventListener
가 등록되지 않기 때문에 line-through 효과가 생기지 않는다. li
가 생성될 때마다 새로운 이벤트 핸들러를 등록해주어야 정상 작동한다는 것이다. li
의 부모 요소인 ul
에만 이벤트 핸들러를 등록했다.event.target
, 즉 이벤트가 실제로 발생한 곳에 위치한 요소에만 'completed'라는 class명을 toggle 해주어, 클릭된 li
요소에만 line-through 효과가 나타날 수 있도록 수정했다. 새로운 일 추가
버튼을 통해 할 일은 무한 추가해도, 각 li
요소에 line-through 효과가 적용되는 것을 볼 수 있다. li
요소마다 이벤트 핸들러를 새로 등록한 것인데, Example 2에서는 단 하나의 이벤트 핸들러를 통해 동적으로 생성되는 li
요소까지 모두 제어할 수 있는 것이다. 1. 1분코딩 - 자바스크립트 이벤트 위임 핵심 정리
2. da.som님 이벤트 위임 (Event Delegation) 블로그 글