데브허브 | DEVHUB | Event Capturing in Javascript (Interview Question)Event Capturing in Javascript (Interview Question)
- 이벤트 캡처링(또는 트리클링)은 자바스크립트에서 이벤트가 상위 요소에서 하위 요소로 전파되는 과정입니다. ⬇️
- 이는 기본 이벤트 전파 방식인 이벤트 버블링(하위에서 상위)과 반대되는 개념입니다. 🔄
addEventListener 메서드의 세 번째 인자로 { capture: true }를 설정하여 이벤트 캡처링을 활성화할 수 있습니다. ⚙️
- 특정 요소에만
capture: true를 적용하면 해당 요소는 캡처링 방식으로 동작하지만, 하위 요소들은 여전히 기본 버블링 방식으로 동작하여 예상치 못한 이벤트 실행 순서가 발생할 수 있습니다. ⚠️
- 원하는 모든 계층에서 일관된 이벤트 캡처링을 구현하려면, 해당 계층의 모든 요소에
capture: true 옵션을 명시적으로 적용해야 합니다. ✅
- 예를 들어,
div > form > button 구조에서 버튼 클릭 시 div -> form -> button 순서로 이벤트를 발생시키려면 세 요소 모두에 capture: true를 설정해야 합니다. 🎯