16 DOM 객체와 이벤트 처리
# DOM 객체와 이벤트 처리
## 미션
DOM과 이벤트 핸들링을 통해, 동적 웹페이지를 작성하시오.
<img src="http://drive.google.com/uc?export=view&id=1ko_Rp5e9xg-1w3tilFO76G4i80Uf-Zqe" alt="홍팍-자바스크립트-dom과-이벤트-처리">
## 개념
### 들어가며
우리는 앞서 HTML/CSS/JS를 통해 동적 웹페이지가 만들어짐을 개념적으로 배웠다. 그럼 실제로 어떻게 만들어지는지, 이를 학습해보자
### DOM이란
브라우저는 텍스트로 된 웹문서를 화면으로 보여준다. 이를 렌더링이라 하는데, 브라우저는 렌더링을 위해 HTML/CSS의 문서 내용을 JS 객체로 만들어 관리한다. 이러한 개념을 DOM(문서 객체 모델; document object model)이라 한다. HTML문서의 여러 태그들이 객체로 관리되는거다.
<img src="http://drive.google.com/uc?export=view&id=1kos1v3MH8HOVHwhgy9bXJDLYrqXrR6R5" alt="홍팍-자바스크립트-dom과-이벤트-처리-dom이란">
### document 객체
웹브라우저는 document 객체를 제공한다. 여기에 HTML/CSS/JS 정보가 다 있다. 우리는 이를 조작함으로써 동적 웹페이지를 만들 수 있다.
<img src="http://drive.google.com/uc?export=view&id=1kryQUHy_M1TnWpZz7BUfYm2AsBE5XzDN" alt="홍팍-자바스크립트-dom과-이벤트-처리-document-객체">
### 이벤트 발생과 처리
동적 웹페이지는 DOM에서 발생된 이벤트를 처리함으로써 수행된다. 이벤트란 클릭, 값변경, 폼전송 등의 브라우저에서 일어나는 사건이다. 이러한 이벤트가 감시자(EventListener)에 의해 확인되면, 감시자는 이를 처리자(EventHandler)에게 전달한다. 그럼 처리지가 메뉴얼대로 처리를 수행하는거다.
<img src="http://drive.google.com/uc?export=view&id=1kszccwrYr_solKZnju8VBZvxRK2Ckl3f" alt="홍팍-자바스크립트-dom과-이벤트-처리">
## 실습
### 03:18 기본 파일 생성
events.html
```
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>제목 없음</title>
<!-- custom -->
<link rel="stylesheet" href="events.css">
<Script defer src="events.js"></Script>
<!-- bootstrap 5.2 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="container">
<h1 id="heading">DOM 객체와 이벤트 처리</h1>
<article id="practice-1">
<h2>주문할게요</h2>
<p>대학 CC커플 나컴공과 나컴순. 수업을 마치고, 중국집으로 밥을 먹으러 갔다. 주문을 위해 버튼을 누르는데..</p>
<div class="targets">
<button type="button" id="order-bell" class="btn btn-primary">주문벨을 눌러주세요</button>
</div>
</article>
<article id="practice-2">
<h2>뭐 먹을까?</h2>
<p>"뭐 먹을까?" 컴공이가 물었다. 돌아온 대답. "오빠가 먹고 싶은거" 갑자기 그는 생각이 많아졌다. 그녀의 진심은..?</p>
<div class="targets">
<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="answers" value="a" id="answer-a">
<label class="form-check-label">A. 중국집에서 먹기 싫어</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="answers" value="b" id="answer-b">
<label class="form-check-label">B. 센스 있게 내가 먹고 싶은 걸로 골라봐</label>
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" name="answers" value="c" id="answer-c">
<label class="form-check-label">C. 오빠가 좋아하는건 나도 좋아</label>
</li>
</ul>
</div>
</article>
<article id="practice-3">
<h2>장바구니 담기</h2>
<p>다행히, 그녀의 컨디션이 좋아보인다. 그렇게 컴공이는 맘편히 주문을 하는데..</p>
<p class="targets">
<button type="button" class="btn btn-sm btn-outline-dark">짜장</button>
<button type="button" class="btn btn-sm btn-outline-dark">짬뽕</button>
<button type="button" class="btn btn-sm btn-outline-dark">볶음밥</button>
<button type="button" class="btn btn-sm btn-outline-dark">탕수육</button>
</p>
<div class="bg-light" id="order-list">
>> []이 주문되었습니다.
</div>
</article>
</body>
</html>
```
events.css
```
/*
* CSS 관련 구글링
* 👉 site:developer.mozilla.org {연관_키워드}
*/
body {
padding-top: 1rem;
}
article {
padding-top: 1rem;
padding-bottom: 1rem;
}
```
events.js
```
// JavaScript 관련 구글링
// 👉 site:developer.mozilla.org {연관_키워드}
'use strict';
```
### 04:11 document 객체 둘러보기
```
// 1. DOM 이란
// - 브라우저가 웹페이지를 JS 객체화 하는 방식
// - 이를 위해 제공되는 대표 객체가 document
// - document: 웹페이지 문서 정보를 모두 지니는 객체
// docuemnt 객체 둘러보기
console.log(document);
console.log(document.title);
console.log(document.URL);
// 웹페이지 제목 변경
document.title = "동적 웹페이지 만들기";
```
### 06:43 DOM 객체 가져오기
```
// 2. DOM 객체 가져오기
// - 크게 두 가지 방식이 있으나, 쿼리셀렉터를 권장
// - document.getElement~~~();
// - document.querySelector();
// h1 태그 제목을 변경
// const h1 = document.getElementById("heading");
const h1 = document.querySelector("#heading");
h1.innerText = "DOM Object & Event Handling";
```
### 09:46 버튼 클릭 이벤트 처리
```
// 3. 이벤트 처리
// - 이벤트란 선택, 클릭, 전송등의 특정 사건임
// - 이벤트의 처리는 크게 3단계로 동작함
// - targeting) 감시할 대상을 지정한 뒤,
// - listening) 특정 이벤트를 지속적으로 감시,
// - handling) 이벤트 발생하면 동작을 수행!
// [연습1] 주문할게요(버튼 클릭 => 메시지 띄우기)
// 1) 대상 DOM 객체 가져오기
const orderBtn = document.querySelector("#order-bell");
// 2) 감시를 시작
orderBtn.addEventListener("click", function(event) {
// 3) 처리를 수행
alert("띵동~");
});
```
### 14:23 체크박스 변화 이벤트 처리
```
// [연습2] 뭐 먹을까?(정답 체크 시 => CSS 적용)
// 1) 대상 DOM 객체 가져오기
const correctInput = document.querySelector("#answer-c");
// 2) 감시를 시작
correctInput.addEventListener("change", function(event) {
// 3) 처리를 수행
// 이벤트 발생 객체를 가져옴
const checkbox = event.target;
const listItem = checkbox.parentNode;
// 체크여부에 따라 동작을 수행
if (checkbox.checked) {
// 클래스 부여 => CSS 스타일링 적용
listItem.classList.add("text-primary");
} else {
// 클래스 제거 => CSS 스타일링 제거
listItem.classList.remove("text-primary");
}
});
```
### 22:55 여러 버튼 클릭 이벤트 처리
```
// [연습3] 장바구니 담기(버튼이 눌리면 => 장바구니에 담기)
// 0) 필요 데이터 생성
const menuCart = [];
const resultDiv = document.querySelector("#order-list");
// 1) 대상 DOM 객체 가져오기
const menuButtons = document.querySelectorAll("#practice-3 button");
// [짜장버튼,짬뽕버튼,볶음밥버튼,탕수육버튼]
// 모든 메뉴버튼을 순회
for (let i = 0; i < menuButtons.length; i += 1) {
// 2) 감시를 시작
menuButtons[i].addEventListener("click", function(event) {
// 3) 처리를 수행
// 클릭된 버튼을 가져옴
const btn = event.target;
// 버튼속 텍스트를 추출
const menuName = btn.innerText;
// 장바구니 배열에 담기
menuCart.push(menuName);
// 장바구니 배열을 문서에 반영
resultDiv.innerText = `>> [${menuCart}]이 주문되었습니다.`;
});
}
```
## 구글링 훈련 🔥
- 자바스크립트 DOM이란
- 자바스크립트 document 객체
- 자바스크립트 document.querySelector()
- 자바스크립트 document.querySelectorAll()
- 자바스크립트 이벤트 발생과 처리
- 자바스크립트 addEventListener()
- 자바스크립트 이벤트 종류
- 자바스크립트 event.target
- 자바스크립트 classList.add
- 자바스크립트 classList.remove