이벤트 버블링

버블링(bubbling)

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고 이어서 부모요소의 핸들러가 동작함 가장 최상단의 요소를 만날때까지 이 과정은 반복되며 요소 각각에 한당된 핸들러가 동작한다.

버블링 예제

<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>

가장 안쪽의 <p>태그를 클릭하면 일어나는일

1.<p>에 할당된 onClick 핸들러가 동작한다.
2. 바깥의 <div>에 할당된 핸들러가 동작한다.
3. 그 바깥의 <form>에 할당된 핸들러가 동작합니다.
4. document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

이런 동작 방식 떄문에<p>요소 클릭시 <p>-><div>-><form> 순서대로 3개의 alert창이 뜬다.
-> 이런 흐름을 이벤트 버블링이라고 한다. 이벤트가 가장 깊은 곳에 있는 요소에서 시작해서 부모요소를 거슬로 올라가는 모습이 마치 물속 거품과 닮았기 때문

❗️거의 모든 이벤트는 버블링 된다.
거의 다 된다. 거의
focus 이벤트와 같이 버블링 되지 않는 이벤트도 있음

event.target

부모 요소의 핸들러는 이벤트가 정확히 발생했는지 등에 대한 자세한 정보를 얻을 수 있다.
이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.target을 사용해 접근할 수 있다.

event.target과 this(=event.currentTarget)의 차이

• event.target은 실제 이벤트가 시작된 ‘타깃’ 요소입니다. 버블링이 진행되어도 변하지 않는다.
• this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조

핸들러는 form.onclick 하나밖에 없지만 이 핸들러에서 폼 안의 모든 요소에서 발생하는 클릭 이벤트를 ‘잡아내고(catch)’ 있습니다. 클릭 이벤트가 어디서 발생했든 상관없이

요소까지 이벤트가 버블링 되어 핸들러를 실행시키기 때문입니다.

form.onclick 핸들러 내의 this와 event.target은 다음과 같습니다.

this(event.currentTarget) – 요소에 있는 핸들러가 동작했기 때문에 요소를 가리킵니다.
event.target – 폼 안쪽에

캡쳐링(capturing)

부모 element에서 발생된 event가 자식 element순으로 전달 되는 현상