이벤트 버블링과 이벤트 캡처링

 

이벤트 버블링은 `디폴트`로 생각하면 편하다

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

 

 

버블링은 위로 버블버블 올라간다고 생각하면 훨씬 이해하기 쉽다.

 

`버블링` : 자식 → 부모

`캡처링` : 부모 → 자식

 

버블링이 디폴트고, 캡처링은 따로 선언해 주어야 한다.

 

 

 

 

예시 코드

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

 

위와 같은 구조에서 <p>를 클릭하면 `p`→`div`→`form` 순서로 3개의 경고창을 나타나게 된다.
목록의 제목이나 내용에 `onClick`함수가 있는것이 아닌 전체를 감싸주는 박스에 `onClick`함수가 있을 경우 발생하게 된다.

이러한 경우 `event.target.id`가 아닌 `event.currentTarget.id` 를 사용하여 버블링을 막아 줄 수 있다.

 

 

 

 

event.currentTarget.id 
event.target.id //자식의 타겟 설정

 

버블링이 일어나기 때문에 해당 target을 사용해야 한다.

 

 

특히 타입스크립트에서 이미 crrrentTarget는 부모에서 버블링이 전파되었다는 것을 알기 때문에

if문을 사용할 필요가 없고, instance of 속성을 안적어줘도 된다.

`이벤트를 위임했다`고도 말하고, `벨리게이션`이라고도 한다.

 

 

전파를 중지하고 싶을때 사용하는 속성 (상위 엘리먼트들로의 이벤트 전파를 중지시킨다)

stopPropagation();

 

 

 

그림 한장 요약!