Blog

자바스크립트 이벤트 리스너란?

웹 개발에서 이벤트는 사용자가 페이지와 상호작용하는 동안 발생하는 다양한 상황을 의미합니다. 이러한 사건들은 클릭, 키보드 입력, 마우스 움직임 등 다양하게 존재하며, 이러한 이벤트가 발생할 때마다 특정 작업을 실행하고자 한다면 이벤트 리스너를 활용할 수 있습니다.

addEventListener() 메서드

자바스크립트의 addEventListener 메서드는 특정 HTML 요소에 이벤트 리스너를 추가하는 데 사용됩니다. 이 메서드는 다양한 이벤트를 감지하여, 사용자가 정의한 함수를 호출할 수 있도록 지원합니다. 기본적인 문법은 다음과 같습니다:

element.addEventListener(event, handler, options);

• element: 이벤트 리스너를 추가할 대상 HTML 요소입니다.
• event: 감지하고자 하는 이벤트의 이름입니다. 예를 들어, “click”, “mouseover”, “keydown” 등이 가능합니다.
• handler: 이벤트 발생 시 실행될 함수입니다. 보통은 익명 함수 형태로 작성합니다.
• options: 선택적인 매개변수로, 이벤트 전파 방식(캡처링 또는 버블링)을 설정할 수 있는 불리언 값입니다.

주요 이벤트 종류

이벤트 리스너는 다양한 유형의 이벤트를 지원하는데, 몇 가지 주요 이벤트를 살펴보겠습니다:

• 클릭 이벤트 (Click Event): 사용자가 요소를 클릭했을 때 발생
• 마우스 이벤트 (Mouse Events):
  • mousedown: 마우스 버튼을 누를 때
  • mouseup: 마우스 버튼을 뗄 때
  • mousemove: 마우스가 움직일 때
• 키보드 이벤트 (Keyboard Events):
  • keydown: 키를 누를 때
  • keyup: 키를 뗄 때
• 폼 이벤트 (Form Events):
  • submit: 양식을 제출할 때
  • change: 입력값이 변경될 때

이벤트 리스너 추가하기

이제 addEventListener()를 사용하여 실제 이벤트 리스너를 추가하는 방법을 살펴보겠습니다. 예를 들어, 버튼 클릭 시 메시지를 표시하는 코드를 작성해 보겠습니다:

// 버튼 요소 선택
const button = document.getElementById("myButton");
// 메시지를 보여줄 요소 선택
const messageElement = document.getElementById("message");
// 클릭 이벤트 리스너 추가
button.addEventListener("click", function() {
  messageElement.textContent = "버튼이 클릭되었습니다!";
});

위의 코드는 사용자가 버튼을 클릭할 때마다 메시지를 갱신하게 됩니다. 이렇게 간단하게 addEventListener를 활용하여 원하는 이벤트에 반응하도록 설정할 수 있습니다.

이벤트 객체의 활용

이벤트 리스너 안에서 이벤트 객체를 사용하여 발생한 이벤트와 관련된 정보를 얻을 수 있습니다. 예를 들어, 클릭한 마우스의 좌표를 출력하는 코드를 작성해보겠습니다:

button.addEventListener("click", function(event) {
  console.log("X 좌표: " + event.clientX + ", Y 좌표: " + event.clientY);
});

위 코드에서 event는 자동으로 생성되는 이벤트 객체를 나타내며, 사용자 인터랙션에 대한 다양한 정보를 제공합니다.

이벤트 리스너 제거하기

필요에 따라 등록된 이벤트 리스너를 제거할 수도 있습니다. 이를 위해 removeEventListener() 메서드를 사용합니다. 예를 들어, 특정 버튼 클릭 시 이벤트 리스너를 제거하는 방법은 다음과 같습니다:

function handleClick() {
  console.log("클릭 이벤트 발생");
}
// 이벤트 리스너 등록
button.addEventListener("click", handleClick);
// 이벤트 리스너 제거
button.removeEventListener("click", handleClick);

이렇게 하면 버튼을 클릭했을 때 더 이상 로그가 출력되지 않게 됩니다.

preventDefault() 메서드

특정 HTML 요소의 기본 동작을 방지하고 싶다면 event.preventDefault() 메서드를 사용할 수 있습니다. 예를 들어, 링크 클릭 시 페이지 이동을 막고자 할 때 유용합니다:

const link = document.querySelector("a");
link.addEventListener("click", function(event) {
  event.preventDefault();
  console.log("링크 클릭됨, 하지만 이동하지 않음.");
});

위 예제는 사용자가 링크를 클릭하더라도 페이지가 이동하지 않도록 설정합니다.

정리

자바스크립트의 addEventListener() 메서드는 다양한 이벤트를 처리하는 데 필수적인 도구입니다. 이를 통해 웹 페이지의 동작을 제어하고 사용자와의 상호작용을 향상시킬 수 있습니다. 다양한 이벤트를 활용하여 여러분의 웹 애플리케이션을 더욱 인터랙티브하게 만들어 보세요.

자주 찾는 질문 Q&A