728x90
반응형
[JavaScript] 12. 이벤트 위임과 버블링
1. 이벤트 위임이란?
2. 버블링과 캡쳐링
3. 시나리오 코드 (코드 예제)
(1) 버블링
<!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>
<div id="parent">
<button id="child">Click me!</button>
</div>
<script>
document.getElementById('parent').addEventListener('click',()=>{
alert('Parent Div Clicked!');
})
document.getElementById('child').addEventListener('click',()=>{
alert('Button Clicked!');
});
</script>
</body>
</html>*화살표 함수
document.getElementById('parent').addEventListener('click',()=>{})
(2) 이벤트
<!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>
<!-- 이벤트 전파 속성 : 버블링에 대한 개념 -->
<div id="parent">
<button id="child">Click me!</button>
</div>
<script>
document.getElementById('parent').addEventListener('click',()=>{
// alert('Parent Div Clicked!');
})
document.getElementById('child').addEventListener('click',(event)=>{
console.log('event',event);
// alert('Button Clicked!');
});
</script>
</body>
</html>
(3) 버블링 중단하기
<!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>
<!-- 이벤트 전파 중단하기 -->
<div id="parent">
<button id="child">Click me!</button>
</div>
<script>
document.getElementById('parent').addEventListener('click',()=>{
alert('Parent Div Clicked!');
})
document.getElementById('child').addEventListener('click',(event)=>{
console.log('event',event);
alert('Button Clicked!');
event.stopPropagation(); // 버블링 중단.
});
</script>
</body>
</html>
(4) 이벤트 위임 활용
<!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>
<!--이벤트 위임에 대한 개념을 배우기 전, 코드 활용-->
<ul id="myList">
<li><button>버튼1</button></li>
<li><button>버튼2</button></li>
<li><button>버튼3</button></li>
</ul>
<script>
// 각 버튼에 개별적으로 이벤트 리스너를 추가해보자.
// 단, 반복문 활용
let btns=document.querySelectorAll("#myList button");
console.log('btns',btns);
//btns.forEach(function(b){
//alert('1');
// console.log('b',b);
// });
btns.forEach((button)=>{
//alert('1');
console.log('button',button);
});
</script>
</body>
</html>
<!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>
<!--이벤트 위임에 대한 개념을 배우기 전, 코드 활용-->
<ul id="myList">
<li><button>버튼1</button></li>
<li><button>버튼2</button></li>
<li><button>버튼3</button></li>
</ul>
<script>
// 각 버튼에 개별적으로 이벤트 리스너를 추가해보자.
// 단, 반복문 활용
let btns=document.querySelectorAll("#myList button");
console.log('btns',btns);
//btns.forEach(function(b){
//alert('1');
// console.log('b',b);
// });
btns.forEach((button)=>{
//alert('1');
//console.log('button',button);
button.addEventListener('click',function(){
alert("버튼 클릭 확인");
})
});
</script>
</body>
</html>
(5) 이벤트 위임의 활용
<!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>
<!--이벤트 위임에 대한 개념을 배우기 전, 코드 활용-->
<ul id="myList">
<li><button>버튼1</button></li>
<li><button>버튼2</button></li>
<li><button>버튼3</button></li>
</ul>
<script>
// button에 각각 이벤트 리스너를 등록하자!
document.getElementById("myList").addEventListener('click',function(event){
console.log(event.target);
// 해당하는 타겟에 textContent를 가지고 오고 싶다면
console.log(event.target.textContent);
// 어떤 버튼이 눌러졌는지 alert() 창을 띄워주세요.
alert(event.target.textContent);
});
</script>
</body>
</html>728x90
반응형
'HTML,CSS, JS > JavaScript' 카테고리의 다른 글
| [JavaScript] 14. 이벤트 처리 - 이미지 토글 (0) | 2024.08.01 |
|---|---|
| [JavaScript] 13. 이벤트 위임 - 연습문제 풀이 (0) | 2024.07.26 |
| [JavaScript] 11. EventListener (0) | 2024.07.26 |
| [JavaScript] 10. 자바스크립트의 이벤트 처리 (0) | 2024.07.24 |
| [JavaScript] 9-1. 예제 (0) | 2024.07.22 |