브라우저에서 요소에 대한 Event가 발생하면 해당 요소에 할당된 이벤트 핸들러가 동작하게 되는데 이 때 이벤트 핸들러가 동작하면서 버블링와 캡처링 단계를 가집니다.
<aside> 💬 이벤트 버블링
자식 요소에서 이벤트가 발생했을 때 상위 요소에도 동일한 이벤트가 등록이 되어 있을 경우, 그 이벤트가 전파되는 현상을 이벤트 버블링이라고 한다.
</aside>
ClickEvent에 stopPropagation 메서드를 사용하면 현재 이벤트가 버블링 단계에서 더 이상 전파되지 않도록 방지 할 수 있습니다.
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>
인터페이스의
stopPropagation()메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로,stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면preventDefault()메서드를 사용하세요