목록Event Delegation (2)
코딩쌀롱
✏️Event Delegation 캡처링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 이벤트 위임은 유사한 여러 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 컨테이너에 하나의 핸들러를 할당 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링. ✱장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거..
📌 bind() 문제 발생 let view = new View(); view.addButton.addEventListener("click", view.addList); 클래스의 view.addList 함수 본체에 this는 view 객체를 가리키는데, addEventListener에서 this는 이벤트 target이 되는 element 객체를 가리킨다. 이런 차이로 정상적으로 동작하지 않는 문제가 발생했다. 해결 방법 let view = new View(); view.addButton.addEventListener("click", view.addList.bind(view)); bind()메서드로 this가 가리키는 객체를 직접 지정해줘서 해결했다. 📌 Event Delegation 문제 발생 // cla..