JavaScript 이벤트 처리 완전 정리와 실전 UI 패턴
과거 jQuery가 이벤트 처리를 쉽게 만들어주었다면, 현재는 JavaScript 자체가 충분히 간결하고 직관적으로 발전했다. 특히 addEventListener는 모든 브라우저에서 안정적으로 동작하며, 어떤 UI 컴포넌트든 이 기능만으로 구현할 수 있다.
1. 이벤트 기본 구조: addEventListener
이벤트 처리는 한 가지 패턴으로 정리할 수 있다. 요소를 선택하고, 해당 요소가 특정 동작을 수행할 때 실행할 함수를 등록하는 방식이다.
const btn = document.querySelector('.btn');
btn.addEventListener('click', () => {
console.log('clicked');
});
2. 여러 요소에 이벤트 연결: 반복 활용
리스트나 버튼 그룹처럼 여러 요소가 동일한 이벤트를 가져야 하는 상황은 매우 흔하다. 이때 querySelectorAll과 forEach 조합이 가장 깔끔하다.
document.querySelectorAll('.item').forEach(item => {
item.addEventListener('click', () => {
item.classList.toggle('active');
});
});
3. 이벤트 객체 활용
이벤트 함수는 기본적으로 event 객체를 전달받는다. 이를 활용하면 클릭한 요소나 입력 값을 쉽게 가져올 수 있다.
document.addEventListener('click', e => {
console.log(e.target); // 클릭된 요소
});
4. 이벤트 위임: 동적으로 생성된 요소 처리
동적으로 생성되는 요소는 초기에 이벤트가 없기 때문에 부모 요소에 이벤트를 위임하는 방식이 효과적이다. 대량의 요소를 다룰 때도 성능이 좋아진다.
document.querySelector('.list').addEventListener('click', e => {
if (e.target.matches('.item')) {
e.target.classList.toggle('on');
}
});
- 동적 댓글 리스트
- 동적 버튼/카드 UI
5. 토글 버튼 구현
UI에서 상태 전환을 가장 빠르게 구현하는 방법은 classList.toggle을 사용하는 것이다.
btn.addEventListener('click', () => {
btn.classList.toggle('active');
});
6. 입력 이벤트 처리(input, change)
폼 요소는 입력을 감지하여 상태를 업데이트해야 한다. input은 실시간 감지, change는 변경 완료 후 동작한다.
input.addEventListener('input', e => {
console.log(e.target.value);
});
7. 스크롤 이벤트 처리
스크롤 위치에 따라 UI를 변화시키는 패턴은 매우 널리 사용된다. 다만 이벤트가 자주 발생하므로 최소한의 연산만 수행하는 것이 좋다.
window.addEventListener('scroll', () => {
if (window.scrollY > 100) header.classList.add('scrolled');
});
8. 키보드 이벤트
키 입력을 감지하여 단축키나 검색 기능에 사용할 수 있다.
document.addEventListener('keydown', e => {
if (e.key === 'Escape') modal.classList.remove('open');
});
9. Outside 클릭 감지
모달, 드롭다운 등에서 중요한 패턴이다. 클릭한 위치가 컴포넌트 영역 밖인지 확인해 제어한다.
document.addEventListener('click', e => {
if (!menu.contains(e.target)) {
menu.classList.remove('open');
}
});
10. 상태값을 이용한 조건 기반 이벤트 처리
dataset이나 변수로 상태를 저장하고 조건에 따라 이벤트 동작을 변경할 수 있다.
btn.addEventListener('click', () => {
const next = btn.dataset.state === '1' ? '0' : '1';
btn.dataset.state = next;
btn.classList.toggle('active');
});
이벤트 패턴을 익히면 UI 개발이 쉬워지는 이유
이벤트는 UI 구조의 중심이며, 어떤 인터랙션이든 addEventListener 패턴만 이해하면 구현할 수 있다. 토글, 드롭다운, 모달, 정렬, 폼 검증 등 대부분의 기능이 이벤트 조합으로 이루어진다. 이러한 패턴을 체계적으로 정리해두면 유지보수와 확장성이 크게 향상된다.
다음 5편에서는 fetch를 이용한 서버 통신 방식과 CRUD 패턴을 정리한다. 이는 프론트와 백엔드를 함께 다루는 개발자에게 필수적인 내용이다.
