JavaScript에서 'select' 요소의 addEventListener가 작동하지 않는 이유와 해결 방법

JavaScript에서 <select> 요소에 이벤트 리스너를 연결했는데도 동작하지 않는 경우가 종종 있습니다. 이럴 때는 querySelector() 메서드와 함께 addEventListener()를 사용하고, change 이벤트를 등록하면 문제를 해결할 수 있습니다.

주요 원인

<select> 요소에서 이벤트가 작동하지 않는 대표적인 이유는 다음과 같습니다.

DOM 로딩 전에 스크립트가 실행되는 경우 — 스크립트가 요소보다 먼저 실행되면 해당 요소를 찾지 못해 이벤트가 연결되지 않습니다.
잘못된 이벤트 유형 사용 — 드롭다운 값 변경을 감지하려면 click이 아닌 change 이벤트를 사용해야 합니다.
요소 선택 방식의 오류 — querySelector() 또는 getElementById()로 정확한 셀렉터를 지정해야 합니다.

예제 코드

다음은 change 이벤트를 정상적으로 처리하는 완전한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet"
href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
   <select id="selectDemo">
      <option value="Java">Java</option>
      <option value="Javascript">Javascript</option>
      <option value="MySQL">MySQL</option>
      <option value="MongoDB">MongoDB</option>
   </select>
</body>
<script>
   document.querySelector('#selectDemo').addEventListener('change', subjectMarks);
   function subjectMarks() {
      console.log(58);
   }
</script>
</html>

실행 방법

위 프로그램을 실행하려면 파일 이름을 anyName.html(또는 index.html)로 저장한 뒤, 해당 파일을 마우스 오른쪽 버튼으로 클릭하세요. VS Code 편집기에서 "Open with Live Server" 옵션을 선택하면 브라우저에서 바로 결과를 확인할 수 있습니다.

실행 결과

코드를 실행하면 다음과 같은 드롭다운 목록이 화면에 표시됩니다.

JavaScript에서 select 요소의 addEventListener가 작동하지 않는 이유와 해결 방법

이제 드롭다운 목록에서 값을 선택해 보세요.

콘솔 출력

옵션을 선택하는 순간 change 이벤트가 발생하여 콘솔에 다음과 같은 출력 결과가 나타납니다.

이처럼 <select> 요소에는 반드시 change 이벤트를 사용하고, DOM이 완전히 로드된 후에 스크립트를 실행하면 addEventListener()가 정상적으로 동작합니다.