1. 주제 소개
웹페이지에서 버튼을 누르면 메뉴가 열리고, 입력창에 글을 쓰면 안내 문구가 바뀌는 이유는 무엇일까요? 그 핵심이 바로 이벤트(Event)입니다. 이벤트는 브라우저 안에서 발생한 신호이고, JavaScript는 그 신호를 받아 동작을 실행합니다.
2. 핵심 내용
이벤트는 "일이 발생했다"는 알림
클릭(click), 입력(input), 제출(submit), 스크롤(scroll), 키보드 입력(keydown)처럼 사용자의 행동이나 브라우저 상태 변화가 이벤트가 됩니다.
이벤트 리스너가 신호를 기다린다
addEventListener를 사용하면 특정 요소에서 특정 이벤트가 발생했을 때 실행할 함수를 연결할 수 있습니다. 즉, "무슨 일이 생기면 어떤 코드를 돌릴지"를 등록하는 과정입니다.
핸들러 함수가 실제 동작을 수행한다
이벤트가 발생하면 미리 등록해둔 함수(핸들러)가 실행됩니다. 버튼 색 바꾸기, 모달 열기, 폼 검증처럼 사용자 경험의 대부분은 이벤트 핸들링으로 만들어집니다.
3. 적용 방법
입문 단계에서는 먼저 "요소 선택 → 이벤트 연결 → 핸들러 작성" 3단계를 반복해 보세요. 이 흐름만 익혀도 동적인 웹페이지를 빠르게 구현할 수 있습니다.
| 단계 | 설명 | 예시 |
|---|---|---|
| 1. 요소 선택 | 이벤트를 받을 대상 지정 | 버튼, 입력창, 폼 |
| 2. 이벤트 연결 | 어떤 이벤트를 감지할지 설정 | click, input, submit |
| 3. 함수 실행 | 발생 시 실행할 로직 작성 | 메뉴 열기, 값 검증, 안내문 변경 |
4. 정리
클릭하면 코드가 실행되는 이유는 "클릭 이벤트가 발생했고, 그 이벤트에 연결된 함수가 등록되어 있기 때문"입니다. 이벤트 개념을 이해하면 웹이 정적인 문서에서 상호작용하는 앱으로 바뀌는 원리가 한 번에 보입니다.
5. 자주 묻는 질문
Q1. onclick 속성과 addEventListener는 무엇이 다른가요?
둘 다 이벤트를 처리할 수 있지만, 일반적으로 addEventListener가 더 유연하고 유지보수에 유리해 실무에서 많이 사용됩니다.
Q2. 이벤트가 너무 많이 붙으면 느려지지 않나요?
경우에 따라 성능 영향을 줄 수 있습니다. 많은 요소를 다룰 때는 이벤트 위임 같은 기법을 사용해 효율을 높입니다.
'바이브코딩 개념사전' 카테고리의 다른 글
| if문과 조건문, ‘컴퓨터의 선택’ 이해하기 (0) | 2026.05.09 |
|---|---|
| 배열(Array)과 객체(Object), 실무에서 어떻게 구분해 쓸까? (0) | 2026.05.08 |
| 함수(Function)는 왜 필요할까? 반복을 줄이는 사고법 (0) | 2026.05.06 |
| 변수는 '값을 담는 이름표'다: let/const 쉬운 정리 (0) | 2026.05.05 |
| 클래스(class)와 아이디(id), 언제 뭐를 써야 할까? (0) | 2026.05.04 |