[JavaScript] 이벤트 리스너 (Event Listener) 사용법과 오류 해결 방법

웹 개발에서 이벤트 리스너(Event Listener)는 사용자와의 상호작용을 처리하는 중요한 개념입니다. 버튼 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 감지하고 처리할 수 있습니다. 하지만 초보자들은 이벤트 리스너를 잘못 사용하거나, 등록 과정에서 발생하는 오류를 자주 경험합니다. 이번 포스팅에서는 JavaScript의 이벤트 리스너 사용법과 발생할 수 있는 오류들을 해결하는 방법을 단계별로 설명하겠습니다.

---

1. 이벤트 리스너란?

1) 이벤트 리스너의 정의

이벤트 리스너는 특정 요소에서 발생하는 이벤트를 감지하고, 그에 대응하는 함수를 실행하는 역할을 합니다. addEventListener() 메서드를 사용하여 이벤트 리스너를 등록합니다.

2) 기본 문법

element.addEventListener('event', function, useCapture);

• event: 감지할 이벤트 유형 (예: 'click', 'mouseover')
• function: 이벤트 발생 시 실행할 함수
• useCapture: 이벤트 캡처링 여부 (기본값: false)

---

2. 이벤트 리스너 사용 예제

1) 버튼 클릭 이벤트

<button id="myButton">클릭하세요</button>

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

button.addEventListener('click', () => {
    alert('버튼이 클릭되었습니다!');
});

2) 마우스 오버 이벤트

const myDiv = document.getElementById('myDiv');

myDiv.addEventListener('mouseover', () => {
    console.log('마우스를 올렸습니다.');
});

3) 키보드 입력 이벤트

document.addEventListener('keydown', (event) => {
    console.log(`눌린 키: ${event.key}`);
});

---

3. 이벤트 리스너 오류와 해결 방법

1) Uncaught TypeError: Cannot read properties of null

이 오류는 DOM 요소를 찾지 못했을 때 발생합니다. 잘못된 getElementById() 사용이 주 원인입니다.

해결 방법

• HTML 요소가 존재하는지 확인합니다.
• JavaScript 코드가 HTML 요소를 로드하기 전에 실행되지 않도록 조치합니다.
• 방법 1: DOMContentLoaded 이벤트 사용하기

document.addEventListener('DOMContentLoaded', () => {
    const button = document.getElementById('myButton');
    button.addEventListener('click', () => {
        alert('버튼 클릭됨');
    });
});

• 방법 2: defer 속성 사용하기 (HTML <script> 태그에 추가)

<script src="script.js" defer></script>

2) 이벤트가 중복으로 등록되는 문제

• 이벤트 리스너가 여러 번 등록될 때 발생합니다. 보통 함수가 중복으로 호출되는 경우 문제를 일으킬 수 있습니다.

해결 방법

• 이벤트 리스너를 제거하는 removeEventListener()를 사용합니다.

function clickHandler() {
    alert('버튼 클릭됨');
}

button.addEventListener('click', clickHandler);
button.removeEventListener('click', clickHandler);  // 리스너 제거

---

4. 추가 팁 및 참고 사항

• 이벤트 리스너를 등록할 때는 항상 HTML 요소가 존재하는지 확인하세요.
• 비동기적으로 요소를 생성하는 경우, 해당 요소가 렌더링된 후에 이벤트 리스너를 등록하세요.
• 이벤트 위임을 사용하여 효율적으로 이벤트를 관리할 수도 있습니다.

---

5. 요약 및 마무리

이번 포스팅에서는 JavaScript의 이벤트 리스너 사용법과 오류 해결 방법을 알아보았습니다. 이벤트 리스너는 사용자와의 상호작용을 처리하는 중요한 기능이며, HTML 요소를 정확히 찾고 올바르게 등록하는 것이 중요합니다. 오류가 발생할 경우 콘솔 메시지를 확인하고 코드 구조를 점검하여 문제를 해결하세요.

---

6. 관련 글 링크

• 관련 글: JavaScript에서 Uncaught TypeError 해결 방법 ('undefined' is not a function)