LEVEL 10 QUEST

이벤트 처리 - 클릭, 입력, 스크롤

이벤트 처리 - 클릭, 입력, 스크롤 — DevFoil 바이브코딩 Stage 3, Lv.10

이벤트란?

사용자의 행동에 반응하기

이벤트는 웹페이지에서 일어나는 모든 일을 말합니다 — 클릭, 키보드 입력, 스크롤, 마우스 이동, 폼 제출 등.

JavaScript의 이벤트 처리는 "무슨 일이 일어나면 → 이 코드를 실행해라" 라는 구조입니다. 이것이 웹페이지를 인터랙티브하게 만드는 핵심입니다.

addEventListener 기초

이벤트를 등록하는 표준 방법

addEventListener는 특정 요소에 이벤트 리스너(감지기)를 붙이는 메서드입니다. 같은 요소에 여러 이벤트를 동시에 붙일 수 있습니다.

// 기본 문법
// 요소.addEventListener("이벤트이름", 실행할함수);

const button = document.querySelector("#myBtn");

// 방법 1: 화살표 함수 (가장 많이 사용)
button.addEventListener("click", () => {
    alert("버튼이 클릭됐습니다!");
});

// 방법 2: 별도 함수 정의 후 연결
const handleClick = () => {
    console.log("클릭!");
};
button.addEventListener("click", handleClick);

// 이벤트 리스너 제거 (별도 함수일 때만 가능)
button.removeEventListener("click", handleClick);

// 나쁜 예 — 이렇게 하지 마세요!
// button.onclick = () => { ... }; // 하나만 등록 가능, 덮어씀

💡 onclick vs addEventListener

onclick 속성은 하나의 함수만 등록할 수 있어서 나중에 붙인 게 이전 것을 덮어씁니다. addEventListener는 여러 함수를 동시에 등록할 수 있어서 항상 이것을 사용합니다.

🔒

여기까지는 미리보기입니다

이벤트 처리 - 클릭, 입력, 스크롤
무료 가입하면 이어서 볼 수 있고, 강의를 완료할 때마다 XP와 레벨이 쌓입니다.

Google로 3초 만에 시작 →🧵 Threads로 시작 무료 공개 강의 둘러보기 (Lv.1~3)