onchange 이벤트
정의와 사용법
요소의 값이 변경될 때 onchange 이벤트가 발생합니다.
단수 선택 상태가 변경될 때 onchange 이벤트가 발생합니다.
안내:}}이 이벤트는 다음과 유사합니다 oninput 이벤트이 이벤트는 다른 이벤트와 차이점이 있습니다. oninput 이벤트는 요소 값이 변경된 후 즉시 발생하며, onchange는 요소가 포커스를 잃고 내용이 변경된 후 발생합니다. 또한 onchange 이벤트는 <select> 요소에도 적용됩니다.
예제
예제 1
사용자가 <select> 요소의 선택된选项을 변경할 때 JavaScript를 실행합니다:
<select onchange="myFunction()">
예제 2
사용자가 입력 필드의 내용을 변경할 때 JavaScript를 실행합니다:
<input type="text" onchange="myFunction()">
문법
HTML에서:
<element onchange="myScript">
JavaScript에서:
object.onchange = function(){myScript};
JavaScript에서 addEventListener() 메서드를 사용하면:
object.addEventListener("change", myScript);
비고:Internet Explorer 8 또는 이전 버전에서는 지원되지 않습니다 addEventListener() 메서드。
기술적인 세부 사항
버블링: | 지원 |
---|---|
취소 가능: | 지원되지 않음 |
이벤트 유형: | 이벤트 |
지원되는 HTML 태그: | <input type="checkbox">, <input type="color">, <input type="date">, <input type="datetime">, <input type="email">, <input type="file">, <input type="month">, <input type="number">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="tel">, <input type="text">, <input type="time">, <input type="url">, <input type="week">, <select> 이며 <textarea> |
DOM 버전: | 레벨 2 이벤트 |
브라우저 지원
이벤트 | 크롬 | IE | 파이어폭스 | 사파리 | 오페라 |
---|---|---|---|---|---|
onchange | 지원 | 지원 | 지원 | 지원 | 지원 |