Событие onchange / событие change
Поддержка браузерами

Событие onchange JavaScript происходит, когда изменяется первоначальное состояние или содержимое элемента. В некоторых случаях событие возникает, когда элемент выходит из фокуса ввода.
Как зарегистрировать
В HTML
<ELEMENT onchange="handler"> (IE, Google Chrome, Firefox, Opera, Safari)
В JavaScript
object.onchange = handler; (IE, Google Chrome, Firefox, Opera, Safari).
object.addEventListener ("change", handler, useCapture); (IE - с версии 9, Google Chrome, Firefox, Opera, Safari).
object.attachEvent ("onchange", handler); (IE, Opera)
Объект event доступен для всех обработчиков событий во всех браузерах. Его свойства содержат дополнительную информацию о текущем событии.
Общая информация:
Всплытие | Нет |
Отменяемое | Нет |
Объект события | Event |
Событие работает по-разному для разных элементов:
- JavaScript select onchange - событие onchange происходит, когда изменяется выделение;
- input:checkbox и input:radio - в Firefox, Opera, Google Chrome и Safari: событие onchange происходит, когда изменяется состояние выбора. В Internet Explorer – когда элемент выходит из фокуса ввода и когда изменяется его состояние.
Для реализации кроссбраузерности, чтобы определить, когда изменилось состояние элемента, используйте событие onclick:
- textarea, input:password, input:search и input:text - событие onchange происходит, когда элемент выходит из фокуса ввода и когда его содержимое изменилось. Чтобы определить, когда изменилось содержимое, используйте в Internet Explorer событие onpropertychange, а в Firefox, Opera, Google Chrome и Safari (в Internet Explorer, начиная с версии 9) - событие oninput. В Google Chrome, Safari и Internet Explorer, начиная с версии 9, также может использоваться событие textInput;
- input:file - событие onchange JavaScript происходит, когда изменилось содержимое. Если пользователь в Internet Explorer вводит путь (не используя кнопку "Обзор"), то событие onchange происходит, когда элемент выходит из фокуса ввода. Поэтому в Internet Explorer используйте событие onpropertychange;
- input:range - событие onchange происходит, когда изменилось значение элемента.
Пример HTML-кода 1
Этот пример иллюстрирует использование события onchange для элемента select:
<head>
<script>
function OnSelectionChange (select) {
var selectedOption = select.options[select.selectedIndex];
alert ("The selected option is " + selectedOption.value);
}
</script>
</head>
<body>
Select an item from the following list:<br />
<select onchange="OnSelectionChange (this)">
<option value="Apple" />Apple
<option value="Pear" />Pear
<option value="Peach" />Peach
</select>
</body>
Пример HTML-кода 2
В этом примере используется событие onchange JavaScript и объект Date, чтобы вычислить время, прошедшее между двумя заданными значениями:
<head>
<script>
function CalculateElapsedTime () {
var startHSelect = document.getElementById ("starttimehour");
var startMSelect = document.getElementById ("starttimemin");
var endHSelect = document.getElementById ("endtimehour");
var endMSelect = document.getElementById ("endtimemin");
// преобразуем значения строк в целые числа
var startH = parseInt (startHSelect.value);
var startM = parseInt (startMSelect.value);
var endH = parseInt (endHSelect.value);
var endM = parseInt (endMSelect.value);
// создаем объекты даты для начала и конца
var start = new Date (); // текущие дата и время, по местному времени.
var end = new Date (); // текущие дата и время, по местному времени.
// устанавливаем выбранные часы и минуты
start.setHours (startH, startM);
end.setHours (endH, endM);
// вычисляем прошедшее время в миллисекундах
var elapsedInMS = end.getTime () - start.getTime ();
// выводим результат
var elapsedSpan = document.getElementById ("elapsed");
elapsedSpan.innerHTML = "" + (elapsedInMS / 1000 / 60);
}
function Init () {
var startHSelect = document.getElementById ("starttimehour");
var startMSelect = document.getElementById ("starttimemin");
var endHSelect = document.getElementById ("endtimehour");
var endMSelect = document.getElementById ("endtimemin");
// заполняем список вариантов выбора
for (var i = 0; i < 24; i++) {
var option = new Option ((i < 10 ? "0": "") + i, "" + i);
startHSelect.options.add (option);
var option = new Option ((i < 10 ? "0": "") + i, "" + i);
endHSelect.options.add (option);
}
for (var i = 0; i < 60; i++) {
var option = new Option ((i < 10 ? "0": "") + i, "" + i);
startMSelect.options.add (option);
var option = new Option ((i < 10 ? "0": "") + i, "" + i);
endMSelect.options.add (option);
}
CalculateElapsedTime ();
}
</script>
</head>
<body onload="Init ()">
h:
<select id="starttimehour" onchange="CalculateElapsedTime ()"></select>
m:
<select id="starttimemin" onchange="CalculateElapsedTime ()"></select>
-
h:
<select id="endtimehour" onchange="CalculateElapsedTime ()"></select>
m:
<select id="endtimemin" onchange="CalculateElapsedTime ()"></select>
<br /><br />
Elapsed time in mins: <span id="elapsed"></span>
</body>
onchange JavaScript поддерживается объектами:
window
HTML-элементы:
input:checkbox, input:file, input:password, input:radio, input:range, input:search, input:text, keygen, select, textarea.