Событие onchange / событие change

2021-10-12

Поддержка браузерами
Как зарегистрировать
- В HTML
- В JavaScript
Пример HTML-кода 1
Пример HTML-кода 2

Поддержка браузерами

Событие 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.

Пожалуйста, оставляйте свои комментарии по текущей теме материала. За комментарии, подписки, отклики, лайки, дизлайки низкий вам поклон!