๋ธ๋ผ์ฐ์ ๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด, capturing -> bubbling ์์ผ๋ก ์ด๋ฒคํธ๋ฅผ ๊ฐ์ง ํฉ๋๋ค.
์ด๋ฒคํธ ๋ฒ๋ธ๋ง (Event Bubbling)
- ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ ํน์ ํ๋ฉด ์์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์ ๋ ํด๋น ์ด๋ฒคํธ๊ฐ ๋ ์์์ ์์์๊ฒ ์ ๋ฌ๋์ด ๊ฐ๋ ํน์ฑ์ ์๋ฏธํฉ๋๋ค.
์์์ ํ๋ฉด ์์๋?
HTML ์์๋ ๊ธฐ๋ณธ์ ์ผ๋ก ํธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ๊ฐ์ต๋๋ค.์ฌ๊ธฐ์๋ ํธ๋ฆฌ ๊ตฌ์กฐ์์ผ๋ก ํ ๋จ๊ณ ์์ ์๋ ์์๋ฅผ ์์ ์์๋ผ๊ณ ํ๋ฉฐ body ํ๊ทธ๋ฅผ ์ต์์ ์์๋ผ๊ณ ๋ถ๋ฅด๊ฒ ์ต๋๋ค.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
one.addEventListener("click", function () {
console.log("one");
});
two.addEventListener("click", function () {
console.log("two");
});
three.addEventListener("click", function () {
console.log("three");
});
- ๊ฐ์ฅ ํ์ ํ๊ทธ์ธ three ๋ฅผ ํด๋ฆญ ํ์ ๋ ๊ฒฐ๊ณผ ์ ๋๋ค.
- ์ฆ, ํ ์์์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด, ์ด ์์์ ํ ๋น๋ ํธ๋ค๋ฌ๊ฐ ๋์ํ๊ณ , ์ด์ด์ ๋ถ๋ชจ ์์์ ํธ๋ค๋ฌ๊ฐ ๋์ ํฉ๋๋ค.
- ๊ฐ์ฅ ์ต์๋จ์ ๋ถ๋ชจ ์์๋ฅผ ๋ง๋ ๋๊น์ง ์ด ๊ณผ์ ์ด ๋ฐ๋ณต๋๋ฉด์ ์์ ๊ฐ๊ฐ์ ํ ๋น๋ ํธ๋ค๋ฌ๊ฐ ๋์ ํฉ๋๋ค.
๋ฒ๋ธ๋ง์์ ์ฃผ์ํด์ผ ํ ์ ์
- ๋ถ๋ชจ/์์ ๊ตฌ์กฐ์์ ๋์ผํ ์ด๋ฒคํธ๋ง bubbling ์ด ๋ฉ๋๋ค.
- ๋ถ๋ชจ์๊ฒ๋ mousedown ์ด๋ฒคํธ, ์์์๊ฒ๋ click ์ด๋ฒคํธ๋ฅผ ๋ฑ๋กํด๋๊ณ , ์์์ ํด๋ฆญํ๋ฉด ๋ถ๋ชจ์ mousedown ์ด๋ฒคํธ๋ ๋์ํ์ง ์์ต๋๋ค.
์ด๋ฒคํธ ์บก์ณ (Event Capture)
- ์ด๋ฒคํธ ์บก์ณ๋ ์ด๋ฒคํธ ๋ฒ๋ธ๋ง๊ณผ ๋ฐ๋ ๋ฐฉํฅ์ผ๋ก ์งํ๋๋ ์ด๋ฒคํธ ์ ํ ๋ฐฉ์์ ๋๋ค.
<body>
<div class="one">
<div class="two">
<div class="three">
</div>
</div>
</div>
</body>const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");
one.addEventListener("click", function () {
console.log("one");
},true);
two.addEventListener("click", function () {
console.log("two");
},true);
three.addEventListener("click", function () {
console.log("three");
},true);
- addEventListener() API์์ ์ต์
๊ฐ์ฒด์ capture:true๋ฅผ ์ค์ ํด์ฃผ๋ฉด ๋ฉ๋๋ค.
๊ทธ๋ฌ๋ฉด ํด๋น ์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ๊ธฐ ์ํด ์ด๋ฒคํธ ๋ฒ๋ธ๋ง๊ณผ ๋ฐ๋ ๋ฐฉํฅ์ผ๋ก ํ์ํฉ๋๋ค.
event.stopPropagation()
function logEvent(event) {
event.stopPropagation();
}- ์ด๋ฒคํธ ์ ๋ฌ ๋ฐฉ์์ ์ ๊ฒฝ ์ฐ์ง ๋ง๊ณ , ์ํ๋ ํ๋ฉด ์์์ด ์ด๋ฒคํธ๋ง ์ ๊ฒฝ ์ฐ๊ณ ์ถ์ ๋ ์ฃผ๋ก ์ฌ์ฉ ํฉ๋๋ค.
- ์ API๋ ํด๋น ์ด๋ฒคํธ๊ฐ ์ ํ๋๋ ๊ฒ์ ๋ง์ต๋๋ค.
- ์ด๋ฒคํธ ๋ฒ๋ธ๋ง์ ๊ฒฝ์ฐ์๋ ํด๋ฆญํ ์์์ ์ด๋ฒคํธ๋ง ๋ฐ์์ํค๊ณ ์์ ์์๋ก ์ด๋ฒคํธ๋ฅผ ์ ๋ฌํ๋ ๊ฒ์ ๋ฐฉํดํฉ๋๋ค.
- ์ด๋ฒคํธ ์บก์ณ์ ๊ฒฝ์ฐ์๋ ํด๋ฆญํ ์์์ ์ต์์ ์์์ ์ด๋ฒคํธ๋ง ๋์์ํค๊ณ ํ์ ์์๋ค๋ก ์ด๋ฒคํธ๋ฅผ ์ ๋ฌํ์ง ์์ต๋๋ค.
์ด๋ฒคํธ ์์ (Event Delegation)
- ํ์ ์์์ ๊ฐ๊ฐ ์ด๋ฒคํธ๋ฅผ ๋ถ์ด์ง ์๊ณ ์์ ์์์์ ํ์ ์์์ ์ด๋ฒคํธ๋ค์ ์ ์ดํ๋ ๋ฐฉ์
- ์ฆ, ์ฌ๋ฌ ์๋ฆฌ๋จผํธ๋ง๋ค ๊ฐ๊ฐ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํ ๋นํ์ง ์๊ณ ,
๊ณตํต๋๋ ๋ถ๋ชจ์ ์ด๋ฒคํธ ํธ๋ค๋ฌ๋ฅผ ํ ๋นํ์ฌ ์ด๋ฒคํธ๋ฅผ ๊ด๋ฆฌํ๋ ๋ฐฉ์ ์ ๋๋ค.
๊ฐ ํ์ ์์์๊ฒ ์ด๋ฒคํธ๋ฅผ ๋ฐ๋ก ์ง์ ํ๋ ๊ฒฝ์ฐ(์์X)
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>const list = document.querySelectorAll('li')
list.forEach(li =>{
li.addEventListener('click',()=>{
li.classList.add('click')
})
})
๊ณตํต๋๋ ๋ถ๋ชจ์๊ฒ ์ด๋ฒคํธ ์ง์ (์์)
const ul = document.querySelector('ul')
ul.addEventListener('click',(event)=>{
if(event.target.tagName = 'li'){
event.target.classList.add('click')
})
์ด๋ฒคํธ ์์์ ํ๋ ์ด์ ?
- ๊ณตํต์ ์ผ๋ก ๋ฌด์ธ๊ฐ๋ฅผ ์ฒ๋ฆฌํด์ผ ํ ๋, ์ผ์ผ์ด ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์์์ ์ถ๊ฐํ๋ ๊ฒ ๋ณด๋ค ํจ์จ์ ์
๋๋ค.
( ํนํ ์์์์๊ฐ ๋ง์ ์ง ์๋ก ) - ๋์ ์ธ element์ ๋ํ ์ด๋ฒคํธ ์ฒ๋ฆฌ๊ฐ ์์ ํฉ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ์ฌ์ฉ๋์ด ์ค์ด๋ญ๋๋ค.
- ๋ฉ๋ชจ๋ฆฌ ๋์ ๊ฐ๋ฅ์ฑ์ด ์ค์ด๋ญ๋๋ค.
์ฐธ๊ณ
'๐ Front-End > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์์ฑ์ ํจ์ (0) | 2022.11.16 |
|---|---|
| Event Loop (0) | 2022.11.16 |
| Callback Function (0) | 2022.11.16 |
| ํจ์ ์ ์ธ๋ฌธ๊ณผ ํจ์ ํํ์์ ์ฐจ์ด์ (0) | 2022.11.16 |
| Hoisting(ํธ์ด์คํ ) (0) | 2022.11.16 |
