[JavaScript] 이벤트 버블링

이벤트 버블링
: HTML 태그에 이벤트가 발생하면 그의 모든 상위요소까지 모두 이벤트가 실행되는 현상

예시) 모달창의 검정배경(클래스명 black-bg)를 누르면 모달창이 닫히게 하고 싶다.
조건: 'show-modal' 클래스의 탈부착을 통해 모달창을 열고 닫음

html

<div class="black-bg">
	<div class="white-bg">
		<h4>로그인하세요</h4>
	</div>
</div>

javascript

document.querySelector('.black-bg').addEventListener('click',function(){
	document.querySelector('.black-bg').classList.remove('show-modal')
});

이렇게 코드를 짤 경우, 검정배경 뿐만 아니라 화면의 그 어디를 눌러도 모달창은 닫히게 된다.
그 이유가 바로 '이벤트 버블링' 때문이다!!!

위 html 코드에서
h4 태그의 '로그인하세요'를 클릭하면 브라우저는
h4, 그 위 div, 또 그 위 div 까지 사용자가 클릭을 총 세 번 했다고 인지한다.
결국 최상단의 div 태그인 black-bg 클래스까지 클릭되었으므로 모달창은 닫힌다.





이를 해결하기 위한 이벤트 함수가 있다.

이벤트리스너의 콜백함수에 파라미터를 아무거나(보통 e) 추가하면 이벤트 함수를 사용 가능하다.

- e.target: 실제 클릭한 요소를 알려줌
- e.currentTarget: 지금 이벤트리스너가 달린 곳을 알려줌 // this로 치환하여 사용 가능 // black-bg
- e.preventDefault: 이벤트 동작을 막아줌
- e.stopPropagation: 이벤트 버블링을 막음

그렇다면 위 문제를 해결하기 위해선

document.querySelector('.black-bg').addEventListener('click',function(e){
	if (e.target == document.querySelector('.black-bg')) {
		document.querySelector('.black-bg').classList.remove('show-modal')
	}
});

'실제 클릭한 요소'와 '검은 배경'이 일치할 경우에만
'show-modal' 클래스를 제거하여 모달창을 닫도록 명령한다.

완성~!~!