HTMLElement: change 이벤트
change
이벤트는 사용자가 <input>
, <select>
, <textarea>
요소의 값을 변경할 때 발생합니다. input
이벤트와 달리 change
는 요소의 value
값이 변경될 때마다 매번 발생하지는 않을 수 있습니다.
값이 바뀐 요소와 사용자가 값을 바꾼 방법에 따라 change
이벤트가 발생하는 시점은 달라집니다.
<input type="checkbox">
요소를 클릭하거나 키보드를 사용해서 체크하거나 해제할 때<input type="radio">
요소가 체크될 때 (해제될 때는 발생하지 않음)- 사용자가 변경사항을 직접 반영할 때 (
<select>
의 드롭다운에서 값을 클릭,<input type="date">
의 달력에서 날짜 선택,<input type="file">
의 파일 선택 창에서 파일을 선택할 때 등) <textarea>
와<input>
의text
,search
,url
,tel
,email
,password
유형처럼, 사용자 상호작용이 값 선택이 아니라 타이핑인 요소의 값이 바뀐 뒤 포커스를 상실했을 때
HTML 명세서에 change
이벤트가 발생해야 하는 <input>
유형들이 나열되어 있습니다.
구문
이벤트 이름을 addEventListener()
등의 메서드에 제공하거나, 이벤트 처리기 속성을 사용하세요.
js
addEventListener("change", (event) => {});
onchange = (event) => {};
이벤트 유형
일반 Event
.
예제
<select> 요소
HTML
html
<label>
아이스크림 맛을 선택하세요.
<select class="ice-cream" name="ice-cream">
<option value="">선택…</option>
<option value="초콜릿">초콜릿</option>
<option value="정어리">정어리</option>
<option value="바닐라">바닐라</option>
</select>
</label>
<div class="result"></div>
JavaScript
js
const selectElement = document.querySelector(".ice-cream");
selectElement.addEventListener("change", (event) => {
const result = document.querySelector(".result");
result.textContent = `${event.target.value} 맛을 좋아하시는군요`;
});
결과
텍스트 입력 요소
<input type="text">
를 포함한 일부 요소들에서는 컨트롤이 포커스를 잃을 때까지 change
이벤트가 발생하지 않습니다. 아래 입력 필드에 텍스트를 입력하고, 다른 아무 곳이나 클릭해서 이벤트를 발생시켜보세요.
HTML
html
<input placeholder="아무 텍스트나 입력" name="name" />
<p id="log"></p>
JavaScript
js
const input = document.querySelector("input");
const log = document.getElementById("log");
input.addEventListener("change", updateValue);
function updateValue(e) {
log.textContent = e.target.value;
}
결과
명세서
Specification |
---|
HTML Standard # event-change |
HTML Standard # handler-onchange |
브라우저 호환성
BCD tables only load in the browser
어떤 상호작용들은 브라우저마다 change
이벤트의 발생 여부가 다를 수도 있습니다. 예를 들어, Gecko에서는 <select>
요소의 키보드 탐색으로 change
이벤트가 발생하지 않았습니다(Firefox 버그 126379). 하지만 Firefox 63 (Quantum) 이후로 이 동작은 모든 주요 브라우저에서 동일합니다.