[🍦] 이벤트 버블링 🫧

티스토리 뷰

Language/JavaScript

[🍦] 이벤트 버블링 🫧

채._. 2025. 1. 17. 14:33

📍이벤트 버블링이란?

거품이 계속해서 커지는 것처럼 내부에 발생한 이벤트가 외부러 뻗어나가는 현상이다.

예시로 아래 코드를 살펴보겠다.

모달창 세팅

[index.html]

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- css 코드 가져오기 -->
	<link rel="stylesheet" href="styles.css">
	<title>Document</title>
</head>

<body>
	<div>본문</div>
	<button class="modal-btn">모달열기</button>
	<div class="modal">
		<div class="modal-content">
			<input class="아이디" type="text" placeholder="아이디" />
			<input class="비밀번호" type="password" placeholder="비밀번호" />
			<button class="login">로그인하기</button>
			<button class="close-btn">닫기</button>
		</div>
	</div>
	<!-- 자바스크립트 코드 가져오기 -->
	<script src="script.js"></script>
</body>

</html>

[styles.css]

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: gray;
  opacity: 0.8;
  /* 추가 */
  display: none;
  padding-top: 100px;
}

.modal-content {
  width: 200px;
  height: 200px;
  background-color: white;
  padding: 20px;
  margin: auto;
}

/* 추가 */
.show {
  display: block;
}

[script.js]

function 모달창열닫() {
  document.querySelector(".modal").classList.toggle("show");
}

document.querySelector(".modal-btn").addEventListener("click", 모달창열닫);

document.querySelector(".close-btn").addEventListener("click", 모달창열닫);

모달창 외부의 회색 배경 클릭 시 모달창이 닫히도록 구현

1. 회색 배경 태그 가져오기

document.querySelector(".modal");

2. 회색 배경 클릭 이벤트 등록하기

document.querySelector(".modal").addEventListener("click", function 함수명() {})

3. 클릭 이벤트 시 모달창 닫히도록 구현하기

document.querySelector(".modal").addEventListener("click", function 함수명() {
	document.querySelector(".modal").classList.remove("show");
})

<div> // 얘를 클릭하게 됨
	<div> // 얘를 클릭하면
		하핳
	</div>
<div>

=> 모달창 내부를 클릭해도 회색 배경을 클릭한 것처럼 인식함

📍해결방법

이벤트 버블링을 막아야 한다!

event 객체 사용하기(이벤트 등록 시 자동으로 생긴다.)

document.querySelector(".modal").addEventListener("click", function 함수명(event) {
	// 여기서 이벤트 활용 가능
	event.target; // 사용자가 누른 태그
	event.currentTarget; // 이벤트가 등록된 태그 ex) document.querySelector(".modal")
	event.preventDefault(); // 기본 동작 막음 ex) form 제출 시 새로고침 막음
	event.stopPropagation(); // 이벤트 버블링을 막아줌
});

문제

event.target을 사용해서 회색 배경을 클릭할 때만 모달창 닫히게 하기.

document.querySelector(".modal").addEventListener("click", (event) => {
	// 클릭한 놈이 모달 배경일 때 => 닫히게 한다.
  if (클릭한 놈 === 모달 배경 태그) {
		모달창 안보이게 하기
  }
});

정답

document.querySelector(".modal").addEventListener("click", (event) => {
  if (event.target === document.querySelector(".modal")) {
    document.querySelector(".modal").classList.remove("show");
  }
});

'Language > JavaScript' 카테고리의 다른 글

[🍦] 손님~ 진동벨로 알려드릴게요! (2) - async, await (0)	2025.01.17
[🍦] localStorage (1)	2025.01.17
간혹가다 헷갈릴 수 있는 문제들 ! - 문제은행 오답 풀이 (1)	2025.01.16
[🍦] 손님~ 진동벨로 알려드릴게요! (1) - promise (0)	2025.01.16
[🍦] 모달창 여러 추가 기능 구현하기 (0)	2025.01.15

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2026/03 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

글 보관함

개발 🐾

티스토리 뷰

[🍦] 이벤트 버블링 🫧

'Language > JavaScript' 카테고리의 다른 글

티스토리툴바