Event, Web Storage & JSON

🔔 Event란?

• Event = 특정 사건
• 웹 페이지에서 사용자와 상호작용 시 발생 (예: 클릭, 키 입력, 로딩 등)

---

🎮 대표적인 이벤트 종류

카테고리	이벤트
Keyboard	keydown, keyup, keypress
Mouse	click, mousemove, mousedown, mouseup, mouseenter, mouseleave
Form	input, change, blur, focus, submit
Loading	load, unload

---

📦 Event 객체

• 이벤트 발생 시 브라우저가 자동 생성하는 정보 객체
• 이벤트 발생 요소, 위치, 키, 마우스 상태 등 포함

element.addEventListener("click", function(event) {
    console.log(event.target); // 클릭된 요소
});

---

🛠️ 이벤트 등록 방식 비교

1️⃣ 고전 방식 (비표준)

• 인라인 방식

<button onclick="alert('clicked!')">Click</button>

• 스크립트에서 직접 할당

button.onclick = function() {
    alert("clicked");
};

2️⃣ 표준 방식: addEventListener()

button.addEventListener("click", function(e) {
    alert("clicked!");
});

---

🔐 preventDefault()

• 요소의 기본 동작(예: form submit, 링크 이동 등)을 막음

form.addEventListener("submit", function(e) {
    e.preventDefault(); // 제출 막기
});

---

🧠 EventTarget 구조 (사진 기반 설명)

[EventTarget Interface]
    └─ DOM 요소, document, window 등
        └─ addEventListener(type, callback[, options])
            └─ callback(event)

• 이벤트를 수신하고 처리할 수 있는 모든 객체가 EventTarget

• type: 이벤트 종류 (예: "click")

• callback: 이벤트 발생 시 실행할 함수

---

📘 실습 예제 정리

✅ 버튼 클릭 시 1씩 증가

let count = 0;
const btn = document.querySelector("button");
const display = document.querySelector("#display");

btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
});

✅ input 입력 → p 태그에 실시간 반영

const input = document.querySelector("input");
const p = document.querySelector("p");

input.addEventListener("input", () => {
    p.textContent = input.value;
});

✅ input 입력 + 버튼 클릭 시 h1 출력, 색상 변경

const input = document.querySelector("input");
const h1 = document.querySelector("h1");
const button = document.querySelector("button");

input.addEventListener("input", () => {
    h1.textContent = input.value;
});

button.addEventListener("click", () => {
    h1.style.color = "blue";
});

✅ 복사 이벤트 감지 (copy)

const h1 = document.querySelector("h1");

h1.addEventListener("copy", () => {
    alert("복사 금지!");
});

---

💾 Web Storage (sessionStorage, localStorage)

📦 Storage란?

• 브라우저에 Key-Value 쌍으로 데이터 저장하는 기술

• 서버와 상관없이 클라이언트 측에 저장

🧩 종류 비교

구분	sessionStorage	localStorage
유지 기간	탭 닫힐 때까지	무기한 (명시적 삭제 필요)
저장 용량	약 5MB	약 5MB
공유 범위	동일 출처 + 현재 탭	동일 출처 전체

🧰 메서드

메서드	설명
setItem(key, value)	값 저장
getItem(key)	값 불러오기
removeItem(key)	특정 값 삭제
clear()	전체 삭제
key(index)	특정 index의 key 반환
length	저장된 항목 개수 반환

예제

// 저장
localStorage.setItem("name", "JS");

// 불러오기
const name = localStorage.getItem("name");

// 삭제
localStorage.removeItem("name");

// 전체 삭제
localStorage.clear();

---

🧾 JSON (JavaScript Object Notation)

✔ 개념

• { "key": "value" } 형태의 문자열 기반 데이터 포맷

• JavaScript 객체와 유사하지만 문자열(String)

🔄 JSON <-> JavaScript 변환

// JS 객체 → JSON 문자열
const obj = { name: "JS", age: 20 };
const json = JSON.stringify(obj);

// JSON 문자열 → JS 객체
const newObj = JSON.parse(json);

✅ 최종 요약

• 이벤트는 사용자 상호작용을 감지하고 처리하기 위한 핵심 요소
• 표준 이벤트 처리 방식은 addEventListener() 사용
• preventDefault()로 기본 동작 차단 가능
• Web Storage는 클라이언트 측 key-value 저장 방식 (session vs local)
• JSON은 문자열 기반의 데이터 포맷이며, JS 객체로 변환 가능