728x90
안녕하세요.
오늘은 이벤트 위임을 활용한 동적 리스트 관리를 단계적으로 구현해 보겠습니다.
1. 이벤트 위임과 동적 리스트 관리란?
이벤트 위임이란?
이벤트 위임은 부모 요소가 자식 요소의 이벤트를 대신 처리하는 방법입니다. 이 방식은 DOM 요소가 동적으로 추가되거나 삭제되는 경우에 특히 유용합니다. 예를 들어, 리스트에 새로운 아이템을 추가하거나 삭제할 때 이벤트 위임을 활용하면 코드가 훨씬 간결해지고 효율적이 됩니다.
왜 필요한가?
- 효율성: 동적으로 생성된 요소에도 추가 작업 없이 이벤트를 적용할 수 있습니다.
- 유지보수성: 이벤트 리스너를 여러 요소에 개별적으로 추가하지 않아도 됩니다.
2. 준비물: HTML 구조
먼저 기본적인 HTML 구조를 작성해 봅시다. 이 구조는 동적 리스트를 만들고 관리하기 위한 뼈대 역할을 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동적 리스트 관리</title>
</head>
<body>
<!-- 버튼과 리스트 -->
<button id="addItem">아이템 추가</button>
<ul id="list">
<!-- 리스트 항목은 JavaScript로 동적으로 추가됩니다 -->
</ul>
<!-- JavaScript 파일 연결 -->
<script src="script.js"></script>
</body>
</html>
구조 설명:
- button: 클릭하면 새로운 리스트 아이템을 추가할 버튼입니다.
- ul: 리스트 컨테이너로, 새로운 항목이 추가되는 위치입니다.
- script.js: JavaScript 코드를 작성할 파일입니다.
HTML 파일을 저장했다면, 이제 script.js 파일을 만들어 JavaScript 코드를 작성해 보겠습니다.
3. JavaScript 구현
1) 요소 선택하기
먼저 HTML 요소를 JavaScript에서 선택합니다. 이 부분은 DOM 요소를 조작하기 위한 기본 단계입니다.
// 주요 DOM 요소 선택
const list = document.getElementById("list"); // 리스트 컨테이너
const addButton = document.getElementById("addItem"); // 아이템 추가 버튼
- document.getElementById: 특정 ID를 가진 요소를 선택합니다.
- 변수 이름을 직관적으로 지어야 나중에 코드를 읽기 쉬워집니다.
2) 아이템 추가 기능
버튼을 클릭하면 새로운 리스트 아이템이 추가되도록 코드를 작성합니다.
// 아이템 추가 버튼 클릭 이벤트
addButton.addEventListener("click", () => {
const newItem = document.createElement("li"); // 새로운 리스트 아이템 생성
newItem.textContent = `아이템 ${list.children.length + 1}`; // 텍스트 추가
newItem.classList.add("item"); // 클래스 추가 (스타일 적용 가능)
list.appendChild(newItem); // 리스트에 추가
});
작동 원리:
- createElement: 새로운 <li> 요소를 만듭니다.
- textContent: 리스트 아이템에 텍스트를 추가합니다.
- appendChild: 생성한 요소를 리스트에 추가합니다.
3) 아이템 삭제 기능 (이벤트 위임)
리스트를 클릭하면 해당 아이템이 삭제되도록 이벤트 위임을 활용합니다.
// 리스트 컨테이너에 클릭 이벤트 위임
list.addEventListener("click", (e) => {
if (e.target.tagName === "LI") { // 클릭된 요소가 <li>인지 확인
e.target.remove(); // 클릭된 아이템 삭제
console.log("아이템이 삭제되었습니다.");
}
});
작동 원리:
- e.target: 이벤트가 발생한 실제 요소를 가져옵니다.
- tagName: 클릭된 요소의 태그 이름을 확인합니다.
- remove: 선택된 요소를 삭제합니다.
4. 완성된 코드
최종적으로 작성된 코드를 한 번에 정리하면 다음과 같습니다:
// DOM 요소 선택
const list = document.getElementById("list");
const addButton = document.getElementById("addItem");
// 아이템 추가 기능
addButton.addEventListener("click", () => {
const newItem = document.createElement("li");
newItem.textContent = `아이템 ${list.children.length + 1}`;
newItem.classList.add("item");
list.appendChild(newItem);
});
// 아이템 삭제 기능 (이벤트 위임)
list.addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
e.target.remove();
console.log("아이템이 삭제되었습니다.");
}
});
'JavaScript' 카테고리의 다른 글
| [JavaScript] OpenStreetMap 지도 위에 반경 표현하기 (2) | 2024.11.19 |
|---|---|
| [JavaScript] 동영상 재생하기 (2) | 2024.11.16 |
| [JavaScript] OpenStreetMap 지도 위에 경로가 그려지는 애니메이션 출력 (0) | 2024.11.13 |
| [JavaScript] 웹에서 동작하는 계산기 앱 만들기 (0) | 2024.11.10 |
| [JavaScript] OpenStreetMap 지도 출력하여 특정 경로에 선 그리기 (2) | 2024.11.07 |