버블링

• 이벤트가 상위 요소로 전파됨

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

• 각 요소 클릭 시 위 요소도 함께 실행됨

버블링 중단

event.stopPropagation()

• 이벤트가 상위요소로 넘어가는 것을 막아줌

캡처링

요소.addEventListener(..., {capture: true});

혹은

요소.addEventListener(..., true);
false일 경우 이벤트 버블링이 적용되며, default는 false(버블링)

• 이벤트가 하위 요소로 전파됨
  

---

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