웹 개발을 하다 보면 사용자와 상호작용하는 이벤트(Event) 처리가 필수적입니다.
특히 자바스크립트에서는 버튼 클릭, 키 입력, 마우스 이동, 값 변경 등
다양한 이벤트를 활용해 동적인 사용자 경험(UX) 을 구현할 수 있습니다.
이번 글에서는 실무에서 가장 자주 사용하는 자바스크립트 이벤트 들을 정리해보겠습니다.
1. 자바스크립트 이벤트(Event)란?
이벤트(Event) 는 사용자가 웹페이지에서 수행하는 행동(Interaction) 을 의미합니다.
예를 들어 버튼 클릭, 입력창의 값 변경, 키보드 입력, 마우스 움직임 등이 모두 이벤트입니다.
자바스크립트에서는 이벤트를 감지해 특정 동작을 수행하도록 할 수 있습니다.
이때 사용되는 대표적인 메서드는 addEventListener() 입니다.
📘 기본 구조
요소.addEventListener('이벤트명', 실행할함수);
📘 예시
document.querySelector('button').addEventListener('click', () => {
alert('버튼이 클릭되었습니다!');
});2. 입력 필드 이벤트 input / change
input 이벤트는 사용자가 입력창에 타이핑할 때마다 실시간으로 발생합니다.
change 이벤트는 입력이 완료되고 포커스가 다른 곳으로 이동할 때 발생합니다.
📘 예시
const inputEl = document.querySelector('#username');
inputEl.addEventListener('input', (e) => {
console.log('입력 중:', e.target.value);
});
inputEl.addEventListener('change', (e) => {
console.log('입력 완료:', e.target.value);
});💡 실시간 검증(예: 아이디 중복 확인)에는 input,
폼 제출 전 최종 검증에는 change 이벤트를 사용하는 것이 일반적입니다.
3. 키보드 관련 이벤트 keydown / keyup
키보드 이벤트는 사용자가 키를 누르거나 뗄 때 발생합니다.
- keydown : 키를 누를 때 발생
- keyup : 키를 뗄 때 발생
📘 예시
document.addEventListener('keydown', (e) => {
console.log('누른 키:', e.key);
});
document.addEventListener('keyup', (e) => {
console.log('뗀 키:', e.key);
});💡 Enter 키로 폼을 전송하거나, ESC 키로 창을 닫는 기능 등
실무 인터페이스 제어에서 자주 사용됩니다.
4. 마우스 이벤트 click / mouseover / mouseout
마우스 이벤트는 클릭, 이동, 진입, 이탈 등 다양한 사용자 동작을 감지합니다.
📘 대표 이벤트
| 이벤트명 | 설명 |
| click | 클릭할 때 발생 |
| dblclick | 더블 클릭 |
| mouseover | 마우스가 요소 위로 올라올 때 |
| mouseout | 마우스가 요소 밖으로 나갈 때 |
📘 예시
const box = document.querySelector('.box');
box.addEventListener('mouseover', () => {
box.style.backgroundColor = 'lightblue';
});
box.addEventListener('mouseout', () => {
box.style.backgroundColor = '';
});💡 hover 스타일 외에도, 마우스 이벤트는 툴팁 표시나 드래그 UI 구성에 활용됩니다.
5. 실무에서 자주 쓰이는 이벤트 핸들링 패턴
실무에서는 여러 이벤트를 함께 사용하는 경우가 많습니다.
다음은 대표적인 패턴들입니다.
📘 (1) 실시간 검색창
const search = document.querySelector('#search');
search.addEventListener('input', (e) => {
console.log('검색어:', e.target.value);
});📘 (2) 폼 입력 유효성 검사
document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
alert('폼이 제출되었습니다.');
});📘 (3) 키보드 단축키 처리
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault();
alert('저장 단축키 실행');
}
});✅ 마무리
자바스크립트 이벤트는 웹의 동적 동작을 담당하는 핵심 요소입니다.
- 입력 감지: input, change
- 키보드 조작: keydown, keyup
- 마우스 동작: click, mouseover, mouseout
이벤트를 효율적으로 관리하면 UX 품질을 높이고,
불필요한 DOM 조작을 줄여 성능까지 개선할 수 있습니다.