💡 학습 목표
|
1. addEventListener() 메서드의 활용
addEventListener() 메서드의 활용 - 아이템 추가, 토글 기능 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="reset.css" />
<style>
body {
margin: 16px;
display: flex;
justify-content: center;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
margin: 8px 0;
padding: 10px;
border: 1px solid #ccc;
display: flex;
justify-content: space-between;
align-items: center;
}
</style>
</head>
<body>
<div>
<h2>EventListener를 사용한 요소 추가, 삭제 수정, 토글 만들기</h2>
<br /><br />
<button id="addBtn">아이템 추가</button>
<button id="toggleBtn">리스트 토글</button>
<br /><br />
<ul id="myList">
<li>
아이템 1
<button class="editBtn">수정하기</button>
<button class="deleteBtn">삭제하기</button>
</li>
</ul>
</div>
<script>
let count = 1;
// * 아이템 추가 기능
// 1. 아이템 추가(addBtn) 이벤트 리스너를 등록 하자.
// 2. li 요소를 동적으로 생성
// 3. Ul 요소에 접근해서 자바스크립트 코드로 생성한 요소를 추가하자
document.getElementById("addBtn").addEventListener('click', function() {
count++;
let newItem = document.createElement('li');
newItem.innerHTML = ` 아이템 ${count} <button class="editBtn">수정하기</button> <button class="deleteBtn">삭제하기</button> `;
document.getElementById('myList').append(newItem);
});
// * 아이템 토글 기능을 만들어 보자.
document.getElementById('toggleBtn').addEventListener('click', function() {
let list = document.getElementById('myList');
list.style.display = list.style.display == 'none' ? '' : 'none';
});
</script>
</body>
</html>
2. 이벤트 위임(Event Delegation)
이벤트 리스너 를 하위 요소 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴입니다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용합니다.
원리
브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(bubbling)됩니다. 이벤트 위임을 사용하면, 상위 요소에서 하위 요소에서 발생한 이벤트를 감지할 수 있습니다.
| 💡 버블링(Bubbling) 버블링(Bubbling)은 이벤트가 발생한 요소에서 시작해 DOM 트리를 따라 위로 올라가며 전파되는 이벤트 전파 방식입니다. 즉, 하위 요소에서 이벤트가 발생하면 그 이벤트는 상위 요소로 전파됩니다. 이를 통해 상위 요소에서 하위 요소의 이벤트를 감지할 수 있게 됩니다. |
시나리오 코드 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>
시나리오 코드 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! ');
} )
// 버블링 중단하기 - 인수로 event 객체를 전달 받을 수 있다.
document.getElementById('child').addEventListener('click', (event) => {
console.log('event', event);
alert('Button Clicked!');
event.stopPropagation(); // 버블링 중단.
});
</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>
<!-- 이벤트 위임에대한 개념을 배우기 전 코드 활용 -->
<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>
시나리오 코드 4 - 이벤트 위임에 활용
이벤트 위임을 사용하면, ul 요소에 하나의 이벤트 리스너만 추가하여 모든 버튼의 클릭 이벤트를 처리할 수 있습니다.
<!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);
// 해당하는 target에 textContent 가지고 오고 싶다면
console.log(event.target.textContent);
// 연습문제 1
// 어떤 버튼이 눌러 졌는지 alert() 을 띄워 주세요.
// alert(event.target.textContent);
// 연습문제 2
// 해당하는 버튼에 컨텐츠를 영어로 수정하시오
// event.target.textContent = "button";
// 연습문제 3
// 버튼 2 라는 글자를 가진 버튼만 글자를 수정하시오.
} );
</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>
// button에 각각 이벤트 리스너를 등록하자. !!
document.getElementById('myList').addEventListener('click', (event) => {
console.log(event.target);
// 해당하는 target에 textContent 가지고 오고 싶다면
console.log(event.target.textContent);
// 연습문제 1
// 어떤 버튼이 눌러 졌는지 alert()을 띄워 주세요
// alert(event.target.textContent);
// 연습문제 2
// 해당하는 버튼의 컨텐츠를 영어로 수정하시오
// let n = 1;
// for (let n = 1; n <= 3; n++) {
// if(event.target.textContent == `버튼 ${n}`){
// event.target.textContent = `button ${n}`;
// }
// }
// 연습문제 3
// 버튼 2라는 글자를 가진 버튼만 글자를 수정하시오.
event.target.textContent = event.target.textContent == '버튼 2' ? '수정됨' : event.target.textContent;
});
</script>
</body>
</html>'JavaScript > JS 작업을 위한 코딩 연습' 카테고리의 다른 글
| JS 이벤트 처리 - 6(배너변경하기) (0) | 2024.08.01 |
|---|---|
| JS 이벤트 처리 - 5(이미지 토글) (0) | 2024.08.01 |
| JS 이벤트 처리 - 4(반복문과동적생성) (0) | 2024.08.01 |
| JS 이벤트 처리 - 3(forms) (0) | 2024.08.01 |
| JS 이벤트 처리 - 1 (기본) (0) | 2024.08.01 |
