Справочник API
.change() в jQuery
Содержание статьи
-
Категории: Events › Form Events , Forms
Устанавливает (или вызывает) обработчики JavaScript события change (когда элемент потерял фокус, а его значение с момента получения фокуса изменилось) для всех элементов набора jQuery.
Синтаксис и описание:
Добавлено в jQuery 1.0.change( handler( eventObject ) )
Добавлено в jQuery 1.4.3.change( [ eventData ,] handler( eventObject ) )
Добавлено в jQuery 1.0.change( )
Команда .change() — сокращённый вариант для события change: с обработчиком она равносильна .bind(), без аргументов — искусственно вызывает уже установленные обработчики (эквивалент .trigger('change')). Событие change относится к элементам
<input>,<textarea>и<select>.Для
<select>, чекбоксов и радиокнопок событие срабатывает сразу после выбора пользователем нового значения. Для текстовых полей (<input type="text">,<textarea>) — только когда поле теряет фокус и значение с момента получения фокуса изменилось; если нужна реакция на каждое нажатие клавиши, используйте событие input, а не change.
Возвращаемое значение: (объект) Набор jQuery.
Параметры:
eventData – (объект) Данные, которые будут доступны обработчику через event.data. Фиксируются на момент объявления обработчика.
handler( eventObject ) – Функция-обработчик события change. Получает единственный параметр eventObject (см. event.target).
Примечание:
Изменение значения элемента программно, например через .val(), событие change не вызывает — его нужно инициировать вручную командой .trigger('change').
Примечание:
Событие относится к Form Events и часто комбинируется с делегированием для динамически добавляемых полей формы (см. .delegate() и современный .on()); подробнее о механике делегирования — в статье подробнее о .on() и делегировании.
В jQuery 3.x и 4.0:
Шорткат .change() помечен deprecated начиная с jQuery 3.3, но продолжает работать и в jQuery 3.7.1, и в jQuery 4.0 — из API его не удаляли. Вместо .change(handler) используйте
.on("change", handler), вместо .change() без аргументов —.trigger("change").
Примеры:
Классический вариант (работает во всех версиях jQuery, включая 4.0, но считается устаревшим стилем).
$('select#colors').change(function() { var value = $(this).val(); $('div.color-preview').css('background-color', value); });Современный эквивалент через .on() — рекомендуемый способ в jQuery 3.x/4.0.
$('select#colors').on('change', function() { var value = $(this).val(); $('div.color-preview').css('background-color', value); });Программное изменение значения не порождает событие change само по себе — его нужно вызвать явно.
$('#qty').val(5); $('#qty').trigger('change'); // обработчики сработают только после этой строки