JavaScript에서 이벤트 및 이벤트 처리 – 초보자를 위한 완전 가이드

Source: Dev.to

JavaScript에서 이벤트란?

이벤트는 브라우저에서 발생하는 동작이나 상황으로, JavaScript가 감지할 수 있습니다.
이벤트를 통해 JavaScript는 사용자 상호작용과 브라우저 활동에 반응하여 웹 페이지를 인터랙티브하고 동적으로 만들 수 있습니다.

트리거

• 👤 사용자 행동 (클릭, 입력, 호버링)
• 🌐 브라우저 행동 (페이지 로드, 크기 조정, 스크롤)

일반적인 예시

• 버튼 클릭
• 키보드 키 누르기
• 요소 위에 마우스 올리기
• 웹 페이지 로드

간단히 말하면

이벤트 = 무언가가 발생 → JavaScript가 반응

JavaScript의 이벤트 종류

JavaScript는 목적에 따라 여러 내장 이벤트를 제공합니다.

마우스 이벤트

마우스와의 상호작용으로 발생합니다.

• click – 요소를 클릭했을 때
• dblclick – 더블 클릭했을 때
• mouseover – 마우스가 요소에 들어왔을 때
• mouseout – 마우스가 요소를 떠났을 때

키보드 이벤트

키보드 동작으로 발생합니다.

• keydown – 키를 눌렀을 때
• keyup – 키를 뗐을 때

폼 이벤트

폼과 관련된 동작으로 발생합니다.

• submit – 폼이 제출될 때
• change – 입력값이 바뀔 때
• focus – 입력이 포커스를 얻을 때
• blur – 입력이 포커스를 잃을 때

브라우저 / 윈도우 이벤트

브라우저 수준의 활동으로 발생합니다.

• load – 페이지 로드가 완료될 때
• resize – 창 크기가 바뀔 때
• scroll – 페이지가 스크롤될 때

이벤트 핸들링이란?

이벤트 핸들링은 이벤트가 발생했을 때 실행되는 JavaScript 코드를 작성하는 과정입니다. 이는 애플리케이션이 사용자 행동에 어떻게 반응할지를 정의합니다.

흐름

Event → Handler → Action

JavaScript에서 이벤트를 처리하는 방법

주요 방법은 세 가지가 있습니다.

1. 인라인 이벤트 핸들링 (비추천)

Click

왜 권장되지 않는가

• HTML과 JavaScript가 뒤섞인다
• 대규모 프로젝트에서 유지보수가 어렵다
• 확장성이 떨어진다
• 관심사의 분리가 부족하다

2. DOM 속성 방식

const button = document.querySelector("button");
button.onclick = function () {
  console.log("Button clicked");
};

단점

• 하나의 핸들러만 존재할 수 있으며, 새 할당이 기존 것을 덮어쓴다.

3. addEventListener (추천)

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button clicked");
});

왜 addEventListener가 최선인가

• 같은 이벤트에 대해 여러 핸들러를 등록할 수 있다
• 코드가 깔끔하고 확장성이 좋다
• 최신 JavaScript 표준이다
• React와 같은 프레임워크와도 잘 어울린다

모범 사례

실제 애플리케이션에서는 항상 addEventListener를 사용해 이벤트를 처리하세요.