자바스크립트 이벤트리스너 사용하는 법

자바스크립트에서는 사용자와의 상호작용을 원활하게 처리하기 위해 이벤트 리스너(Event Listener)를 사용합니다. 이 글에서는 이벤트 리스너의 개념, 이를 활용하는 방법, 그리고 여러 가지 예제들을 통해 자바스크립트에서 이벤트 리스너를 효과적으로 사용하는 방법을 알아보겠습니다.

이벤트 리스너란?

이벤트 리스너란 사용자의 다양한 행동, 예를 들어 클릭, 키 입력, 마우스 이동 등을 감지하고 이에 따라 특정 작업을 수행하도록 하는 기능입니다. 웹 페이지에서 버튼을 클릭할 때 특정 메시지를 표시하거나, 텍스트의 스타일을 변경하는 등의 행동을 처리할 수 있습니다.

addEventListener() 메서드 활용하기

자바스크립트에서 이벤트를 감지하는 가장 효과적인 방법은 addEventListener() 메서드를 활용하는 것입니다. 이 메서드는 특정 HTML 요소에 이벤트 리스너를 등록하여, 해당 이벤트가 발생할 때 호출될 함수를 지정할 수 있습니다.

기본 문법

이 메서드의 기본 형식은 다음과 같습니다:


element.addEventListener("event", function);


• element: 이벤트를 감지할 HTML 요소
• event: 감지할 이벤트의 종류 (예: click, mouseover, keydown 등)
• function: 이벤트 발생 시 실행할 함수

예제: 클릭 이벤트 감지하기

아래 예제를 통해 클릭 이벤트를 감지하는 방법을 살펴보겠습니다.


const title = document.querySelector("div.hello h1");
function handleTitleClick() {
console.log("제목이 클릭되었습니다.");
}
title.addEventListener("click", handleTitleClick);


위 코드에서 사용자가 <h1> 요소를 클릭하면, 브라우저의 콘솔에 “제목이 클릭되었습니다.”라는 메시지가 출력됩니다.

스타일 변경하기

이벤트 리스너를 사용하여 클릭 시 특정 요소의 스타일을 변경하는 것도 가능합니다. 다음은 클릭 이벤트 발생 시 텍스트 색상을 파란색으로 변경하는 예제입니다:


const title = document.querySelector("div.hello h1");
function handleTitleClick() {
title.style.color = "blue";
}
title.addEventListener("click", handleTitleClick);


이 코드에서는 사용자가 <h1> 요소를 클릭하면 텍스트 색상이 파란색으로 변경됩니다.

여러 개의 이벤트 리스너 등록하기

하나의 요소에 대해 여러 개의 이벤트 리스너를 등록할 수 있습니다. 이를 통해 다양한 사용자 행동에 대응하는 여러 기능을 구현할 수 있습니다. 예를 들어, 마우스가 제목 위에 있을 때와 벗어날 때 각각 다른 메시지를 출력할 수 있습니다.


function handleMouseEnter() {
console.log("마우스가 제목 위에 있습니다.");
}
function handleMouseLeave() {
console.log("마우스가 제목을 떠났습니다.");
}
title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);


이벤트 리스너 삭제하기

등록된 이벤트 리스너는 필요에 따라 삭제할 수도 있습니다. 이때는 removeEventListener() 메서드를 사용합니다. 아래의 예시는 마우스 이벤트 리스너를 삭제하는 방법을 보여줍니다:


function handleClick() {
console.log("버튼이 클릭되었습니다.");
title.removeEventListener("mouseenter", handleMouseEnter);
title.removeEventListener("mouseleave", handleMouseLeave);
}
title.addEventListener("click", handleClick);


중요한 기억: 이벤트 해제

이벤트 리스너는 반드시 해제해야 하며, 그렇지 않으면 메모리 누수가 발생할 수 있습니다. 예를 들어, 요소가 DOM에서 사라질 때 이벤트 리스너를 해제하지 않으면 불필요한 이벤트 호출이 계속 발생하게 됩니다.

리액트에서의 이벤트 리스너

리액트에서는 함수형 컴포넌트와 클래스형 컴포넌트 모두에서 이벤트 리스너를 다루는 방법이 있습니다. 클래스형 컴포넌트에서는 componentDidMount와 componentWillUnmount 라이프사이클 메서드를 사용하여 이벤트 리스너를 등록하고 해제합니다. 함수형 컴포넌트에서는 useEffect 훅을 이용하여 동일한 기능을 구현할 수 있습니다. 이는 관리해야 할 범위가 줄어들어 효율적입니다.


React.useEffect(() => {
title.addEventListener("click", handleTitleClick);
return () => {
title.removeEventListener("click", handleTitleClick);
};
}, [title]);


마무리하며

이번 글에서는 자바스크립트에서 이벤트 리스너의 중요성과 이벤트 처리 방식에 대해 자세히 알아보았습니다. addEventListener() 메서드를 통해 웹 페이지의 요소에 다양한 이벤트를 감지하고 처리할 수 있으며, 이를 통해 더욱 인터랙티브한 사용자 경험을 제공할 수 있습니다. 이러한 원리를 잘 이해하고 활용하면, 더욱 풍부한 웹 개발이 가능할 것입니다.

자주 묻는 질문과 답변