이벤트 버블링, 이벤트 캡쳐

이벤트 버블링

이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미합니다.

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

위와 같은 구조에서 p 태그를 클릭하면 p > div > form 순서로 3개의 경고창이 나타나게 됩니다. 이벤트 버블링으로 인한 클릭 이벤트가 전파되므로 이러한 현상이 발생하게 됩니다.

p 태그를 클릭하면 할당되어 있는 이벤트가 발생하고 다음에는 바깥의 div 태그에 할당된 이벤트가 발생하고 document 객체를 만날 때까지 이벤트가 전파됩니다.

이벤트 캡쳐링

캡처링은 버블링과는 반대로 최상위 태그에서 해당 태그를 찾아 내려갑니다

이벤트 전파 막기

버블링은 해당 타깃에서 document 객체를 만날 때까지 핸들러가 모두 호출되는데 코드를 작성하다보면 원하는 타깃에서만 이벤트를 발생해야 할 때가 있습니다.

그럴 때에는 event.stopPropagation() 을 사용하면 되는데 버블링의 경우에는 클릭한 타깃의 이벤트만 발생하고 상위 요소로 이벤트가 전파되는 것을 막을 수 있습니다

const clickEvent = (event) => {
  e.stopPropagation();
  console.log(event.currentTarget.id);
};