JavaScript에서 이벤트 다루기: addEventListener 메서드

by

웹 개발에서 사용자와의 상호작용은 핵심 요소 중 하나입니다. 사용자의 행동에 반응하고 동적으로 웹 페이지를 변경하려면 JavaScript에서 이벤트를 다루는 방법을 알아야 합니다. 이 블로그 포스팅에서는 JavaScript의 addEventListener 메서드를 사용하여 이벤트를 등록하고 처리하는 방법을 자세히 알아보겠습니다.


1. addEventListener 메서드란?

addEventListener는 DOM 요소에 이벤트 리스너(또는 이벤트 핸들러)를 추가하는 메서드입니다. 이 메서드를 사용하면 웹 페이지의 다양한 이벤트에 대한 반응을 정의하고 사용자 상호작용을 처리할 수 있습니다.


2. 기본 문법

addEventListener 메서드의 기본 문법은 다음과 같습니다:

element.addEventListener(eventType, callbackFunction);
  • element: 이벤트를 추가할 DOM 요소를 가리킵니다.
  • eventType: 등록하려는 이벤트의 종류를 지정합니다. 예를 들어, 클릭 이벤트는 “click”, 키보드 입력 이벤트는 “keydown”과 같이 지정합니다.
  • callbackFunction: 이벤트가 발생했을 때 실행할 함수(이벤트 핸들러)를 지정합니다.


3. 예제: 클릭 이벤트 처리하기

아래 예제에서는 버튼이 클릭되었을 때 콘솔에 메시지를 출력하는 이벤트 핸들러를 등록합니다:

// HTML에서 버튼 요소 가져오기
var button = document.getElementById("myButton");

// 버튼에 클릭 이벤트 핸들러 등록
button.addEventListener("click", function() {
  console.log("버튼이 클릭되었습니다.");
});

이제 버튼이 클릭될 때마다 “버튼이 클릭되었습니다.”라는 메시지가 콘솔에 출력됩니다.


4. 이벤트 핸들러 제거하기

removeEventListener를 사용하여 등록한 이벤트 핸들러를 제거할 수 있습니다. 이를 통해 이벤트 리스너를 동적으로 추가하고 제거할 수 있습니다.


5. 다양한 이벤트 다루기

addEventListener를 사용하면 다양한 이벤트 유형에 대한 핸들러를 등록할 수 있습니다. 클릭, 마우스 오버, 키보드 입력 등 다양한 이벤트를 다룰 수 있습니다.

// 마우스 오버 이벤트 처리
var image = document.getElementById("myImage");
image.addEventListener("mouseover", function() {
  // 마우스가 요소 위로 이동했을 때 실행되는 코드
});


addEventListener를 활용하여 사용자와의 상호작용을 다루고 웹 페이지를 동적으로 제어할 수 있습니다. 이를 통해 사용자 경험을 향상시키는 멋진 웹 애플리케이션을 개발할 수 있습니다.



Leave a Comment