자바스크립트: onchange 이벤트, 값이 변경될 때 발생

coding-abc 2025. 8. 20. 11:37

onchange 이벤트는 사용자가 <input>, <select>, <textarea> 등의 값(value)을 변경했을 때 발생하는 이벤트입니다.
즉, 값이 바뀌고 요소가 포커스를 잃었을 때 실행됩니다. (즉시 실행되는 oninput과는 다릅니다.)

✅ 특징

주로 입력값 확인, 폼 자동 처리, 선택값에 따른 UI 변경 등에 사용됩니다.
예: 드롭다운에서 옵션을 바꾸면 해당 옵션에 따라 다른 내용을 표시하기.

📌 예제: 드롭다운 선택 시 메시지 출력

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>onchange 예제</title>
</head>
<body>
  <h2>과일을 선택하세요:</h2>

  <select id="fruit" onchange="showMessage()">
    <option value="">-- 선택 --</option>
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
    <option value="grape">포도</option>
  </select>

  <p id="result"></p>

  <script>
    function showMessage() {
      const fruit = document.getElementById("fruit").value;
      const result = document.getElementById("result");

      if (fruit) {
        result.textContent = "당신이 선택한 과일은 " + fruit + "입니다.";
      } else {
        result.textContent = "";
      }
    }
  </script>
</body>
</html>

👉 드롭다운에서 과일을 선택하면 onchange 이벤트가 실행되어 문구가 바뀝니다.

원하시면 제가 onchange와 oninput의 차이를 간단히 비교하는 예제도 만들어 드릴까요?

저작자표시 (새창열림)