이벤트 버블링_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)라고 할 수 있다.

좋은 웹페이지 즐겨찾기