- 자식 요소에서 발생한 이벤트가 바깥 부모 요소로 전파되면서 같이 발생되는 이벤트 전파를 말함
-> 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문에 명명 지어짐
- 브라우저의 이벤트는 기본적으로 버블링 방식으로 이벤트가 전파됨
- 코드 간소화
- 부모 요소에서 이벤트 처리 하는 것을 허용함
-> 개별 자식 요소에서 이벤트 처리기를 추가할 필요가 없어짐
-> 코드를 간소화하고 유지보수를 용이하게 만듦
-> 이벤트 처리 속도가 상당히 좋아짐
- 많은 수의 이벤트 핸들러를 개별적으로 할당하는 것이 아니라,
상위에서 하위요소로 전파시켜 하나의 이벤트 핸들러로 처리하는 기법
-> 이벤트 핸들러의 수가 적어지므로 코드의 유지보수성과 성능을 개선할 수 있음
- 부모 요소에서 발생한 이벤트가 안쪽 자식 요소까지 도달 (실무에서 거의 안씀)
target.addEventListener("click", () => {}, true);
// addEventListener 메써드에 true 를 주게되면 캡처링됨
- 이벤트 전파 순서를 명확하게 하여 이벤트 처리를 할 수 있음
- 이벤트 전파를 중지하여 불필요한 이벤트 처리를 방지
target.addEventListener("click", (event) => {
event.stopPropagation();
});
// 이벤트의 전파를 원하지 않을 경우 e.stopPropagation() 메소드를 사용할 수 있음