자바스크립트 이벤트 위임

이벤트 위임, 버블링, 캡쳐링 (Event Delegation, bubbling, capturing)

이벤트 위임 유사한 노드들을 다뤄야 할 때 노드마다 핸들러를 할당하지 않고, 공통 조상에 이벤트 핸들러를 할당하여 여러 노드들을 한꺼번에 다루는 방법이다. 요약하면, 이벤트를 효율적으로 다루는 방법이다. 이벤트가 전파되는 특징(캡처링과 버블링)을 이용하면 이벤트 위임을 구현할 수 있다. 이벤트 위임을 배우기에 앞서, 먼저 노드마다 직접 핸들러를 할당하는 경우를 살펴보자. 1 2 3 4 5 지금은 나름대로 querySelectorAll + forEach를 통해 그럴싸한 코드를 작성해뒀는데, 여기서 add 버튼을 통해 li태그가 추가되거나, li태그에 delete 버튼을 생성해 삭제버튼을 도입했다고 하자. 새로운 li태그 추가시에 해당 태그에도 이벤트핸들러를 부여해야 하며, 기존 li태그 삭제시에 해당 태그..