클릭이 이상해,,, 이벤트 버블링

각 div 중 어느 div를 선택하든 이벤트가 발생한 태그의 값을 받아오는 방법을 아라보자

이벤트 버블링

• 특정 화면 요소에서 이벤트가 발생했을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성이다.
• 브라우저는 특정 화면 요소에서 이벤트가 발생했을 때 그 이벤트를 최상위에 있는 화면 요소까지 이벤트를 전파시킨다.

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

이렇게 코드를 입력하고 <p>를 클릭하면 p->div->form 순서로 3개의 경고창이 뜬다.

예시

부모 태그에 onClick 이벤트가 발생하면 id 값을 받아오는 함수를 작성한 코드이다.

바깥(부모) 부분을 클릭하면 의도한대로 잘 실행된다.

자식 부분을 클릭하면 부모의 onClick이 실행되고(이벤트 전파), 값은 없다고 나온다.
자식을 클릭했는데 부모의 onClick이 실행됨....

부모의 안에 있는 자식 누구를 클릭하더라도 이벤트가 실행되는 것이다!!
값은 자식 본인의 값을 불러오기 때문에 값이 없다고 나오는 것이다.

어디를 클릭하든 값이 나오게 하고싶다면,
event.target.id 대신에
현재 전파된 태그를 의미하는 event.currentTarget.id를 사용해주면 된다.

event.currentTarget : 이벤트가 실행된 태그!

이벤트 캡쳐링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 것이다.

addEventListener() API에서 옵션 객체에 capture:true를 설정해주면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색한다.