이벤트 버블링과 캡처링

이벤트 전파

• HTML태그는 계층적으로 이루어져 있음
• 계층적 구조로 인해, 이벤트가 발생할 경우 연쇄적 이벤트 흐름 발생

<div onclick="alert('div')">
  <p onclick="alert('p')">
  	<span onclick="alert('span')">
  	</span>
  </p>
</div>

위의 코드에서 span 태그를 클릭하면
alert('span') -> alert('p') -> alert('div')
순서로 이벤트가 발생

해당 현상을 이벤트 전파(event Propagation)라고 함
전파 방향에 따라 이벤트 버블링, 이벤트 캡처링으로 구분함

이벤트 버블링(event bubbling)

• 자식요소에서 발생한 이벤트가 바깥 부모요소로 전파
• default

이벤트 캡처링(event capturing)

• 자식 요소에서 발생한 이벤트가 부모 요소부터 시작하여 안쪽 자식 요소까지 도달
• addEventListener에 {capture:true}또는 true추가하면 사용 가능

자바스크립트 설정을 통해 전파방향 설정 가능
두가지 동시에 사용 가능

이벤트 전파 막기

• 자식요소만 이벤트를 발생, 부모요소는 막고 싶을 때 사용

event.stopPropagation()

• stopPropagation() 메소드를 사용하여 버블링 또는 캡처링 막음