ํ์ค DOM ์ด๋ฒคํธ ์์ ์ ์ํ ์ด๋ฒคํธ ํ๋ฆ์ 3๊ฐ์ง ๋จ๊ณ
- ์บก์ณ๋ง ๋จ๊ณ : ์ด๋ฒคํธ๊ฐ ํ์ ์์๋ก ์ ํ๋๋ ๋จ๊ณ
- ํ๊น ๋จ๊ณ : ์ด๋ฒคํธ๊ฐ ์ค์ ํ๊น ์์์ ์ ๋ฌ๋๋ ๋จ๊ณ
- ๋ฒ๋ธ๋ง ๋จ๊ณ : ์ด๋ฒคํธ๊ฐ ์์ ์์๋ก ์ ํ๋๋ ๋จ๊ณ
- ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ๊ฐ์ฅ ๋จผ์ window ๊ฐ์ฒด์์๋ถํฐ target ๊น์ง ์ด๋ฒคํธ ์ ํ๊ฐ ์ผ์ด๋ฉ๋๋ค. (์บก์ณ๋ง ๋จ๊ณ)
- ๋๋ฌํ๋ฉด ํ๊น์ ๋ฑ๋ก๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋์ํ๊ณ , (ํ๊น ๋จ๊ณ)
- ์ดํ ๋ค์ window ๊ฐ์ฒด๋ก ์ด๋ฒคํธ๊ฐ ์ ํ๋ฉ๋๋ค. (๋ฒ๋ธ๋ง ๋จ๊ณ)
ํ๊น ๋จ๊ณ
ํ๊น ๋จ๊ณ์์ ์ด๋ฒคํธ ๊ฐ์ฒด์ target ํ๋กํผํฐ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ค์ ์์๋ฅผ ๊ฐ๋ฆฌํต๋๋ค.
์บก์ณ๋ง
๋ถ๋ชจ ์์์์ ๋ฐ์ํ ์ด๋ฒคํธ๊ฐ ์์ ์์๋ก ์ ํ๋๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</title>
</head>
<body>
<div id="content">
<h1 id="title">์ค๋ ํ ์ผ</h1>
<ol id="list">
<li class="item">์๋ฐ์คํฌ๋ฆฝํธ ๊ณต๋ถ</li>
<li class="item">๋
์</li>
</ol>
</div>
<script src="index.js"></script>
</body>
</html>
๐ ์บก์ณ๋ง ๋จ๊ณ์์ ๋ถ๋ชจ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋์
- ๋ณดํต ํ๊น ๋จ๊ณ์์ target์ ๋ฑ๋ก๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์์ผ๋ฉด ํด๋น ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋จผ์ ๋์ํ ์ด ํ์ ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ๊ฐ ๋ถ๋ชจ ์์์ ๋ฑ๋ก๋ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์์ผ๋ฉด ๊ทธ๋ ํด๋น ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ๋์ํ๋ ๊ฒ์ด ์ผ๋ฐ์ ์ด๋ค.
- ํ์ง๋ง ์ํฉ์ ๋ฐ๋ผ์๋ ์บก์ณ๋ง ๋จ๊ณ์์ ๋ถ๋ชจ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ๋์ํด์ผํ ๊ฒฝ์ฐ.
- addEventListener์ ์ธ๋ฒ์งธ ํ๋กํผํฐ์ true ๋๋ { capture:true }๋ฅผ ์ ๋ฌํ๋ฉด ๋๋ค.
๋ฒ๋ธ๋ง
์์ ์์์์ ๋ฐ์ํ ์ด๋ฒคํธ๊ฐ ๋ถ๋ชจ ์์๋ก ์ ํ๋๋ ๊ณผ์ ์ ์๋ฏธํฉ๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Bubbling Example</title>
<style>
.parent {
padding: 20px;
background-color: lightblue;
}
.child {
padding: 20px;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
Parent
<div class="child">
Child
</div>
</div>
<script>
// ๋ถ๋ชจ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ค์ ํฉ๋๋ค.
document.querySelector('.parent').addEventListener('click', function(event) {
alert('Parent element clicked!');
});
// ์์ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ์ค์ ํฉ๋๋ค.
document.querySelector('.child').addEventListener('click', function(event) {
alert('Child element clicked!');
// ์ด๋ฒคํธ๊ฐ ๋ฒ๋ธ๋ง ๋จ๊ณ์์ ์ ํ๋๋๋ก ํฉ๋๋ค.
// event.stopPropagation(); // ์ด ์ค์ ์ฃผ์ ์ฒ๋ฆฌํ์ฌ ๋ฒ๋ธ๋ง์ด ๊ณ์๋๋๋ก ํฉ๋๋ค.
});
</script>
</body>
</html>์ ์ฝ๋์์ ์์ ์์๋ฅผ ํด๋ฆญํ๋ฉด ๋ ๊ฐ์ ์๋ฆผ(alert)์ด ํ์๋ฉ๋๋ค
- "Child element clicked!"
- "Parent element clicked!"
์ด๊ฒ์ ์์ ์์์์ ๋ฐ์ํ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ถ๋ชจ ์์๋ก ์ ํ๋์ด ๋ถ๋ชจ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ์คํ๋์๊ธฐ ๋๋ฌธ์ ๋๋ค.
๋ง์ฝ ์ด๋ฒคํธ๊ฐ ๋ถ๋ชจ ์์๋ก ์ ํ๋๋ ๊ฒ์ ๋ง๊ณ ์ถ๋ค๋ฉด event.stopPropagation() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ด ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ํด๋น ์ด๋ฒคํธ๋ ๋ ์ด์ ์์ ์์๋ก ์ ํ๋์ง ์์ต๋๋ค. ์ด๋ฅผ ํ์ธํ๋ ค๋ฉด ์์ ์์์ ์ด๋ฒคํธ ํธ๋ค๋ฌ์ event.stopPropagation()์ ์ถ๊ฐํด ๋ณด์ธ์.
'๐ฉ๐ปโ๐ป ํ๋ก๊ทธ๋๋ฐ ์ธ์ด > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [Javascript] - ํจ์ ์ค์ฝํ์ ๋ธ๋ก ์ค์ฝํ์ ์ฐจ์ด์ (0) | 2024.07.19 |
|---|---|
| [Javascript] - ์ฆ์ ์คํ ํจ์๋ ? (0) | 2024.07.19 |
| [Javascript] - ํจ์ ์ ์ธ์๊ณผ ํจ์ ํํ์์ ์ฐจ์ด์ (0) | 2024.07.19 |
| [ํ๊ทธ ์ ํ์] getElement๊ณผ querySelector (0) | 2024.07.16 |
| [Javascript] - ์ ์ฌ ๋ฐฐ์ด์ด๋ ? (0) | 2024.07.16 |
