이벤트 버블링

이벤트 버블링

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

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

위에서 이러한 코드가 있을 시에 form 태그를 누르게 되면 alert(form)만이 동작하지만, p태그를 누르면 alert(p) ➡ alert(div) ➡ alert(form) 순으로 동작하게 된다.

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

event.target 와 this 차이

• event.target : 이벤트가 발생된 가장 안쪽의 요소를 target이라고 부른다. 그러므로 event.target은 실제 이벤트가 시작되는 요소를 뜻한다.

• this : this는 "현재" 요소로 현재 실행중인 핸들러가 할당된 요소를 참조한다.
  this = event.currentTarget

<form>FORM
  <div>DIV
    <p>P</p>
  </div>
</form>

• 위 코드에서 form.onclick이라는 함수를 실행하면, this는 form 태그 만을 의미하는 반면에 event.target은 form 안의 div와 p도 가리킬 수 있다.

• 그래서 form 태그를 클릭하면 event.target과 this는 둘 다 form을 가리키고 있지만, div나 p 태그를 누르면 this는 여전히 form을 뜻하는 반면에 event.target은 div나 p를 뜻한다.

버블링 중단하기

• event.stopPropagation()

  • 이벤트 버블링이 진행중 일 때, 특정 태그에 event.stopPropagation을 걸어주면 그 특정 태그에는 이벤트가 동작하지 않는다.

  • 하지만 그것이 위쪽으로 진행되는 버블링을 막아줄 뿐, 다른 요소들의 이벤트들이 동작하지 않게 해주는 것은 아니다.