이벤트 버블링과 캡처링

버블링

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 이어 부모 요소의 핸들러가 동작하는 과정을 가장 최상단의 조상 요소를 만날때까지 반복하는 것

e.target

• 실제로 이벤트가 시작된 타깃 요소, 버블링이 진행되어도 변하지 않음

e.currentTarget(=this)

• 현재 실행중인 핸들러가 할당된 요소

예시

  <form id="form">FORM
    <div>DIV
      <p>P</p>
    </div>
  </form>

form태그에 onClick 이벤트를 할당하고 p 태그를 클릭하면
e.target은 p, e.currentTarget은 form

이벤트 버블링 중단

• 이벤트 버블링 중단은 반드시 필요한 경우(거의없음)를 제외하고는 사용하지 않음

e.stopPropagation()

• 상위 요소로의 이벤트 전파 중단

e.stopImmediatePropagation()

• 상위 요소로의 이벤트 전파 중단
• 같은 요소에 발생한 다른 이벤트 핸들러의 실행도 중단

이벤트 캡처링

이벤트가 하위 요소로 전파되는 단계, 거의 사용되지않음

capture 옵션

• addEventListener의 capture 옵션을 true로 설정해야 캡처링 단계에서 핸들러가 동작함

elem.addEventListener(..., true)

capture 옵션은 두 가지 값을 가질 수 있습니다.

false이면(default 값) 핸들러는 버블링 단계에서 동작합니다.
true이면 핸들러는 캡처링 단계에서 동작합니다.

event.eventPhase

• 현재 발생중인 이벤트 흐름의 단계를 알 수 있음
• 반환되는 정수값에 따라 이벤트 흐름의 현재 실행단계 구분가능(캡처링=1, 타깃=2, 버블링=3)