<form>
  <div>
    <p onclick="alert(안녕)"></p>
  </div>
  </form>

에 할당된 핸들러가 동작한다. 그다음 form태그에 핸들러가 동작하고 document까지 올라갈때까지 이벤트가 전달됨 //이런 동작 방식 때문에

요소를 클릭하면 p → div → form 순서로 3개의 얼럿 창이뜨게됨

이런 흐름을 '이벤트 버블링’이라고 부릅니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다.

• 거의 모든 이벤트가 이벤트 버블링이됨

event.target

부모 요소의 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다.

이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있습니다.

## 버블링 중단하기
이벤트 버블링은 타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.
그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.

  <form>
  <div>
    <p onclick=(event)=>{
      event.stopPropagation();
      alert("안녕");
      }></p>
  </div>
  </form>

이벤트 객체의 메서드인 event.stopPropagation()를 사용하면됩니다. 이때 위의 예시코드를 예를 들자면 onclick핸들러가 발생하고, stopPropagation이 없을 경우 이벤트 버블링이 되지만, stopPropagation이 있음으로써 이벤트가 부모 노드에 전파되는것을 막아줍니다.

그렇다면, 우리가 자주쓰는 이벤트 객체 매서드인 event.preventdefault()와 어떤차이가 있을까요?

event.stopPropagation 과 event.preventdefault의 차이

event.stopPropagation은 이벤트전파를 막아주고,
event.preventdefault는 a태그나 form태그내에 있는 기본동작이 있는데 그동작을 하지 못하게끔 막는다.
a태그의 경우 페이지를 이동함으로써 리프레쉬가 되고, form태그의 경우 input등을 전송하는등의 동작을 함으로써 페이지가 리프레쉬가 되는데 이 동작들을 하지 못하게끔 하여 페이지가 리프레쉬 되는것을 막아준다.

이벤트 캡처링

이벤트엔 버블링 이외에도 ‘캡처링(capturing)’ 이라는 흐름이 존재합니다. 버블링과 반대로 부모요소에서 자식요소로 핸들러가 전달된다고 생각하면 됩니다.
표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.
캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

각 핸들러는 아래와 같은 event 객체의 프로퍼티에 접근할 수 있습니다.

event.target – 이벤트가 발생한 가장 안쪽의 요소
event.currentTarget (=this) – 이벤트를 핸들링 하는 현재 요소 (핸들러가 실제 할당된 요소)
event.eventPhase – 현재 이벤트 흐름 단계(캡처링=1, 타깃=2, 버블링=3)

이벤트 위임

이벤트 위임이란 하위 요소마다 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식을 말합니다.

만약 이벤트가 발생할때마다 자식요소들에서 일일이 하나씩 수행을한다면 많은 메모리 소모가 야기됩니다. 따라서 부모요소에서 이벤트를 받아서 이에 맞는 자식요소만 참조한다면 많은양의 메모리를 절약할수 있을것 입니다. 이를 이벤트 위임이라 합니다.

공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다.

맞지 않을경우 댓글로 피드백 부탁드립니다.