코딩쌀롱

✏️Event Delegation 캡처링과 버블링을 활용하면 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있다. 이벤트 위임은 유사한 여러 요소에 동일한 핸들러를 적용할 때 주로 사용한다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. 컨테이너에 하나의 핸들러를 할당 핸들러의 event.target을 사용해 이벤트가 발생한 요소가 어디인지 알아냄. 원하는 요소에서 이벤트가 발생했다고 확인되면 이벤트를 핸들링. ✱장점 많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다. 요소를 추가하거나 제거할 때 해당 요소에 할당된 핸들러를 추가하거나 제거..

✏️Event Bubbling, Capturing, target 중첩된 요소에서 이벤트가 발생할 때, HTML DOM API의 이벤트 전파(Event Propagation)는 두 가지 방식으로 구분된다. 이 두 가지 방식이 Bubbling, Capturing이다. Bubbling: 이벤트가 발생한 요소부터 window까지 이벤트 전파 (하위 → 상위) Capturing: window로부터 이벤트가 발생한 요소까지 이벤트 전파 (상위 → 하위) 📌 Bubbling 가장 안 쪽의 를 클릭하면 onclick 핸들러 동작 onclick 핸들러 동작 onclick 핸들러 동작 document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러 동작 이런 흐름을 이벤트 버블링이라고 부른다. 이벤트가 제일 ..