이벤트와 이벤트 위임

개념 이해하기

이벤트의 target은 실제 시작 요소이고 currentTarget은 현재 리스너가 등록된 요소입니다. 많은 이벤트가 조상으로 bubbling되므로 부모 하나에서 target.closest로 원하는 자식을 찾는 이벤트 위임을 사용할 수 있습니다. removeEventListener를 쓰려면 등록한 함수 참조를 보관합니다.

코드를 읽을 때는 container.addEventListener("click", event => { ... }); 부분부터 찾으세요. 현재 값과 실행 순서를 줄마다 적어 보면 문법을 외우지 않아도 결과를 예측할 수 있습니다.

사용자의 입력이나 브라우저에서 일어난 사건에 반응할 때 사용합니다. 요소가 없거나 권한이 거부되는 경우, 동적으로 추가된 요소까지 같은 흐름에서 처리하세요.

실행하기 전에 예상 결과를 짧게 적은 뒤 JavaScript 버튼을 동적으로 추가하고 부모 리스너가 그대로 동작하는지 확인하세요. 실제 출력이 다르면 콘솔에 처음 나타난 오류와 그 직전 값을 차례로 확인하세요.