addEventListner() 메서드의 활용 - 아이템 추가, 토글 기능 만들기
<!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>EventListner를 사용한 요소 추가, 삭제, 수정, 토글 만들기</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>
#reset.css
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
이벤트 위임(Event Delegation)
이벤트 리스너를 하위 요소에서 개별적으로 달지 않고, 상위 요소에서 하나의 리스너로 모든 하위 요소의 이벤트를 관리하는 패턴이다. 이 패턴은 주로 동적으로 요소가 변경될 때 유용하다.
원리
브라우저에서 이벤트는 대상 요소에서 발생하며, 이후 상위 요소로 버블링(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>
// 버튼에 각각 이벤트 리스너를 등록하자
document.getElementById("myList").addEventListener('click',function(event) {
console.log(event.target);
// 해당하는 target에 textContent를 가지고 오고 싶다면
console.log(event.target.textContent);
// 연습문제
// 어떤 버튼이 눌러졌는지 alert()창을 띄워보자.
alert(event.target.textContent);
// 연습문제 2
// 해당하는 버튼의 컨텐츠를 영어로 수정해보자.
event.target.textContent = "button";
// 연습문제 3
// 버튼 2 라는 글자를 가진 버튼만 글자를 수정하자.
event.target.textContent = event.target.textContent == '버튼 2' ? '수정됨' : event.target.textContent;
});
</script>
</body>
</html>'JS' 카테고리의 다른 글
| JS 이벤트 처리 - 반복문과동적생성 (0) | 2024.08.01 |
|---|---|
| JS 이벤트 처리 - forms (0) | 2024.08.01 |
| JS 이벤트 처리 - 기본 (2) | 2024.07.24 |
| 웹 페이지 렌더링 과정 (0) | 2024.07.23 |
| Browser Object Model (0) | 2024.07.23 |