Onchange javascript примеры. Onchange JavascripT Не работает должным образом. Добавлен в версии jQuery
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Устанавливает обработчик изменения заданного элемента формы, либо, запускает это событие. Метод имеет три варианта использования:
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject .
handler(eventObject)
— см. выше.
eventData
— дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...} .
Убрать установленный обработчик можно с помощью метода unbind() .
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования change() , можно найти в описании этих методов.
Напомним, что событие change происходит не непосредственно в момент изменения, а только при потери фокуса измененного элемента формы.
Пример// установим обработчик события change, элементу с идентификатором foo $("#foo" ) .change (function () { alert ("Элемент foo был изменен." ) ; } ) ; // вызовим событие change на элементе foo $("#foo" ) .change () ; // установим еще один обработчик события change, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $(".block" ) .change ({ a: 12 , b: "abc" } , function (eventObject) { var externalData = "a=" + eventObject.data .a + ", b=" + eventObject.data .b ; alert ("Элемент с классом block был изменен. " + "В обработчик этого события переданы данные: " + externalData ) ; } ) ;