Ch.10 이벤트와 완성 — 인터랙티브 홈페이지

이벤트 리스너

addEventListener로 클릭, 입력, 제출 이벤트를 처리할 수 있다이벤트 객체(event)에서 필요한 정보를 추출할 수 있다form의 submit 이벤트에서 preventDefault()를 사용할 수 있다

버튼을 클릭하면 무언가 일어나게 하려면?

지금까지는 페이지가 로드될 때 한 번만 코드가 실행되었습니다. 사용자의 행동(클릭, 입력, 스크롤)에 반응하려면 '이벤트'를 알아야 합니다.

사용자 행동에 코드를 연결하는 방법은?

addEventListener — '이 버튼을 클릭하면 이 함수를 실행해' 라고 브라우저에 알려주는 방법입니다.

article

핵심 내용

요소에 이벤트를 연결하여 사용자 행동에 반응합니다

// 기본 구조: 요소.addEventListener("이벤트", 함수)
const btn = document.querySelector("#myBtn");

btn.addEventListener("click", () => {
  alert("버튼이 클릭되었습니다!");
});

// input 이벤트 — 입력할 때마다 실행
const input = document.querySelector("#search");

input.addEventListener("input", (event) => {
  console.log(event.target.value); // 입력된 값
});

이벤트 객체에는 유용한 정보가 가득합니다

// event 객체 활용
btn.addEventListener("click", (event) => {
  console.log(event.target);      // 클릭된 요소
  console.log(event.type);        // "click"
  console.log(event.clientX);     // 마우스 X좌표
});

// form submit — 페이지 새로고침 방지!
const form = document.querySelector("#myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault(); // 기본 동작(새로고침) 막기

  const name = document.querySelector("#nameInput").value;
  console.log(`입력된 이름: ${name}`);
});

preventDefault() 가 필요한 이유: form의 submit 이벤트는 기본적으로 페이지를 새로고침합니다. JavaScript로 데이터를 처리하려면 이 기본 동작을 막아야 합니다.

클릭할 때마다 카운트가 올라가는 좋아요 버튼을 만들어봅시다

form의 submit 이벤트에서 페이지 새로고침을 막으려면?

요소에 클릭 이벤트를 등록하려면 element.___("click", 함수) 를 사용한다

다음 중 이벤트가 발생한 요소를 참조하는 속성은?

이벤트 마스터!

key

핵심 용어

👆

click

요소를 클릭했을 때

⌨️

input

입력 필드의 값이 변할 때

📤

submit

폼이 제출될 때

🔤

keydown

키보드 키를 눌렀을 때

edit_note

정리 노트

이벤트 리스너 핵심 정리

이벤트 처리

addEventListener()
요소에 이벤트 핸들러를 등록하는 메서드
click / input / submit
자주 사용하는 3대 이벤트 타입
event 객체
이벤트 발생 시 자동으로 전달되는 정보 묶음

주요 메서드·속성

event.target
이벤트가 실제로 발생한 요소를 가리킴
preventDefault()
폼 제출 등 기본 동작을 차단
이벤트 위임
부모 요소에 리스너 하나로 자식 이벤트를 처리
★

이벤트 리스너는 사용자와 페이지를 연결하는 다리입니다.

image

시각 자료

다이어그램: wd-scene-js-events
check_circle

핵심 정리

  • 1addEventListener("이벤트", 함수)로 이벤트 등록
  • 2event.target = 이벤트 발생 요소, event.preventDefault() = 기본 동작 방지
  • 3click, input, submit 세 가지 핵심 이벤트

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작