В прошлой теме рассматривались события, возникающие при нажатии клавиш. В этой теме мы рассмотрим другие события формы. В том числе отправку формы на сервер.
Элемент в фокусеКогда элемент формы оказывается в фокусе, возникает событие focus , а когда элемент выходит из фокуса, срабатывает событие blur . Создадим поле для ввода и выведем в консоль текст при получении им фокуса и при выходе из фокуса:
HTML код:
Нет смысла в использовании этих событий для изменения стиля элемента. Для этого в CSS существует псевдокласс focus.
Ввод значенияСобытие input возникает, когда пользователь печатает текст в поле для ввода. Оно срабатывает при добавлении или удалении каждого символа, а также при копировании текста в поле для ввода. В некоторых браузерах оно работает необычно: при каждом вводе символа создаётся событие blur , после этого выполняется обработчик события input , а потом создаётся событие focus . Если обработчиков событий focus и blur нет, то в этом нет проблемы. Но если они есть, то они будут срабатывать при каждом добавлении символа.
Добавим на страницу ещё один тэг и выведем его значение при вводе текста:
HTML код:
JavaScript:
28 |
var newv = document.getElementById("new_value"); newv.onchange = function () { console.log("Значение изменено на: "+newv.value); }; |
Событие submit срабатывает при отправке формы на сервер. Оно используется для проверки данных, которые пользователь ввёл в форму. В обработчике проверяются значения элементов формы, и если какие-то значения введены неправильно, то делается отмена отправки формы. При этом обычно выводится сообщение, в котором указывается, что нужно исправить.
Поместим созданные тэги в форму и добавим кнопку отправки формы:
HTML код:
В предыдущих примерах элементы формы уже были найдны, поэтому в обработчике повторный поиск не производится.
Если форма заполнена правильно, то есть во всех полях есть хотя бы два символа, то браузер попытается запустить файл, указанный в атрибуте action , и возникнет ошибка, потому что такого файла нет. Но в этом нет никакого риска, поэтому не нужно опасаться проверять работу скрипта. Если в одном из полей введено менее двух символов, то появится сообщение и отправка будет отменена. Если проверок достаточно много, то можно для каждой проверки выводить своё сообщение и отменять отправку формы.
В этой статье, рассмотрим методы, которые библиотека jQuery предоставляет веб-разработчику для обработки событий.
Для работы с событиями в сценариях JavaScript браузер предоставляет API (например, функцию addEventListener). Используя эту функцию, вы можете указать код, который необходимо выполнить, когда браузер для указанного элемента будет генерировать указанное событие.
Обработка событий с помощью методов jQuery Синтаксис функции onПеред тем как переходить к добавлению элементам обработчиков событий, эти элементы сначала необходимо получить. Узнать о том, как найти нужные элементы на странице можно в статье jQuery - Выбор элементов .
В jQuery повесить событие (слушатель событий) на определённый элемент можно с помощью функций on и one , а также кратких записей on .
// функция on .on(events,handler); // функция one .one(events,handler); // events - событие или список событий через пробел, при наступлении которых необходимо выполнить обработчик (handler) // handler - функция (обработчик события) // краткая запись функции on .event(handler); // event - название события (можно использовать для обработки только тех событий, для которых в jQuery создана такая краткая запись)
Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции on событие click для всех элементов с классом btn:
// использование в качестве обработчика анонимной функции $(".btn").on("click", function() { // действия, которые будут выполнены при наступлении события... console.log($(this).text()); }); // использование обычной функции в качестве обработчика var myFunction = function() { console.log($(this).text()); } $(".btn").on("click", myFunction);
Вышеприведённый код, записанный с использованием короткой записи функции on:
$(".btn").click(function() { // действия, которые будут выполнены при наступлении события... console.log($(this).text()); });
Дополнительная информация о событииПри обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
$("#demo").on("click", function(e){ // e – объект Event, содержащий дополнительную информацию о произошедшем событии // часто используемые свойства объекта Event e.preventDefault(); //отменить выполнение действия по умолчанию e.stopPropagation(); //остановить дальнейшее всплытие события // e.type – получить тип события // e.target – ссылка на элемент, на котором произошло событие // e.currentTarget - ссылка на текущий элемент (для которого сработал обработчик). Это свойство, как правило, равно функции this. // e.currentTarget === this // e.which – код клавиши (для мыши), код кнопки или символа (для клавиатуры) //e.pageX, e.pageY – координаты курсора, относительно левого верхнего угла документа });
Пространство имёнВ jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Например:
// событие click в пространстве имён first $("#demo").on("click.first",function(){ console.log("1 обработчик события click"); }); // событие click в пространстве имён second $("#demo").on("click.second",function(){ console.log("2 обработчик события click"); });
Пространство имён - это очень удобная вещь. Она используется, например, когда вам необходимо вызвать не все события, а только с определённым именем.
// вызвать событие click в пространстве имён first $("#demo").trigger("click.first"); // вызвать событие click в пространстве имён second $("#demo").trigger("click.second");
Также с его помощью очень просто удалять определённые события:
//удалить обработчики события click в пространстве имён first $("#demo").off("click.first"); //удалить обработчики события click в пространстве имён second $("#demo").off("click.second");
Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчикПри необходимости вы можете передать данные в обработчик события (посредством указания дополнительного аргумента в функции on). Доступ к переданным данным внутри обработчика осуществляется через объект Event .
Осуществляется это так (пример):
Показать контент 1 Показать контент 2 ... $("#showContent1").on("click", {title:"Заголовок 1", content: "Содержимое 1..."}, function(e){ var output = ""+e.data.title+": " + e.data.content; $("#content").html(output); }); $("#showContent2").on("click", {title:"Заголовок 2", content: "Содержимое 2..."}, function(e){ var output = ""+e.data.title+": " + e.data.content; $("#content").html(output); });
Как повесить несколько событий на один элементПример использования одного обработчика для нескольких (2 или более) событий:
$("#id").on("keyup keypress blur change", function(e) { console.log(e.type); // тип события }); // или так var myFunction = function() { ... } $("#id") .keyup(myFunction) .keypress(myFunction) .blur(myFunction) .change(myFunction);
Для каждого события своя функция:
$("#id").on({ mouseenter: function() { // обработчик события mouseenter... }, mouseleave: function() { // обработчик события mouseleave... }, click: function() { // обработчик события click... } });
Пример использования в jQuery несколько обработчиков (функций) на одно событие:
$("#demo").click(function(){ console.log("1 обработчик события click"); }); $("#demo").click(function(){ console.log("2 обработчик события click"); });
Например, узнать в какой очерёдности будут выполняться события можно так:
Var eventList = $._data($("#demo"), "events"); console.log(eventList);
Программный вызов событияДля вызова события из кода в jQuery есть 2 метода:
- trigger - вызывает указанное событие у элемента.
- triggerHandler - вызывает обработчик события, при этом само событие не происходит.
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
$(function(){ // действия, которые необходимо выполнить после загрузки документа... });
Но, можно использовать и более длинную запись:
$(document).ready(function(){ // действия, которые необходимо выполнить после загрузки документа... });
jQuery - Событие загрузки (load)Событие load браузер генерирует элементу, когда он и все вложенные в него элементы были полностью загружены. Данное событие предназначено только для элементов, в которых присутствует URL: image , script , iframe и window .
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
$(window).on("load", function() { // действия после полной загрузки страницы... });
Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
... $("#image").on("load", function() { console.log("Изображение загружено"); });
jQuery - События мышиВ jQuery для отслеживания действий мыши наиболее часто используют следующие события:
- mousedown
- mouseup
- click
- mousemove
- wheel
- hover
- mouseenter
- mouseover
- mouseleave
- mouseout
Событие click является сложным событием, оно возникает после генерирования событий mousedown и mouseup . Событие mousedown возникает, когда указатель находится над элементом и кнопка мыши нажата. Событие mouseup происходит, когда указатель находится над элементом и кнопка мыши отпущена. Событие click генерируется, когда курсор находится над элементом, и клавиша мыши нажата и отпущена. Эти события могут получать любые HTML элементы.
Например, повесим обработчик на событие onclick элемента window . При наступлении данного события обработчик будет выводить номер нажатой клавиши и координаты курсора:
$(window).on("click", function(e) { // обработка события click... console.log("Нажата кнопка: " + e.which); //1 - левая кнопка, 2 - средняя кнопка, 3 - правая console.log("Координаты курсора: x = " + e.pageX + " ; y = " + e.pageY); });
Например, повесим событие onclick на все элементы с классом btn:
$(".btn").on("click", function(){ // код обработчика события нажатия кнопки... }); Краткая запись события по клику: $(".btn").click(function(){ ... });
Например, разберем, как можно скрыть блок через некоторое время после события click:
...Скрыть блок через 5 секунд... ... $(".hide-message").click(function(e){ e.preventDefault(); var _this = this; setTimeout(function(){ $(_this).closest(".message").hide(); }, 5000); });
jQuery - Событие при наведении (hover)jQuery - Что собой представляет событие hover
Событие при поднесении курсора является сложным и состоит из 2 событий:
- вхождения (mouseenter, mouseover);
- покидания (mouseleave, mouseout).
События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
- Ручка
- Карандаш
- Линейка
Те же самые действия, но использованиям mouseover и mouseout:
$("ul>li"). mouseover(function(){ // при вхождении в элемент $(this).css("color","orange"); }). mouseout(function(){ // при покидании элемента $(this).css("color","black"); });
Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события "Навести мышью":
Количество: 0 ... $("#count").mouseenter(function(){ var count = parseInt($(this).find("span").text()); count++; $(this).find("span").text(count); });
Вместо использования mouseenter и mouseleave можно использовать событие hover .
Например, перепишем вышеприведённый пример, используя hover:
$("ul>li").hover(function(){ // при вхождении в элемент $(this).css("color","orange"); }, function(){ // при покидании элемента $(this).css("color","black"); });
При использовании события hover в jQuery, первый обработчик используется для задания действий при вхождении курсора в элемент (mouseenter), а второй - при покидании (mouseleave).
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
Например:
$("h1").hover(function(){ console.log("Произошло события входа в элемент или выхода из него"); });
jQuery - Событие движения мышиСобытие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
$(".target").mousemove(function(e) { console.log("Вызван обработчик для события mousemove."); console.log("Координаты относительно левого верхнего угла документа: " + e.pageX + ", " + e.pageY); console.log("Координаты курсора внутри цели: " + e.offsetX + ", " + e.offsetY); });
jQuery - Событие колёсика мыши (wheel)Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
$(window).on("wheel", function(e) { // код обработчика (например)... console.log("Количество прокрученных пикселей: " + e.originalEvent.deltaY); if (e.originalEvent.deltaY < 0){ console.log("Прокручиваем вверх"); } else { console.log("Прокручиваем вниз"); } });
Данное событие в отличие от scroll генерируется браузером только для колёсика мышки, при этом неважно прокручивается элемент или нет, т.е. с ним можно работать на элементах с overflow , равным hidden . Еще одно отличие заключается в том, что wheel генерируется до прокрутки, а scroll - после неё.
jQuery – События клавиатурыПри нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
Keydown -> keypress -> keyup
- keydown (клавиша нажата, но ещё не отпущена);
- keypress (событие генерируется для букв, цифр и других клавиш, за исключением управляющих) – предназначено для того чтобы получить код символа (события keydown и keyup позволяют узнать только о коде клавиши, но не символа);
- keyup (генерируется браузером при отпускании клавиши).
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
... $("#target").on("keydown keypress keyup", function(e) { console.log("Тип события: " + e.type); // keydown, keypress, keyup console.log("Код нажатой клавиши или символа: " + e.which); // код символа позволяет получить только keypress console.log("Нажата клавиша Alt: " + e.altKey); console.log("Нажата клавиша Ctrl: " + e.ctrlKey); console.log("Нажата клавиша Shift: " + e.shiftKey); console.log("Нажата клавиша Cmd (osMac): " + e.metaKey); });
Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
$(document).keypress("c", function(e) { if(e.ctrlKey) { console.log("Нажато сочетание клавиш Ctrl+c"); } });
Пример, как можно прослушать сочетание клавиш Ctrl+Enter:
$(document).keydown(function(e) { // с поддержкой macOS X if ((e.ctrlKey || e.metaKey) && (e.keyCode == 13 || e.keyCode == 10)) { // ваши действия... } }
Пример, с использованием событий keydown и keyup:
... $("#name"). keydown(function(){ $(this).css("background-color", "yellow"); }). keyup(function(){ $(this).css("background-color, "pink"); });
jQuery – События элементов формыВ jQuery можно выделить следующие события для элементов формы и не только:
- focus (focusin)
- blur (focusout)
- change
- input (для текстовых элементов формы)
- select
- submit
Событие focus посылается элементу, когда он получает фокус. Данное событие генерируется для элементов input , select и ссылок (a href="..."), а также любых других элементов, у которых установлено свойство tabindex . Получение элементом фокуса обычно осуществляется посредством клика или нажатия клавиши Tab на клавиатуре. Событие focus не всплывает.
Кроме focus есть ещё похожее событие, называется оно focusin . В отличие от focus данное событие всплывает, и оно может, например, использоваться для обнаружения события фокуса родительскими элементами.
Событие blur посылается элементу, когда он теряет фокус. Так же как и focus , событие blur имеет похожее событие focusout . Данное событие отличается от blur тем, что оно может всплывать. Это возможность можно использовать, например, для получения его на родительских элементах, а не только на том элементе, который его вызвал (target).
Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:
... $("#demo"). focusin(function(){ $(this).css("background-color","orange"); }) .focusout(function(){ $(this).css("background-color","inherit"); });
Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
$("#demo input"). focus(function(){ $(this).parent().css("background-color","orange"); }) .blur(function(){ $(this).parent().css("background-color","inherit"); });
jQuery - Событие изменения (change)Событие change предназначено для регистрации изменения значения элементов input , textarea и select . Для элементов select , checkboxes , и radio кнопок данное событие возникает сразу (т.е. как только пользователь делает какой-то выбор). Но для других элементов данное событие не будет происходить до тех пор, пока этот элемент не потеряет фокус.
Пример использования события change для слежения за состоянием элемента checkbox . Доступность кнопки будет определять в зависимости от того в каком состоянии (checked или нет) находиться флажок:
Отправить ... $(function() { $("#agree").on("change", function(){ if (this.checked) { $("#send").prop("disabled",false); } else { $("#send").prop("disabled",true); } }); });
Пример, в котором рассмотрим, как получить значение элемента select при его изменении:
Первое значение Второе значение Третье значение ... $(function() { $("#list").on("change", function(){ var value = $(this).val(); $("#result").text(value); }); });
Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
Зелёный Красный Синий Коричневый Фиолетовый Серый ... $("select") .change(function () { var colors = ; $("select option:selected").each(function() { colors.push($(this).text()); }); console.log("Выбранные цвета: " + colors.join()); }) .change();
Пример программного вызова события change для элемента select:
// list - id элемента change $("#list").trigger("change"); // краткая запись $("#list").change(); // вызов только обработчика события change $("#list").triggerHandler("change");
Пример использования события изменения change для получения значения элемента input:
... $(function() { // событие изменения значения input (возникает только после потери фокуса) $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); });
Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input:
$("input").on("input",function(){ var value = $(this).val(); console.log(value); });
Пример, в котором представлен один из способов получения значения элемента textarea:
... $("textarea").on("input",function(){ var value = $(this).val(); console.log(value); });
Пример, в котором рассмотрим, как с помощью события change получить значение выбранного элемента input с type , равным radio:
Windows Linux macOS ... $(function() { $("input").on("change", function(){ var value = $(this).val(); console.log(value); }); });
jQuery - Событие выбора (select)Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type="text" или textarea выделяет текст.
$("#target").select(function() { console.log("Вызван обработчик события select"); });
jQuery – Событие отправки формы (submit)Событие submit возникает у элемента, когда пользователь пытается отправить форму. Данное событие может быть добавлено только к элементам form .
Пример, использования события submit:
... ... $("#feedback").submit(function(e) { // отменить отправку формы e.preventDefault(); // другие действия, например, для отправки формы по ajax... });
Программный вызов отправки формы:
$("#feedback").submit(); $("#feedback").trigger("submit");
jQuery - Событие прокрутки (scroll)Для отслеживания состояния скроллинга в jQuery используется событие scroll .
Например, повесим на событие прокрутки страницы функцию, которая будет отображать элемент с классом scrollup , если величина прокрутки больше 200px и скрывать его, если значение прокрутки меньше этой величины.
// краткая запись функции $(window).scroll(function() { // действия при скроллинге страницы... if ($(this).scrollTop()>200) { $(".scrollup").fadeIn(); } else { $(".scrollup").fadeOut(); } });
jQuery - Событие изменения размеров окна (resize)Для прослушивания события изменения окна браузера используется resize:
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
$(window).resize(function() { $("body").append("
Ширина x Высота = " + window.innerWidth + " x " + window.innerHeight + "
"); }); jQuery - Отмена стандартного поведения событияНекоторые элементы в HTML имеют стандартное поведение. Например, когда пользователь нажимает на ссылку, он переходит по адресу указанному в атрибуте href . Если вам это действие не нужно, то его можно отменить. Для отмены стандартного поведения необходимо вызвать в обработчике этого события метод preventDefault объекта event .
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service:
$("a.service").on("click",function(e){ //отменяем стандартное действие браузера e.preventDefault(); // действия, которые будет выполнять ссылка... });
Что такое всплытие и как его остановитьКроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
Текущий элемент (цель) -> родительский элемент цели -> прародительский элемент -> ... -> document -> window
В jQuery бывают сценарии, когда в представленной цепочке у какого-нибудь элемента то же есть обработчик для этого события, который выполнять не нужно. И чтобы это событие не распространилось на этот элемент, его необходимо остановить. Для этого в обработчике нужного элемента необходимо вызвать метод stopPropagation объекта event . После вызова этого метода событие остановится, и не будет всплывать.
Например, необходимо чтобы при поднесении курсора к элементу с классом mark , его содержимое становилось оранжевым цветом.
Некоторый текст...фрагмент......продолжение... ... $(".mark").on("hover", function(e){ e.stopPropagation(); $(this).css("color",orange); }, function(e){ e.stopPropagation(); $(this).css("color",black); } });
В данном случае если не указывать метод stopPropagation , то при поднесении курсора к элементу span с классом mark данное событие возникнет не только у него, но и у всех его родительских элементов. А это в этом примере приведёт к тому, что изменится цвет не только текста, заключенного в span , но и всего абзаца.
Если вам необходимо отменить стандартное поведение браузера и остановить всплытие события, то в jQuery вместо вызова двух этих методов можно просто вернуть в качестве результата функции значение false .
$("a").on("click", function(e){ //e.preventDefault(); //e.stopPropagation(); ... return false; });
Добавление событий к динамически созданным объектамДля того чтобы повесить событие на элемент, которого ещё нет, можно использовать следующую конструкцию функции on:
$(document).on(eventName, selector, handler); // document или любой другой существующий родительский элемент // eventName - имя события // selector - селектор, осуществляющий фильтрацию потомков, для которых необходимо запустить обработчик события // handler - обработчик события
Это действие можно осуществить благодаря тому, что событие всплывает, и, следовательно, возникает у всех предков этого элемента. А объект, до которого всплывают все события на странице, является document . Поэтому в большинстве случаев выбирают именно его. После этого зная селектор, функция on может программно отобрать среди элементов (элемента, который вызвал это событие (target) и всех его предков включая родителя) те, которые соответствуют ему. И затем для всех отобранных элементов выполнить указанный в функции on обработчик. Действия, посредством которых обработка события переносится на другой элемент (предок), называется в jQuery ещё процессом делегирования события .
Например, добавим событие к элементу, которого ещё нет на странице:
Добавить кнопку // при нажатии на элемент с id="addButton" добавить в начало страницы новую кнопку $("#addButton").on("click", function(e) { $("body").prepend("Удалить меня"); }); // добавить событие click, которое будет выполнено для элементов, которых ещё нет на странице $(document).on("click",".deleteMe", function() { $(this).remove(); });
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
$(document).on("click","#comment a",function(e) { if(!(location.hostname === this.hostname || !this.hostname.length)) { e.preventDefault(); location.href="away?link="+encodeURIComponent($(this).attr("href")); } });
jQuery - Удалить обработчик событияУдаление обработчиков события осуществляется с помощью метода off . При этом с помощью него можно удалить только те обработчики, которые добавлены посредством метода on .
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
$(".link").off();
Например, удалим событие click у всех элементов с классом link:
$(".link").off("link");
Специальный селектор (**) позволяет удалить только делегированные события с сохранением не делегированных:
$(".link").off("click","**");
Удалить только указанные делегированные события (с помощью селектора):
// добавление делегированного события $("ul").on("click","li", function(){ // выводим в консоль контент элемента li console.log($(this).text()); }); // удаление делегированного события $("ul").off("click","li");
Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show:
$("body").on("click.modal", ".show", openModal);
Создание пользовательского событияДля создания пользовательских событий в jQuery используются методы on и trigger .
Принцип создания специального события jQuery рассмотрим посредством следующего примера:
Вызвать пользовательское событие highlight (цвет зелёный) Вызвать пользовательское событие highlight (цвет красный) ... // добавляем ко всем элементам p пользовательское событие, которое будет изменять цвет текста и его содержимое // получения данных, переданных методом trigger, осуществим посредством аргументов color и title $(".module p").on("highlight", function(e, color, title) { $(this).css("color",color); $(this).text("Вызвано пользовательское событие highlight " +title); }); // при нажатии на элемент с классом success вызвать кастомное событие highlight и передать ему параметры $(".success").click(function(){ // используя второй аргумент передадим данные в обработчик события $(this).closest(".module").find("p").trigger("highlight",["green","(цвет зелёный)"]); }); // при нажатии на элемент с классом error вызвать кастомное событие highlight и передать ему параметры $(".error").click(function(){ // используя второй аргумент передадим данные в обработчик события $(this).closest(".module").find("p").trigger("highlight",["red","(цвет красный)"]); });
The input event fires when the value of an , , or element has been changed.
Yes |
No |
InputEvent |
GlobalEventHandlers.oninput |
HTML Living Standard |
Living Standard |
Document Object Model (DOM) Level 3 Events Specification The definition of "input event" in that specification. |
Obsolete |
The compatibility table in 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
79 Full support
79
No support
12 - 79 Notes Notes Not supported on select , checkbox , or radio inputs. | Firefox Full support Yes | IE Partial support 9 |