JavaScript 입문 도구

JavaScript 이벤트 핸들링

JavaScript 이벤트 핸들링 — 초급

이벤트 핸들링

1. 도입 (왜 배워야 하는가)

이벤트 핸들링은 웹 개발에서 필수적인 개념입니다. 사용자가 웹 페이지와 상호작용할 때 발생하는 다양한 이벤트(클릭, 입력, 마우스 오버 등)를 처리하는 방법을 배우는 것은 사용자 경험을 개선하고, 더 나아가 웹 애플리케이션의 기능을 확장하는 데 매우 중요합니다. 이벤트 핸들링을 모르면 사용자와의 상호작용을 제대로 처리할 수 없고, 이는 결국 제품의 품질 저하로 이어질 수 있습니다. 예를 들어, 버튼을 클릭했을 때 아무런 반응이 없다면 사용자는 혼란스러워하고 사이트를 떠날 가능성이 높습니다.

2. 핵심 개념 설명

이벤트 핸들링의 핵심 개념은 '이벤트'와 '이벤트 리스너'입니다.

이벤트: 사용자의 행동으로 인해 발생하는 동작입니다. 예를 들어, 버튼 클릭, 키 입력, 마우스 이동 등이 있습니다.
이벤트 리스너: 특정 이벤트가 발생했을 때 실행될 함수를 지정하는 것입니다. 이는 마치 누군가가 문 앞에서 기다리고 있다가 문이 열리면 들어오는 것과 같습니다.

용어	정의
이벤트	사용자의 동작으로 발생하는 행동
이벤트 리스너	특정 이벤트 발생 시 호출되는 함수

3. 기본 코드 예제

아래는 버튼 클릭 이벤트를 처리하는 기본적인 코드 예제입니다.

// HTML에서 버튼 요소를 선택
const button = document.getElementById('myButton');

// 클릭 이벤트 리스너 추가
button.addEventListener('click', function() {
    alert('버튼이 클릭되었습니다!');
});

const button = document.getElementById('myButton');

- HTML에서 ID가 'myButton'인 버튼 요소를 선택합니다.

button.addEventListener('click', function() { ... });

- 버튼에 클릭 이벤트 리스너를 추가합니다. 사용자가 버튼을 클릭하면 지정된 함수가 실행됩니다.

alert('버튼이 클릭되었습니다!');

- 버튼이 클릭될 때 사용자에게 알림 창을 띄웁니다.

실행 결과: 버튼을 클릭하면 "버튼이 클릭되었습니다!"라는 알림이 표시됩니다.

4. 실전 활용 예제

폼 제출 처리: 사용자가 폼을 제출할 때 입력된 데이터를 검증하고 처리할 수 있습니다.

   const form = document.getElementById('myForm');
   form.addEventListener('submit', function(event) {
       event.preventDefault(); // 기본 제출 동작 방지
       const formData = new FormData(form);
       console.log('제출된 데이터:', formData);
   });

- 상황 설명: 쇼핑몰에서 사용자 정보 입력 후 제출할 때, 데이터 유효성을 검사하고 서버에 전송하기 전에 확인을 위한 로그를 남길 수 있습니다.

마우스 오버 효과: 이미지나 버튼 위에 마우스를 올렸을 때 효과를 줄 수 있습니다.

   const image = document.getElementById('myImage');
   image.addEventListener('mouseover', function() {
       image.style.transform = 'scale(1.1)'; // 이미지 확대
   });
   image.addEventListener('mouseout', function() {
       image.style.transform = 'scale(1)'; // 원래 크기로 복귀
   });

- 상황 설명: 쇼핑몰에서 제품 이미지에 마우스를 올리면 확대되어 상세하게 보여줄 수 있습니다.

5. 흔한 실수와 주의사항

이벤트 리스너 중복 등록:

- 잘못된 코드:

   button.addEventListener('click', myFunction);
   button.addEventListener('click', myFunction); // 중복 등록

- 올바른 코드:

   button.addEventListener('click', myFunction); // 한 번만 등록

기본 동작 방지 누락: