버블링과 캡처링

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

이 문서가 가장 잘되어있다. 

 

이벤트가 동작하면 일단 window객체에서 타깃으로 이벤트가 내려갔다가(캡처링), 다시 상위로 전파되는 동작(버블링)이 일어난다. 

이때 대부분은 이벤트 핸들러가 상위로 전파되는 버블링단계에서 동작하는데, elem.addEventListener(..., {capture: true}) 이렇게하면 캡처링단계에서 동작하게 할 수도있다. 

 

이때 버블링되는것을 막고 싶으면 e.stopPropagation을 사용할 수 있다. 

 

 

* 추가: e.preventDefault

https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault

event.preventDefault - Web API | MDN

preventDefault는 이벤트에 의해서 브라우저가 기본적으로 처리하는 동작을 취소하는 것이다. 이벤트 전파는 막는건 아니다.