이벤트 리스너(Event Listener)

이벤트 리스너(Event Listener) 상세 설명

이벤트 리스너는 웹 페이지에서 발생하는 다양한 이벤트에 반응하기 위한 핵심 메커니즘입니다. 아주 자세히 설명드리겠습니다.

1. 기본 개념

이벤트 리스너는:

• 특정 DOM 요소에서 발생하는 이벤트를 감지하고 처리하는 함수
• "이벤트 핸들러"라고도 부름
• 사용자 행동(클릭, 키입력 등)이나 시스템 이벤트(로딩 완료 등)에 반응

2. 주요 특징

이벤트 리스너의 3요소

1. 대상 요소: 버튼, 입력창 등 DOM 요소
2. 이벤트 유형: 'click', 'keydown' 등
3. 실행 함수: 이벤트 발생 시 실행할 JavaScript 함수

기본 작동 방식

요소.addEventListener(이벤트타입, 실행함수);

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

1. HTML 속성으로 직접 등록 (비권장)

<button onclick="handleClick()">클릭</button>

2. DOM 프로퍼티에 할당

const btn = document.querySelector('button');
btn.onclick = function() { console.log('클릭됨!'); };

3. addEventListener() 사용 (권장 방식)

const btn = document.querySelector('button');

function handleClick() {
  console.log('버튼 클릭됨!');
}

btn.addEventListener('click', handleClick);

4. addEventListener의 장점

1. 다중 핸들러 추가 가능
2. btn.addEventListener('click', func1); btn.addEventListener('click', func2); // 두 함수 모두 실행
3. 세부 제어 옵션
4. btn.addEventListener('click', handler, { capture: true, // 이벤트 캡처링 단계에서 실행 once: true // 한 번만 실행 후 자동 제거 });
5. 이벤트 객체 접근 용이
6. btn.addEventListener('click', function(event) { console.log(event.target); // 이벤트 발생 요소 });

5. 주요 이벤트 유형

이벤트 타입	설명	발생 시점
click	마우스 클릭	요소를 클릭할 때
mouseover	마우스 오버	요소 위로 포인터 이동시
keydown	키보드 누름	키가 눌러질 때
submit	폼 제출	폼이 제출될 때
load	로드 완료	리소스 로딩 완료시
scroll	스크롤	페이지/요소 스크롤시
resize	크기 변경	창 크기 변경시

6. 이벤트 객체 활용

이벤트 핸들러는 자동으로 이벤트 객체를 매개변수로 받음:

element.addEventListener('click', function(event) {
  console.log('이벤트 타입:', event.type); // "click"
  console.log('대상 요소:', event.target); // 클릭된 요소
  console.log('좌표:', event.clientX, event.clientY); // 마우스 위치
});

7. 이벤트 리스너 제거

removeEventListener()로 제거 가능:

function handleClick() {
  console.log('한 번만 실행');
  btn.removeEventListener('click', handleClick);
}

btn.addEventListener('click', handleClick);

8. 실전 예제

<button id="counterBtn">클릭 횟수: 0</button>

<script>
  const btn = document.getElementById('counterBtn');
  let count = 0;

  btn.addEventListener('click', function() {
    count++;
    this.textContent = `클릭 횟수: ${count}`;

    if(count >= 5) {
      this.style.backgroundColor = 'red';
      this.removeEventListener('click', arguments.callee);
    }
  });
</script>

9. 고급 기능

이벤트 위임(Event Delegation)

// 부모 요소에 리스너를 등록해 자식 요소 이벤트 처리
document.getElementById('list').addEventListener('click', function(e) {
  if(e.target.tagName === 'LI') {
    console.log('리스트 항목 클릭:', e.target.textContent);
  }
});

커스텀 이벤트

// 이벤트 생성
const event = new CustomEvent('myEvent', {
  detail: { message: '사용자 정의 이벤트' }
});

// 리스너 등록
element.addEventListener('myEvent', (e) => {
  console.log(e.detail.message);
});

// 이벤트 발생
element.dispatchEvent(event);

이벤트 리스너는 현대 웹 개발의 상호작용성을 구현하는 가장 기본적이면서도 강력한 도구입니다. 이러한 메커니즘을 이해하면 동적인 웹 애플리케이션을 효과적으로 구축할 수 있습니다.