이벤트 버블링_Java Script

이벤트 버블링이란?

• 이벤트가 제일 깊은 곳에 있는 요소에서 시작해, 부모 요소를 거슬러 올라가며 발생하는 현상.

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

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

• 가장 안쪽의 <p>를 클릭하면 순서대로 다음과 같은 일이 벌어진다.
  <p> -> <div> -> <form>
  

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

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

• event.target은 실제 이벤트가 시작된 타깃 요소이다. 버블링이 진행되어도 변하지 않는다.
• event.currentTarget(=this)는 현재 요소로, 현재 실행중인 핸들러가 할당된 요소를 참조한다.
• 큰 틀 중에서도 가장 안쪽에 있는 요소가 event.target라면, 이 요소를 감싸는 큰 틀이 event.currentTarget(=this)라고 할 수 있다.