π»μ΄λ²€νΈκ° DOM μμλ€ μ¬μ΄μμ μ νλλ λ°©λ²π»
1. μ΄λ²€νΈ λ²λΈλ§(Event Bubbling) β β β
- μ΄λ²€νΈκ° λ°μν μμμμ μμνμ¬ μμ μμλ€λ‘ μ νλλ λ°©μμ΄λ€.
- μ¦, μ΄λ²€νΈκ° κ°μ₯ νμ μμμμ μμλμ΄ μμ μμλ€λ‘ μ¬λΌκ°λ©΄μ κ°κ°μ μμμμ μ΄λ²€νΈλ₯Ό μ²λ¦¬ν κΈ°νλ₯Ό κ°κ² λλ€.
2. μ΄λ²€νΈ ν°λλ§(Event Tunneling)
- μ΄λ²€νΈκ° μμ μμμμ μμνμ¬ νμ μμλ‘ μ νλλ λ°©μμ΄λ€.
- μ¦, μ΄λ²€νΈκ° κ°μ₯ μμ μμμμ μμλμ΄ νμ μμλ‘ λ΄λ €κ°λ©΄μ κ°κ°μ μμμμ μ΄λ²€νΈλ₯Ό μ²λ¦¬ν κΈ°νλ₯Ό κ°κ² λλ€.
- μ΄λ²€νΈ μΊ‘μ³λ§(Capturing)λΌκ³ λ νλ€.
JavaScriptλ κΈ°λ³Έμ μΌλ‘ μ΄λ²€νΈ ν°λλ§μ μ§μνμ§ μκ³ μ΄λ²€νΈ λ²λΈλ§μ μ§μνλ€.
π»μ΄λ²€νΈ λ²λΈλ§π»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {padding: 50px;}
#p1 {background-color: tomato;}
#p2 {background-color: gold;}
#p3 {background-color: cornflowerblue;}
</style>
</head>
<body>
<div id="p1" class="box">
<div id="p2" class="box">
<div id="p3" class="box"></div>
</div>
</div>
</body>
</html>
<script>
const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
const p3 = document.getElementById('p3');
p1.onclick = function(){
alert('red');
}
p2.onclick = function(){
alert('yellow');
}
p3.onclick = function(){
alert('blue');
}
</script>
νλμ μμμΈ p3λ₯Ό ν΄λ¦νλ€λ©΄ blue μΆλ ₯ ν yellow, redκ° μΆλ ₯λλ€. μ΄ κ²°κ³Όλ₯Ό λ²λΈλ§ νμμ΄λΌκ³ νλ€.
λ²λΈλ§μ μ΄λ²€νΈκ° λ°μν νμμμλΆν° μμμμλ‘ μ νλλ λ°©μμ΄λ€.
p3μμ λ°μνμ¬ p2, p1, body, html μμΌλ‘ μ΄λ²€νΈκ° λ°μλμμμ μ λ¬λ°λλ€. μ΄ λ, ν΄λΉ μμμ μ΄λ²€νΈκ° μ μλμ΄ μμΌλ©΄ μ€νμ΄ λκ³ μλμ΄ μμΌλ©΄ κ·Έλ₯ ν΅κ³Όκ° λλ€.
p2, p1μ μ΄λ²€νΈκ° μ μλμ΄ μμ΄ p3 μ΄λ²€νΈλ₯Ό μ€νν ν μλ‘ μ¬λΌκ° p2, p1 μ΄λ²€νΈλ μ€νλ κ²μ΄λ€.
p2λ₯Ό ν΄λ¦νλ€λ©΄
μ΅νμμμμΈ p3κΉμ§ λ΄λ €κ°μ§ μκ³ λ³ΈμΈκΉμ§λ§ λ΄λ €κ°λ€κ° μ ν΄ν΄μ μ¬λΌκ°λ€.
μ΄λ²€νΈ λ²λΈλ§ μ€λ¨
μ¬λΌκ°λ λ²λΈλ§μ λ§λ cancelBubbleλ₯Ό μ΄μ©νλ©΄ ν΄λΉ μμ μμ μ΄λ²€νΈ λ²λΈλ§μ μ€λ¨νλ€.
λΉμ¬μμΈ p3λ§ μ€ννκ³ μΆμ κ²½μ°, p3 μ΄λ²€νΈμ μλ μ½λλ₯Ό μΆκ°νλ€.
event.cancelBubble = true;event.stopPropagation(); //μ΄λ²€νΈ μ ν μ€μ§
<script>
const p1 = document.getElementById('p1');
const p2 = document.getElementById('p2');
const p3 = document.getElementById('p3');
p1.onclick = function(){
alert('red');
}
p2.onclick = function(){
alert('yellow');
}
p3.onclick = function(){
alert('blue');
event.cancelBubble = true;
}
</script>p3λ₯Ό ν΄λ¦νλ©΄ blueλ§ μΆλ ₯λλ€.
π»λ°©ν₯ν€λ‘ μ¬μ§ μ¬μ΄μ¦ μ‘°μ νκΈ° (with ν μ€νΈλ°μ€)π»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="txt1">
<hr>
<img src="../asset/images/catty01.png" id="cat1">
</body>
</html>
<script>
//document.getElementById('cat1').onkeydown //ν¬μ»€μ€λ₯Ό κ°μ§ μ μλ κ°μ²΄μ ν€μ΄λ²€νΈλ₯Ό μ μ©ν μ μλ€.
//windowμ ν€μ΄λ²€νΈνΈλ λͺ¨λ μν©μ λ°μνλ€.
window.onkeydown = function() {
if(event.keyCode == 37) {
document.getElementById('cat1').width -= 10;
} else if (event.keyCode == 39) {
document.getElementById('cat1').width += 10;
}
}
</script>
ν μ€νΈλ₯Ό μμ νλ €κ³ λ°©ν₯ν€λ₯Ό λλ¬λ μ¬μ§ μ¬μ΄μ¦κ° μ‘°μ λλ€.
document.getElementById('txt1').onkeydown = function () {
event.cancelBubble = true;
};ν μ€νΈ λ°μ€μ μ΄λ²€νΈ λ²λΈλ§ μ€λ¨ λ©μλλ₯Ό μ΄μ©νμ¬ μμμμμ μ΄λ²€νΈλ₯Ό λ°μνμ§ μλλ‘νλ€.
π»DOM μ΄λ²€νΈμμμ μ΄λ²€νΈ λ²λΈλ§, ν°λλ§π»
- κΈ°λ³Έ λμμ μ΄λ²€νΈ λ²λΈλ§μ΄λ€.
- BOMμ΄λ²€νΈμμ μ΄λ²€νΈ λ²λΈλ§, DOMμ΄λ²€νΈμμ μ΄λ²€νΈ λ²λΈλ§, ν°λλ§μ μ νν μ μλ€.
DOMμ΄λ²€νΈ - μ΄λ²€νΈ ν°λλ§
<script>
p1.addEventListener('click', function() {
alert('red');
}, true);
p2.addEventListener('click', function() {
alert('yellow');
}, true);
p3.addEventListener('click', function() {
alert('blue');
}, true);
</script>p3λ₯Ό ν΄λ¦νλ©΄ red, yellow, blue μμΌλ‘ μΆλ ₯λλ€.
μ΄λ²€νΈ ν°λλ§μ μ΄λ²€νΈκ° κ°μ₯ μμ μμμμ μμλμ΄ νμ μμλ‘ λ΄λ €κ°λ©΄μ κ°κ°μ μμμμ μ΄λ²€νΈλ₯Ό μ²λ¦¬νλ λ°©μμ΄λ€. μ΄μ체μ μμ λΈλΌμ°μ , html, body, p1, p2, p3 μμΌλ‘ μ΄λ²€νΈκ° λ°μλμμμ μ λ¬λ°λλ€. μ΄ λ, ν΄λΉ μμμ μ΄λ²€νΈκ° μ μλμ΄ μμΌλ©΄ μ€νμ΄ λκ³ μλμ΄ μμΌλ©΄ κ·Έλ₯ ν΅κ³Όκ° λλ€.
μ΄λ²€νΈ μ μκ° μλμ΄ μλ html, body νκ·Έλ λμ΄κ°κ³ p1, p2, p3 μμΌλ‘ μ΄λ²€νΈκ° μ€νλμλ€.
DOMμ΄λ²€νΈ - μ΄λ²€νΈ ν°λλ§ & λ²λΈλ§
<script>
//μ΄λ²€νΈ ν°λλ§ & λ²λΈλ§
p1.addEventListener('click', function() {
alert('red');
}, true);
p2.addEventListener('click', function() {
alert('yellow');
}, true);
p3.addEventListener('click', function() {
alert('blue');
}, true);
p1.addEventListener('click', function() {
alert('red');
});
p2.addEventListener('click', function() {
alert('yellow');
});
p3.addEventListener('click', function() {
alert('blue');
});
</script>μ΄λ²€νΈ ν°λλ§ & λ²λΈλ§ κ°μ΄ μ¬μ©λ κ°λ₯νμ§λ§ μ΄λ° κ²½μ°λ νμΉ μλ€.
λ²λΈλ§ νΈλλ§κ³Ό cancel ν΅μ λ₯Ό μ κΈ°μ΅ν΄λλ κ²μ΄ μ’λ€.
'WEB > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] μ΄λ²€νΈμ Hover Table(3) (0) | 2023.10.11 |
|---|---|
| [JavaScript] μ΄λ²€νΈμ Hover Table(2) (0) | 2023.10.11 |
| [JavaScript]λ¬Έμμ΄ μ‘°μ : template (0) | 2023.10.11 |
| [JavaScript] ν¨μλ 1κΈ κ°μ²΄μ΄λ€. (0) | 2023.10.11 |
| [JavaScript] object (0) | 2023.10.11 |
