onchange 이벤트 속성이란?
HTML onchange 속성은 HTML 문서에서 요소의 값이 변경되는 순간 자동으로 실행되는 이벤트 속성입니다. 주로 <select>, <input>, <textarea>와 같은 사용자 입력 요소에서 값이 바뀌었을 때 특정 자바스크립트 함수를 호출하는 용도로 널리 활용됩니다.
예를 들어 드롭다운 목록에서 다른 항목을 선택하거나, 텍스트 입력 필드의 값을 수정한 후 포커스가 벗어나는 시점에 onchange 이벤트가 발생합니다.
기본 문법(Syntax)
onchange 속성의 기본 작성 형식은 다음과 같습니다.
<tagname onchange="script"></tagname>
- tagname: 이벤트를 적용할 HTML 요소의 이름
- script: 값이 변경될 때 실행될 자바스크립트 코드 또는 함수
예제 코드
아래 예제는 셀렉트 박스에서 좋아하는 과목을 선택할 때마다 onchange 이벤트가 발생하고, 선택된 값이 화면에 실시간으로 출력되는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
padding: 20px;
}
.show {
font-size: 1.1rem;
margin: 1rem auto;
}
select {
height: 2rem;
width: 30%;
font-size: 1rem;
background: transparent;
border: 2px solid #fff;
outline: none;
}
</style>
</head>
<body>
<h1>HTML onchange 이벤트 속성 데모</h1>
<p>좋아하는 과목을 선택하세요:</p>
<select onchange="get()">
<option>물리학</option>
<option>화학</option>
<option>수학</option>
</select>
<div class="show"></div>
<script>
function get() {
var msg = document.querySelector('.show');
msg.innerHTML = "현재 선택된 값은 " + document.querySelector("select").value + " 입니다";
}
</script>
</body>
</html>코드 설명
- <select> 요소에
onchange="get()"속성을 지정하여, 선택 값이 바뀔 때마다get()함수가 실행됩니다. get()함수는document.querySelector()로 .show 영역을 찾아 선택된 과목 값을 화면에 출력합니다.
실행 결과
드롭다운 목록의 값을 변경해 보면 onchange 이벤트가 트리거되면서 선택한 과목이 아래 영역에 즉시 표시되는 것을 확인할 수 있습니다.
