HTMLElement: change 이벤트

change 이벤트는 사용자가 <input>, <select>, <textarea> 요소의 값을 변경할 때 발생합니다. input 이벤트와 달리 change는 요소의 value값이 변경될 때마다 매번 발생하지는 않을 수 있습니다.

값이 바뀐 요소와 사용자가 값을 바꾼 방법에 따라 change 이벤트가 발생하는 시점은 달라집니다.

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) 이후로 이 동작은 모든 주요 브라우저에서 동일합니다.