[Javascript] 이벤트 버블링 / Event-Bubbling

이벤트 버블링이란?

특정 화면에서 JS의 이벤트가 발생했을 때 자식 요소에서 부모 요소에게로 이벤트가 전파되는 현상. 반대되는 현상으로는 이벤트 캡쳐링이 있다.

 

예시

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

위와 같은 코드가 있다고 가정했을 때, p를 클릭하면 p > div > form 순으로 경고창이 뜬다. p > div > form 순으로 클릭 이벤트가 전파되기에 발생하는 현상. 이러한 것을 이벤트 버블링이라고 한다.

 

이벤트 버블링 막기

이벤트 버블링은 많은 경우 유용하지만, 버블링을 막아야하는 상황이 종종 있다.

예를 들면 댓글 삭제를 구현하기 위해 특정 div의 id를 뽑아와야 하는 경우. event.target 의 id를 받아와서 API 요청을 보내야만 댓글 삭제가 이루어지는데, id가 들어가있지 않은 부모 요소로 이벤트가 전파되면 클릭하는 위치에 따라 id값을 받아오지 못하고 undefined가 뜰 수 있는 것. 사용자가 클릭하는 위치에 따라 게시글 삭제가 작동할수도, 작동하지 않을 수도 있다. 이런 불확실한 방식으로는 해당 기능이 제대로 구현되었다고 볼 수 없다. 어떻게 이 문제를 해결해야 할까?

 

이럴 때 사용할 수 있는 방법에는 크게 두 가지가 있다.

1. event.target 대신 event.currentTarget으로 대상을 지정한다.
2. event.stopPropagation() 으로 이벤트 전파를 중지한다.

 

더 자세한 사항은 모던 자바스크립트 튜토리얼을 참고하자.

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링