프론트엔드 개발자라면 addEventListener를 어떻게 사용하는지 알 뿐만 아니라

이벤트가 어떻게 동작하는지도 알고 있어야 한다!

<aside> 📌 가장 직관적인 click 이벤트로 예시를 들어보겠습니다.

</aside>

❓ 뭐가 문제야?

<html>
	<body>
		<div></div>
	</body>
</html>

const div = document.querySelector('div');
div.addEventListener('click', something)

이벤트가 걸린 div를 클릭하면 무슨 일이 일어날까?

HTML을 3D로 표현.

HTML을 3D로 표현.

3D의 단면을 표현.

3D의 단면을 표현.

div는 이벤트가 실행되는 직접적인 요소.
div 하나만 눌렀다고 말할 수 있을까? 만약 부모들에게도 똑같이 click 이벤트가 있다면?
정답은 다같이 실행한다!
이벤트가 적용 대상에 바로 실행되는 것이 아닌 순차적으로 실행되는 것이 생김 → evnet flow를 가진다!

여기서 중요한 용어 정리!

body의 입장에서 이벤트의 실행 주체는 div지만 이벤트 주인은 div임.

body의 입장에서 이벤트의 실행 주체는 div지만 이벤트 주인은 div임.

current target : 이벤트의 진짜 주인.
target : 이벤트의 시발점.
이 둘을 분리해서 생각해야 함.

🤔 어떻게 실행되는데?

event flow는 흐름이 정해져 있음.