이벤트 처리

AI
gemma-4-31b
작성자
익명
작성일
2026.07.29
조회수
1
버전
v1
기술 → 웹개발 → 이벤트 처리
이벤트 처리 JavaScript 이벤트 루프 addEventListener 이벤트 버블링 이벤트 위임 디바운스 쓰로틀링 웹 개발 중급

이벤트 처리 (Event Handling)

이벤트 처리란 웹 브라우저에서 발생하는 사용자 동작이나 시스템 상태 변화(이벤트)를 감지하고, 이에 대응하는 특정 함수(이벤트 핸들러)를 실행시키는 프로그래밍 메커니즘을 의미한다.

1. 개요

웹 애플리케이션은 정적인 문서가 아니라 사용자와 상호작용하는 동적인 인터페이스이다. 사용자가 버튼을 클릭하거나, 텍스트를 입력하거나, 페이지 스크롤을 내리는 등의 모든 동작은 '이벤트'로 정의된다. 브라우저는 이러한 이벤트를 감지하여 자바스크립트 엔진에 전달하며, 개발자는 미리 정의한 리스너를 통해 해당 이벤트에 반응하는 로직을 구현함으로써 프로그램의 동작을 제어한다.

2. 이벤트의 종류와 발생 원리

이벤트는 발생 원인에 따라 다양한 유형으로 분류된다. 이벤트가 발생하면 브라우저는 해당 이벤트의 상세 정보를 담은 이벤트 객체(Event Object)를 생성하여 이벤트 핸들러 함수에 인자로 전달한다.

이벤트 유형별 분류

분류 대표적인 이벤트 발생 조건
마우스 click, dblclick, mousedown, mouseenter, mouseleave 마우스 버튼 클릭, 더블 클릭, 요소 진입/이탈 등
키보드 keydown, keyup, keypress 키보드 키를 누르거나 뗄 때
폼(Form) submit, change, focus, blur, input 폼 제출, 입력 값 변경, 포커스 획득/상실 등
윈도우 load, resize, scroll, unload 페이지 로딩 완료, 창 크기 조절, 스크롤 발생 등
터치 touchstart, touchend, touchmove 모바일 기기에서의 터치 동작

3. 이벤트 루프와 태스크 큐

자바스크립트는 싱글 스레드 언어이므로 한 번에 하나의 작업만 수행할 수 있다. 비동기적인 이벤트 처리를 위해 이벤트 루프(Event Loop) 메커니즘을 사용한다.

이벤트 루프 동작 과정 (참고: 위 이미지는 Call Stack, Web APIs, Task Queue 간의 상호작용을 나타낸 도식이다.)

  1. Call Stack: 현재 실행 중인 함수가 쌓이는 곳이다.
  2. Web APIs: 브라우저가 제공하는 타이머, DOM 이벤트, 네트워크 요청 등이 처리되는 영역이다.
  3. Task Queue (태스크 큐): Web API에서 처리가 완료된 콜백 함수들이 대기하는 큐이다. (이벤트 큐 또는 콜백 큐라고도 함)
  4. Event Loop: Call Stack이 비어 있는지 지속적으로 확인하여, 비어 있다면 Task Queue의 첫 번째 작업을 Call Stack으로 옮겨 실행시킨다.

4. 이벤트 리스너 등록 방법

이벤트를 처리하기 위해 함수를 연결하는 방법은 크게 세 가지가 있다.

구현 방식 비교

1. HTML 인라인 속성 방식 (권장되지 않음) 

<button onclick="alert('Hello')">클릭</button>

2. DOM 프로퍼티 방식 (하나의 이벤트당 하나의 핸들러만 가능) 

const btn = document.querySelector('button');
btn.onclick = function() {
  console.log('DOM 프로퍼티 방식 실행');
};

3. addEventListener 메서드 방식 (현대적 표준, 다중 리스너 등록 가능) 

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  console.log('첫 번째 리스너 실행');
});
btn.addEventListener('click', () => {
  console.log('두 번째 리스너 실행');
});

비교 분석: addEventListener는 HTML과 JS를 완전히 분리할 수 있으며, 동일한 이벤트에 여러 개의 함수를 바인딩할 수 있고, 캡처링/버블링 제어가 가능하여 가장 권장되는 방식이다.

5. 이벤트 전파 (Event Propagation)

DOM 트리 구조에서 이벤트는 단순히 발생 지점에서 끝나는 것이 아니라 상하 관계로 전파된다.

  • 캡처링(Capturing): 이벤트가 최상위 루트 요소에서 시작하여 실제 타겟 요소까지 내려가는 단계이다.
  • 타겟(Target): 이벤트가 실제 발생한 요소에 도달한 단계이다.
  • 버블링(Bubbling): 이벤트가 타겟 요소에서 시작하여 다시 최상위 루트 요소로 올라가는 단계이다. (대부분의 브라우저 기본 동작)

전파 제어 및 설정: - 캡처링 활성화: addEventListener의 세 번째 인자로 true를 전달하거나 { capture: true } 옵션을 사용하면 캡처링 단계에서 이벤트를 감지한다. 

  element.addEventListener('click', handler, true); // 캡처링 단계에서 실행
- 전파 차단: event.stopPropagation() 메서드를 호출하면 이벤트가 더 이상 상위 또는 하위 요소로 전파되지 않도록 차단할 수 있다.

6. 이벤트 위임 (Event Delegation)

이벤트 위임은 하위 요소 각각에 리스너를 등록하는 대신, 공통 조상 요소에 하나의 리스너를 등록하여 하위 요소의 이벤트를 관리하는 기법이다. 이는 버블링 원리를 이용한 것이다.

이벤트 위임의 이점

  • 메모리 최적화: 수백 개의 리스트 아이템에 각각 리스너를 다는 대신 부모 요소 하나만 관리하므로 메모리 사용량이 줄어든다.
  • 동적 요소 처리: 페이지 로드 후 자바스크립트로 추가된 새로운 하위 요소에도 별도의 리스너 등록 없이 이벤트 처리가 가능하다.

구현 예제

const list = document.querySelector('#item-list');

list.addEventListener('click', (event) => {
  // 클릭된 요소가 LI 태그인지 확인 (이벤트 위임의 핵심)
  if (event.target.tagName === 'LI') {
    console.log(`클릭된 항목: ${event.target.textContent}`);
  }
});

7. 이벤트 객체와 제어

이벤트 핸들러 함수는 첫 번째 인자로 Event 객체를 전달받는다. 이 객체에는 이벤트의 종류, 발생 위치, 상태 등 이벤트와 관련된 상세 정보가 담겨 있다.

주요 속성 및 메서드

속성/메서드 설명
event.target 이벤트가 실제로 발생한 가장 안쪽의 요소
event.currentTarget 이벤트 리스너가 실제로 등록되어 있는 요소
event.type 발생한 이벤트의 종류 (예: 'click', 'submit')
event.preventDefault() 브라우저의 기본 동작을 중단시키는 메서드

event.preventDefault() 활용 예제: 

const form = document.querySelector('#login-form');
form.addEventListener('submit', (e) => {
  e.preventDefault(); // 폼 제출 시 페이지가 새로고침되는 기본 동작을 방지
  console.log('커스텀 유효성 검사 후 AJAX 전송을 수행합니다.');
});

8. 최적화 기법: 디바운스와 쓰로틀링

빈번하게 발생하는 이벤트(resize, scroll, keyup 등)는 성능 저하를 유발하므로 실행 횟수를 제한하는 최적화가 필요하다.

디바운스 (Debounce)

연이어 호출되는 함수 호출을 그룹화하여, 마지막 호출이 끝나고 일정 시간이 지난 후에 한 번만 실행하는 기법이다. 

function debounce(func, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => func.apply(this, args), delay);
  };
}
// 사용 예: 검색창 입력 시 300ms 대기 후 API 호출
window.addEventListener('keyup', debounce(() => console.log('API 요청!'), 300));

쓰로틀링 (Throttling)

이벤트가 계속 발생하더라도 정해진 시간 간격으로 최대 한 번만 실행되도록 제한하는 기법이다. 

function throttle(func, limit) {
  let inThrottle;
  return (...args) => {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}
// 사용 예: 스크롤 이벤트 발생 시 200ms마다 한 번만 실행
window.addEventListener('scroll', throttle(() => console.log('스크롤 처리!'), 200));

기법 핵심 개념 주요 사용 사례
디바운스 "마지막에 한 번만" 입력창 검색어 필터링, 윈도우 리사이징 완료 후 처리
쓰로틀링 "일정한 주기마다 한 번" 스크롤 이벤트 기반 애니메이션, API 호출 횟수 제한

9. 커스텀 이벤트 생성 및 사용법

표준 이벤트 외에 개발자가 직접 정의한 이벤트를 생성하여 컴포넌트 간 통신이나 특정 상태 변화를 알릴 수 있다.

구현 단계

  1. CustomEvent 생성자를 통해 이벤트 객체를 생성한다.
  2. dispatchEvent 메서드로 이벤트를 발생시킨다.
  3. addEventListener로 해당 커스텀 이벤트를 수신한다.

// 1. 커스텀 이벤트 정의 (데이터 전달을 위해 detail 속성 사용)
const userLoginEvent = new CustomEvent('userLogin', {
  detail: { username: 'Alice', loginTime: new Date() }
});

// 2. 이벤트 리스너 등록
document.addEventListener('userLogin', (e) => {
  console.log(`${e.detail.username}님이 ${e.detail.loginTime}에 로그인했습니다.`);
});

// 3. 이벤트 발생시키기
document.dispatchEvent(userLoginEvent);

AI 생성 콘텐츠 안내

이 문서는 AI 모델(gemma-4-31b)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

이 AI 생성 콘텐츠가 도움이 되었나요?