addEventListener 기능

 

 

 

addEventListener는 JavaScript에서 이벤트를 요소에 등록할 때 사용하는 메서드입니다. 사용자가 클릭, 키보드 입력, 마우스 이동 등 특정 이벤트를 발생시킬 때 지정된 함수를 실행합니다.

---

기본 문법

element.addEventListener(event, listener, options);

 

매개변수 설명

• element: 이벤트를 등록할 DOM 요소
• event: "click", "mouseover", "keydown" 등 이벤트 이름 (문자열)
• listener: 이벤트 발생 시 실행할 콜백 함수
• options (선택): boolean 또는 객체로, 이벤트 처리 방식 지정 (capture, once, passive 등)

---

 

간단한 예시

const button = document.querySelector('#myButton');

button.addEventListener('click', () => {
  alert('버튼이 클릭되었습니다!');
});

 

설명

• #myButton 요소에 "click" 이벤트를 등록
• 버튼 클릭 시 alert 실행

---

옵션 사용 예시

const link = document.querySelector('a');

// once: true → 이벤트가 한 번만 실행되고 자동 제거
link.addEventListener('click', (e) => {
  e.preventDefault();
  console.log('링크 클릭!');
}, { once: true });

 

주요 옵션

• capture: true면 캡처링 단계에서 실행 (기본값 false)
• once: true면 이벤트 핸들러가 한 번 실행 후 제거
• passive: true면 preventDefault() 사용 불가 (스크롤 성능 최적화)

---

React에서 addEventListener 사용 시 주의점

React에서는 보통 JSX 속성을 사용합니다.

<button onClick={() => console.log('Clicked!')}>Click me</button>

 

하지만 전역 이벤트(예: window, document)는 useEffect에서 등록하는 것이 일반적입니다.

import { useEffect } from 'react';

function ResizeListener() {
  useEffect(() => {
    const handleResize = () => console.log('창 크기 변경!');

    window.addEventListener('resize', handleResize);

    return () => window.removeEventListener('resize', handleResize); // 정리
  }, []);

  return <p>창 크기를 조정해보세요!</p>;
}

 

Tip: useEffect에서 이벤트 등록 후 **정리(clean-up)**를 반드시 해주세요.

 

 

 

 

 

 

#프로그래밍공부 #javascript #react #addEventListener