Blog

자바스크립트 이벤트 리스너 개요

웹 개발에서 사용자와의 상호작용을 관리하는 것은 매우 중요한 요소입니다. 자바스크립트의 이벤트 리스너는 이러한 상호작용을 처리할 수 있는 강력한 도구입니다. 이벤트 리스너는 특정 이벤트가 발생했을 때 이를 감지하고 반응하는 기능을 제공합니다. 사용자가 버튼을 클릭하거나 화면을 스크롤하는 등 다양한 행동에 대해 특정 코드를 실행하게 하는 것을 가능하게 합니다.

이벤트 리스너란?

이벤트 리스너는 웹 페이지의 특정 요소에 부착되어 사용자가 발생시킨 이벤트를 감지하는 함수입니다. 예를 들어, 마우스 클릭, 키 입력, 폼 제출 등 다양한 이벤트를 다룰 수 있습니다. 자바스크립트에서는 addEventListener 메서드를 사용하여 이러한 이벤트 리스너를 추가합니다.

이벤트 리스너 추가하기

이벤트 리스너를 추가하는 과정은 크게 두 가지 단계로 나눌 수 있습니다. 첫 번째로는 감지할 요소를 선택하고, 두 번째로는 해당 요소에 이벤트 핸들러를 등록하는 것입니다.

• 요소 선택하기: document.querySelector 또는 document.getElementById와 같은 메서드를 이용하여 특정 요소를 선택합니다.
• 이벤트 핸들러 등록하기: element.addEventListener(eventType, handlerFunction) 형식으로 이벤트 핸들러를 등록합니다.

예를 들어, 버튼 클릭 이벤트를 처리하는 방법은 다음과 같습니다.

javascript
const button = document.querySelector(‘button’);
button.addEventListener(‘click’, () => {
console.log(‘버튼이 클릭되었습니다.’);
});

이벤트 리스너의 매개변수

이벤트 리스너를 등록할 때 사용하는 매개변수에는 다음과 같은 요소가 있습니다:

• 이벤트 종류: 감지하고자 하는 이벤트의 종류를 나타내는 문자열입니다. 예를 들어, 'click', 'keydown' 등이 있습니다.
• 핸들러 함수: 이벤트가 발생할 때 실행되는 함수입니다.
• 옵션: 선택적 매개변수로, 이벤트의 전파 방식(캡처 또는 버블링)을 설정할 수 있습니다.

이벤트 리스너 제거하기

이벤트 리스너는 더 이상 필요하지 않을 경우 반드시 제거해 주어야 합니다. 메모리 누수를 방지하고 성능을 최적화하기 위해서입니다. 이벤트 리스너를 제거할 때는 removeEventListener 메서드를 사용합니다.

이벤트 리스너를 제거하는 구문은 다음과 같습니다:

javascript
button.removeEventListener(‘click’, handlerFunction);

올바르게 이벤트 리스너를 제거하기 위해서는 등록할 때 사용했던 매개변수와 동일한 매개변수를 사용해야 하며, 만약 세 번째 매개변수로 옵션을 지정했다면 제거할 때도 같은 값을 지정해야 합니다.

고급 사용법 – 이벤트 위임

이벤트 위임(event delegation)이라는 개념은 부모 요소에 이벤트 리스너를 등록하고, 자식 요소에서 발생하는 이벤트를 처리하는 방식입니다. 이 접근법은 동적으로 생성되는 요소에 대한 이벤트 처리를 용이하게 해줍니다.

이벤트 위임을 활용하면 특정 요소가 추가될 때마다 이벤트 리스너를 추가할 필요가 없어지며, 성능 개선에도 효과적입니다. 예를 들어 리스트 항목을 동적으로 추가하는 경우, 리스너를 부모에만 등록하면 각 자식 요소에 대해 별도로 등록하지 않아도 해당 이벤트를 처리할 수 있습니다.

javascript
const list = document.querySelector(‘ul’);
list.addEventListener(‘click’, (event) => {
if (event.target.tagName === ‘LI’) {
console.log(리스트 항목: ${event.target.innerText});
}
});

최적화 기법: 디바운싱과 쓰로틀링

이벤트 리스너를 사용할 때 성능을 최적화하기 위해 디바운싱(debouncing)와 쓰로틀링(throttling) 기법을 적용할 수 있습니다. 스크롤 이벤트나 입력 이벤트와 같이 빈번하게 발생하는 이벤트에 대해 이 기법들을 활용하면 불필요한 호출을 줄일 수 있습니다.

• 디바운싱: 일정 시간 동안 입력이 없을 때만 함수를 실행하는 방식입니다. 예를 들어 검색 입력창에 입력할 때, 사용자가 입력을 멈춘 후 일정 시간 후에만 검색 요청을 보내는 것입니다.
• 스로틀링: 특정 시간 간격으로만 함수를 실행하도록 제어합니다. 예를 들어 스크롤 이벤트에서 매번 리스너가 호출되는 것이 아니라 일정 간격으로만 호출하게 설정할 수 있습니다.

결론

자바스크립트의 이벤트 리스너는 웹 애플리케이션의 상호작용을 풍부하게 만들어주는 필수 요소입니다. 이벤트를 효과적으로 관리하고 최적화하는 방법을 이해한다면, 성능이 우수하면서도 사용자 친화적인 웹 애플리케이션을 구축할 수 있습니다. 이러한 기법들은 현대 웹 개발에서 매우 중요하므로, 반드시 익혀두시길 바랍니다.

자주 묻는 질문과 답변