반응형
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의 차이를 간단히 비교하는 예제도 만들어 드릴까요?
반응형
'자바스크립트_Javascript' 카테고리의 다른 글
| 자바스크립트: setTimeout() 함수, 지정된 시간 후 실행 (0) | 2025.08.21 |
|---|---|
| 자바스크립트: onload 이벤트, 웹페이지나 특정 요소가 로드된 후 발생 (0) | 2025.08.20 |
| 자바스크립트: onclick 이벤트, 버튼을 클릭할 때마다 문자열과 배경 변경하기 (6) | 2025.08.19 |
| 자바스크립트: 이벤트 속성 종류 (1) | 2025.08.19 |
| 자바스크립트: 요소(element) 선택 getElementById getElementsByClassName .. (8) | 2025.08.18 |