JS 이벤트 위임하기

문제 : 해당 리스트의 아이템에 대해서 사용자가 클릭할 때 이벤트가 일어나도록 구현하라

보통은 아래와 같이 구현할 것입니다.

*DOMContentLoaded : HTML과 script가 로드된 시점에 발생하는 이벤트이다.

 - onload 이벤트보다 먼저 발생한다. 빠른 실행속도가 필요할 떄 적합하다.

 - IE8 이하에서는 지원하지 않는다.

 

문제점 : 리스트의 아이템 각각에 이벤트를 붙여 매우 비효율적입니다.

해결책 : 모든 아이템 리스트에 대해서 한 개의 이벤트 리스너를 생성하여 전체 영역에 등록하는 것이 훨씬 효율적입니다. 이 것을 이벤트 위임 이라고 합니다. 각각의 이벤트 핸들러를 붙이는 방식보다 훨씬 효율적입니다.

 

아래 코드는 이벤트 위임을 구현한 것입니다.