이벤트(Event)

• 이벤트는 웹 페이지에서 발생하는 사용자 동작이나 브라우저의 상태 변화를 의미
• 페이지가 로드되거나 크기가 변경되는 등의 브라우저 자체 이벤트도 포함

마우스 이벤트

• 사용자가 마우스를 클릭하거나 움직일 때 발생

  이벤트명	설명
  click	요소를 클릭할 때 발생
  dblclick	요소를 더블 클릭할 때 발생
  mousedown	마우스 버튼을 누를 때 발생
  mouseup	마우스 버튼을 뗄 때 발생
  mousemove	마우스를 움직일 때 발생
  mouseover	마우스가 요소 위에 올라올 때 발생
  mouseout	마우스가 요소에서 벗어날 때 발생

키보드 이벤트

• 사용자가 특정 키를 눌렀을 때 감지 가능

  이벤트명	설명
  keydown	키를 누를 때 발생 (누르고 있는 동안 반복 발생)
  keyup	키를 뗄 때 발생

폼 이벤트

• 입력 폼과 관련된 이벤트로, 사용자가 폼 요소를 조작할 때 발생

  이벤트명	설명
  submit	폼이 제출될 때 발생
  change	입력 필드의 값이 변경될 때 발생
  input	사용자가 입력할 때 발생
  focus	입력 요소에 포커스가 갔을 때 발생
  blur	입력 요소에서 포커스가 벗어났을 때 발생

윈도우 이벤트

• 페이지 로드나 크기 조절과 관련

  이벤트명	설명
  load	문서가 로드될 때 발생
  resize	창 크기가 변경될 때 발생
  scroll	사용자가 스크롤할 때 발생
  unload	페이지를 떠날 때 발생

이벤트 리스너(Event Listener)

• 특정 이벤트가 발생했을 때 실행할 함수를 지정하는 방식 ⇒ 사용자의 동작을 감지하고 그에 따라 원하는 동작을 실행하도록 설정 가능
  

이벤트 리스너 등록 방법

addEventListener 메서드 사용 (권장)

element.addEventListener('eventType', eventHandler);

• 하나의 요소에 여러 개의 이벤트 리스너를 추가할 수 있음
• 이벤트 제거가 가능함
• 버블링 및 캡처링 옵션을 설정할 수 있음

HTML 요소의 onEvent 속성 사용

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

• 단점: 하나의 이벤트 핸들러만 설정 가능, 유지보수가 어려움

element.event = function 방식 사용

document.getElementById('btn').onclick = function() {
  console.log('버튼이 클릭됨');
};

• 단점: 기존 핸들러를 덮어씀

이벤트 리스너 제거

• removeEventListener 메서드를 사용
• 이벤트 리스너를 제거하려면 반드시 같은 함수 참조를 전달해야 함
• 익명 함수 사용 시 제거할 수 없음

element.removeEventListener('eventType', eventHandler);

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

const btn = document.getElementById('btn');
btn.addEventListener('click', handleClick);
btn.removeEventListener('click', handleClick);

이벤트 객체 (Event Object)

• 이벤트 핸들러의 첫 번째 매개변수로 이벤트 객체가 전달
• 이벤트에 대한 정보를 확인 가능

document.addEventListener('click', function(event) {
  console.log('클릭한 위치:', event.clientX, event.clientY);
});

이벤트 전파 (Event Propagation)

• 이벤트가 발생할 때 부모 요소로 전달되는 과정
• 캡처링(Capturing)과 버블링(Bubbling) 단계가 있음

이벤트 버블링(Bubbling, 기본값)

• 이벤트가 가장 깊은 요소에서 시작하여 부모 요소로 전파됨
  

이벤트 캡처링(Capturing)

• addEventListener의 세 번째 인자로 true를 설정하면 상위 요소에서 하위 요소로 전파됨

  document.getElementById('child').addEventListener('click', function(event) {
    event.stopPropagation(); // 부모 요소로 이벤트 전파 방지
  });

  

이벤트 위임 (Event Delegation)

• 이벤트를 부모 요소에서 감지하여 자식 요소의 이벤트를 처리하는 방식
• 많은 요소에 이벤트를 적용할 때 성능 최적화에 유리

document.getElementById('parent').addEventListener('click', function(event) {
  if (event.target.matches('.child')) {
    console.log('자식 요소 클릭됨');
  }
});

기본 동작 방지 (Prevent Default)

• 일부 이벤트는 기본 동작을 수행하는데 preventDefault()를 사용하여 이를 막을 수 있음

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault(); // 링크 이동 방지
  console.log('링크 클릭 막음');
});

이벤트 핸들러 성능 최적화

• 불필요한 이벤트 리스너 등록을 피하고, 이벤트 위임을 활용
• 이벤트 핸들러 내부에서 DOM 조작 최소화
• passive: true 옵션을 사용하여 스크롤 성능 향상

  window.addEventListener('scroll', handleScroll, { passive: true });

---

사진출처

• https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/