Вызывается или отслеживается JavaScript событие "change" (событие изменения формы).
- version added: 1.0
.change(handler(eventObject))
handler(eventObject)
Тип : Function()
Функция-обработчик события.
- version added: 1.4.3
.change(, handler(eventObject))
eventData
Тип : Object
Объект с данными, которые будут переданы в обработчик.
handler(eventObject)
Тип : Function()
Функция-обработчик события
- version added: 1.0 .change()
Данный метод - это сокращение от.on("change", handler), и.trigger("change").
Событие change выстреливает при изменение полей формы. Оно отслеживает поля , и . Для селект боксов, радио кнопок и чекбоксов событие выстреливает сразу же после изменения, в других же случаях только в тот момент, как пользователь перейдёт на другой элемент.
К примеру, у нас есть следующий HTML:
Option 1 Option 2 Trigger the handler
Обработчик события может быть прикреплён следующим образом:
$(".target").change(function() { alert("Handler for .change() called."); });
Теперь, при смене значения элемента селект мы увидим сообщение. Так же оно возникнет в случае изменения других полей, но после переключения на другие. Если элемент теряет фокус, при этом изменения не были произведены, то событие не происходит. Для того чтобы самим вызвать данное событие, достаточно вызвать метод.change() без аргументов:
$("#other").click(function() { $(".target").change(); });
После выполнения данного кода, мы увидим сообщение из предыдущего листинга. На этот раз увидим его дважды, т.к. у нас в форме два элемента.
Примеры:Пример : отслеживаем изменения селект бокса.
change demo div { color: red; } Chocolate Candy Taffy Caramel Fudge Cookie $("select") .change(function () { var str = ""; $("select option:selected").each(function() { str += $(this).text() + " "; }); $("div").text(str); }) .change();
_element"> element HTML Choose an ice cream flavor: Select One … Chocolate Sardine VanillaBody { display: grid; grid-template-areas: "select result"; } select { grid-area: select; } .result { grid-area: result; }
JavaScript const selectElement = document.querySelector(".ice-cream"); selectElement.addEventListener("change", (event) => { const result = document.querySelector(".result"); result.textContent = `You like ${event.target.value}`; }); Result Text input elementFor some elements, including , the change event doesn"t fire until the control loses focus. Try entering something into the field below, and then click somewhere else to trigger the event.
HTML JavaScript const input = document.querySelector("input"); const log = document.getElementById("log"); input.addEventListener("change", updateValue); function updateValue(e) { log.textContent = e.target.value; } Result Specifications| HTML Living Standard The definition of "change" in that specification. |
Living Standard |
The compatibility table on this page is generated from structured data. If you"d like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
| Desktop Mobile | |||||||||||
| Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet | |||||||||||
| Chrome Full support Yes | Edge Full support 12 | Firefox Full support Yes | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Different browsers do not always agree whether a change event should be fired for certain types of interaction. For example, keyboard navigation in elements never fired a change event in Gecko until the user hit Enter or switched the focus away from the (see bug 126379). Since Firefox 63 (Quantum), this behavior is consistent between all major browsers, however.
jQuery метод .change() привязывает JavaScript обработчик событий "change" (изменение элемента), или запускает это событие на выбранный элемент. Метод используется с элементами HTML формы.
Событие "select" срабатывает, когда значение элемента формы меняется (элементы , и элементы ). Обращаю Ваше внимание, что для таких элементов как радио-кнопки, флаговые кнопки и элементы раскрывающегося списка, событие "select" вызывается немедленно после того как пользователь сделает выбор, а для элементов с текстовым содержимым откладывается до того момента пока элемент управления не потеряет фокус (например, такие элементы как с текстовым типом type = "text" , или ).
Если значение элемента изменяется с использованием JavaScript , например с использованием jQuery метода .val() , то событие "change" не вызывается.
jQuery синтаксис: Синтаксис 1.0: $(selector ).change() // метод используется без параметров $(selector ).change(handler ) handler - Function (Event eventObject ) Синтаксис 1.4.3: $(selector ).change(eventData , handler ) eventData - Anything handler - Function (Event eventObject )Обращаю Ваше внимание, что метод .change() , используемый вместе с функцией, переданной в качестве параметра (handler ) является, короткой записью метода .on() , а без параметра является короткой записью метода .trigger() :
$(selector ).on("change ", handler ) $(selector ).trigger("change ")
Добавлен в версии jQuery 1.0 (синтаксис обновлен в версии 1.4.3) Значения параметров Пример использования Использование jQuery метода.change() (без параметров и с функцией) $(document ).ready(function (){ $("button ").click(function (){ // задаем функцию при нажатиии на элемент $("textarea ").change(); // вызываем событие change на элементе } ); $(this ).change(function (){ // задаем функцию при срабатывании события change на элементе с которым взаимодействует пользователь $("p ").css("display ", "block ") // задаем, что элементСтановится блочным
.text("Что-то изменилось
") // добавляем текстовое содержимое
.fadeOut(750
); // плавно изменяем прозрачность для элемента
}
);
}
);
Клик
1
2
1
2
3
1
2
Измени меня
В этом примере с использованием jQuery метода .change() мы при нажатии на элемент (кнопка) вызываем событие "change" на элементе . Вместо этого элемента можно было использовать любой другой элемент в этом примере.
Обработчик OnChange вызывается при изменении любого поля ввода или нажатии на любую кнопку.
Аргумент Name содержит имя поля ввода или кнопки в нижнем регистре.
Пример: Procedure OnChange(Name: String); Begin // Если изменены поля цена или кол-во, то рассчитываем сумму If Name="price" Or Name="cnt" Then Summa:= RoundMul(Price, Cnt, 2); // Если изменено поле сумма, то рассчитываем цену. If Name="summa" Then Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); End;
Аналогичный эффект можно получить при использовании обработчиков OnPriceChange, OnCntChange, OnSummaChange.
Пример: Procedure OnPriceChange; Begin Summa:= RoundMul(Price, Cnt, 2); End; Procedure OnCntChange; Begin Summa:= RoundMul(Price, Cnt, 2); End; Procedure OnSummaChange; Begin Price:= If(Cnt=0, 0, RoundDiv(Summa, Cnt, 2)); End;
Этот обработчик удобно использовать при организации модульности, так как он собирает информацию практически обо всех событиях. Например:
Var BaseClass: Variant; Procedure OnCreate; Begin BaseDocument.Init(Self); // Создание базового класса и обмен с ним ссылками. Инициализация документа. End; Procedure OnChange(Name: String); Begin BaseClass.OnChange(Name); // Передача событий базовому классу End;
Или пример модульности с использованием синглтона (свойство модуля на вкладке редактора Описание):
Procedure OnCreate; Begin BaseClass.OnCreate(Self); // Инициализация документа. End; Procedure OnChange(Name: String); Begin BaseClass.OnChange(Self, Name); // Передача событий базовому классу. End;
Происходит сразу после того как значение элемента изменилось, а событие onchange происходит, когда элемент теряет фокус. Другим отличием является то, что событие onchange имеет более широкую поддержку браузерами и работает с такими элементами как , и более расширено с элементом .
Поддержка браузерами| onchange | Да | Да | Да | Да | Да | Да |
Пример вывода текста, набранного в элементе при смене фокуса, используя атрибут событий onchange . Обратите внимание, что если бы мы использовали атрибут событий oninput , то текст отображался бы сразу, а не при смене фокуса.
Событие onchangeНабирите произвольный текст и уберите фокус с элемента:
function testFunction() { var x = document.getElementById("testInput" ).value; document.getElementById("info2" ).innerHTML = "Вы набрали следующий текст: " + x; }Набирите произвольный текст и уберите фокус с элемента:
Пример вывода значения value тега (пункт раскрывающегося списка), используя атрибут событий onchange .
Событие onchangeВыберите желание из списка:
Желание 1 Желание 2 Желание 3 function wishFunction() { var z = document.getElementById("wishlist" ).value; document.getElementById("info" ).innerHTML = "Вы выбрали: " + z; }Выберите желание из списка:
Желание 1 Желание 2 Желание 3
Рассмотрим пример изменения двухмерного поворота элемента, используя CSS свойство transform , HTML атрибута событий onchange и функции на JavaScript:
Двухмерный поворот элемента в CSS #test { width : 100px ; /* устанавливаем ширину блока */ height : 100px ; /* устанавливаем высоту блока */ margin : 20px ; /* устанавливаем величину внешнего отступа для всех сторон элемента */ border : 1px solid orange ; /* устанавливаем сплошную границу размером 1px оранжевого цвета */ background : khaki ; /* устанавливаем цвет заднего фона */ transform : rotate(0deg) ; /* устанавливаем, что двухмерный поворот отсутствует */ -webkit-transform : rotate(0deg) ; -ms-transform : rotate(0deg) ; /* для поддержки ранних версий браузеров */ } function rotate(value) { /* создаем функцию для изменения значения стиля элемента с id = test, с отображением результата изменения в элементе с id = result и поддержкой ранних версий браузера */ document.getElementById("test" ).style.webkitTransform = "rotate(" + value + "deg)" ; document.getElementById("test" ).style.msTransform = "rotate(" + value + "deg)" ; /* поддержка ранних версий браузера */ document.getElementById("test" ).style.MozTransform = "rotate(" + value + "deg)" ; /* поддержка ранних версий браузера */ document.getElementById("test" ).style.transform = "rotate(" + value + "deg)" ; document.getElementById("result" ).innerHTML = value + "deg" ; }Передвиньте бегунок для поворота элемента:
transform: rotate( 0deg ); Rotate me
