끄적끄적노트

JavaScript로 화면을 구현하다보면 동적인 요소 를 다룰 일이 자주 발생한다. 아래는 할 일 목록의 리스트 항목을 클릭하면 해당 리스트 항목이 지워지는 간단한 기능이 포함된 예시이다.. See the Pen Event Delegation(1) by Dasom Cho (@ssom13) on CodePen. 위 예시에서 기존 리스트를 클릭했을 때는 리스트가 지워지지만, 새로 추가된 리스트는 클릭해도 삭제 기능이 동작하지 않는다. li에 이벤트 리스너를 추가하는 시점에 기존에 있던 3개의 리스트만 등록되고, 새롭게 동적으로 추가된 리스트는 이벤트 리스너가 등록되지 않았기 때문이다. 이런 경우 이벤트 위임패턴 을 사용하면 매우 간단하게 해결이 가능하다. 이벤트 위임 이벤트 위임(Event Delegatio..

이번에는 꽤 기초적이지만 중요한 JavaScript로 구현한 이벤트를 브라우저에서 화면 구성요소가 어떻게 감지하고, 그 이벤트가 다른 화면 요소에 전파되는지에 대한 포스팅 글을 작성하려고 한다. 이벤트 전파에 대해 설명하기 전에 JavaScript 이벤트가 브라우저에서 어떻게 동작하는지에 대해 먼저 설명해보겠다. 이벤트 핸들링 (Event Handling) 이벤트 란 마우스 클릭이나 키보드 입력과 같이 일반적으로 사용자가 행하는 모든 동작 을 말한다. 이러한 이벤트를 원하는대로 처리하는 것을 이벤트 핸들링(Event Handling) 이라고 한다. 이벤트 핸들링을 하기 위해 이벤트를 받을 화면 요소를 선택하고, 그 요소와 이벤트를 연결해주는 것을 이벤트 바인딩(Event binding) 이라고 하며, 아..