Обработка форм
»» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.
jQuery предоставляет ряд методов, предназначенных для обработки событий, связанных с формой. Сейчас имеет смысл освежить ваши знания в этой области, поскольку формы являются предметом нашего рассмотрения. Интересующие нас методы и события, которые им соответствуют, описывались в статье «Использование прямых методов событий», далее мы более подробно рассмотрим эти события.
Реагирование на изменение фокуса формы
Методы blur() и focus() позволяют реагировать на изменения состояния фокуса формы. Обычно эта возможность используется для того, чтобы помочь пользователю сориентироваться в том, какой элемент имеет фокус (и, таким образом, какой элемент будет принимать вводимые данные). Соответствующий пример приведен ниже:
В этом примере мы выбираем все элементы input и регистрируем функцию в качестве обработчика обоих событий — focus и blur. Эта функция выделяет элемент зеленой рамкой, когда он принимает фокус, и убирает рамку, когда фокус теряется:
Обратите внимание на то, что здесь использован селектор input. Иными словами, элементы выбираются по дескриптору. В некоторых браузерах этот селектор действует более широко и, в частности, выбирает элементы button, способные инициировать отправку формы. Это означает, что при использовании расширенного селектора граница будет применяться не только к элементам input, но и к элементу button.
Реагирование на изменение значений формы
Событие change запускается, когда пользователь изменяет значение элемента form. Это событие особенно полезно, если вы предоставляете совокупную информацию, основанную на значениях, введенных в форме. В примере ниже показано, как это событие можно использовать в документе, представляющем сайт цветочного магазина, для отслеживания общего объема заказа:
В этом примере в ответ на событие change вычисляется сумма всех значений, введенных в полях input, и результат отображается в элементе span, который перед этим был добавлен в документ. Обратите внимание на то, что для получения значений элементов input используется метод val().
Реагирование на отправку формы
К более сложным операциям, которые можно выполнять по отношению к формам, относятся те, что связаны с отменой действий браузера по умолчанию, предусмотренных для элементов формы. Простой пример приведен ниже:
В этом сценарии регистрируется встроенная функция для обработки события submit. Это событие будет запускаться при выполнении пользователем щелчка на кнопке «Заказать». Если значение первого элемента input равно 0, вызывается метод, preventDefault(), который прервет предусмотренное для формы действие по умолчанию, заключающееся в отправке данных на сервер. При любом другом значении отправка формы выполняется.
События и их обработка в jQuery
В этой статье мы рассмотрим методы jQuery, которые предназначены для обработки различных событий, возникающих на странице.
Событие – это «сигнал», возникающий в браузере, который сообщает вам, что что-то произошло для того, чтобы вы могли с ним взаимодействовать.
Обработка событий с помощью методов jQuery
Функция one отличается от on только тем, что она выполняет обработчик при наступлении указанного события только один раз.
Например, добавим с помощью функции on событие click для всех элементов с классом btn :
Вышеприведённый код, записанный с использованием короткой записи функции on :
Дополнительная информация о событии
При обработке события вы можете узнать некоторую дополнительную информацию о нём. Передача этой информации, а именно объекта Event в обработчик события осуществляется всегда посредством первого аргумента.
Пространство имён
В jQuery после указания имени события вы можете ещё дополнительно указать пространство имён.
Также с его помощью очень просто удалять определённые события:
Описание и примеры использования функций trigger и off рассматриваются в статье немного ниже.
Передача дополнительных данных в обработчик
Осуществляется это так (пример):
Пример использования одного обработчика для нескольких (2 или более) событий:
Для каждого события своя функция:
Пример использования в jQuery несколько обработчиков (функций) на одно событие:
Например, узнать в какой очерёдности будут выполняться события можно так:
Программный вызов события
Для вызова события из кода в jQuery есть 2 метода:
Процесс добавления к некоторому элементу обработчика события обычно осуществляется после загрузки страницы, т.е. когда DOM дерево документа уже построено. Иначе при написании обработчиков, вы можете обратиться к элементам, которых ещё нет на странице.
Самая короткая запись события загрузки страницы в jQuery выглядит так:
Но, можно использовать и более длинную запись:
Например, выполнить функцию, когда страница будет полностью загружена (включая картинки):
Например, выведем сообщение в консоль, когда указанное изображение будет загружено:
В jQuery для отслеживания действий мыши наиболее часто используют следующие события:
Например, повесим событие onclick на все элементы с классом btn :
Краткая запись события по клику:
Например, разберем, как можно скрыть блок через некоторое время после события click :
Событие при поднесении курсора является сложным и состоит из 2 событий:
События mouseenter и mouseleave в jQuery отличаются от mouseover и mouseout только тем, что они не возникают когда курсор соответственно входит и покидает внутренние элементы прослушиваемого элемента. Другими словами события mouseover и mouseout всплывают, а mouseenter и mouseleave – нет.
Например, изменим цвет элемента списка при поднесении к нему курсора:
Те же самые действия, но использованиям mouseover и mouseout :
Данные методы необязательно использовать вместе, их можно также применять по отдельности.
Например, подсчитаем количество посещений элемента при наступлении события «Навести мышью»:
Например, перепишем вышеприведённый пример, используя hover :
Если указать событию hover один обработчик, то он будет выполняться как для обработки наведения мыши, так и для её покидания.
Событие mousemove посылается элементу, когда указатель мыши перемещается внутри него. Любой HTML элемент может получать это событие.
Прослушивание события прокрутки колёсика (wheel) мышки можно осуществить так:
jQuery – События клавиатуры
При нажатии клавиши клавиатуры браузер генерирует события в следующем порядке:
Например, напишем обработчик для прослушивания всех событий, которые происходят при нажатии клавиши:
Пример, в котором показано, как можно прослушать событие keypress и узнать, нажато ли указанное сочетание клавиш:
Пример, как можно прослушать сочетание клавиш Ctrl+Enter :
Пример, с использованием событий keydown и keyup :
jQuery – События элементов формы
В jQuery можно выделить следующие события для элементов формы и не только:
Например, при получении элементом div события фокуса установим ему фон оранжевого цвета:
Точно такое же выполнить с помощью событий focus и blur не получится, т.к. они не всплывают:
Пример, в котором рассмотрим, как получить значение элемента select при его изменении:
Пример, в котором рассмотрим, как получить все выбранные элементы select при его изменении:
Пример программного вызова события change для элемента select :
Пример использования события изменения change для получения значения элемента input :
Но кроме события change есть ещё событие input для текстовых элементов. Данное событие в отличие от change генерируется сразу, а не после того как данный элемент потеряет фокус.
Пример, использования события ввода для получения значения элемента input :
Пример, в котором представлен один из способов получения значения элемента textarea :
Событие выбора select генерируется браузером, когда пользователь внутри элементов input с type=»text» или textarea выделяет текст.
jQuery – Событие отправки формы (submit)
Пример, использования события submit :
Программный вызов отправки формы:
Для прослушивания события изменения окна браузера используется resize :
Например, создадим обработчик, который будет при изменении окна браузера выводить в конец страницы её ширину и высоту:
Например, отменим стандартное поведение всех ссылок на странице, имеющих класс service :
Что такое всплытие и как его остановить
Кроме отмены стандартного действия, в механизме событий есть ещё такое понятие как всплытие. Оно заключается в том, что когда браузер генерирует событие, то он это делает не только для текущего элемента (цели), но и для всех его потомков включая родителя:
Добавление событий к динамически созданным объектам
Например, добавим событие к элементу, которого ещё нет на странице:
Делегирование может применяться не только для обработки событий динамически созданных объектов, но и для того чтобы не привязывать к каждому элементу (если их на странице может быть очень много) обработчик.
Например, запретим в комментариях переходить по внешним ссылкам (такие действия будем перенаправлять на страницу away):
Вызов метода off без аргументов снимет у указанных элементов все добавленные к ним обработчики событий.
Например, отключим все обработчики у элементов с классом link:
Например, удалим событие click у всех элементов с классом link :
Специальный селектор ( ** ) позволяет удалить только делегированные события с сохранением не делегированных:
Удалить только указанные делегированные события (с помощью селектора):
Удалить все обработчики openModal делегированного события click в пространстве имён modal для элементов с классом show :
Создание пользовательского события
Принцип создания специального события jQuery рассмотрим посредством следующего примера:
80% Работа с формами
Формы – это, пожалуй, один из самых нелюбимых элементов на странице – пока настроишь внешний вид, потом ещё проверь, что ввели нерадивые пользователи да выведи им информацию о допущенных ошибках, и, в конце концов, отправляешь на сервер данные с чувством облегчения от проделанной кропотливой работы. Так вот – о том, что поможет в этой самой работе, я и буду рассказывать.
Для начала, стоит напомнить события, с которыми чаще всего придётся работать:
change — изменение значения элемента
submit — отправка формы
Начнём с последнего, для опыта возьмём форму попроще:
И попробуем отправить её по ссылке из «action» посредством AJAX-запроса (для отслеживания события submit можно использовать одноименный «shorthand» метод):
Тут затесался один незнакомый метод – «.serialize()» – он в ответе за «сбор» данных с формы в удобном для передачи данных формате:
Также есть метод «.serializeArray()» – он представляет собранные данные в виде объекта:
Встречайте ещё один метод, который нам будет частенько нужен:
val() – получение значения первого элемента формы из выборки
val(value) – установка значения всем элементам формы из выборки
Теперь, с его помощью, мы можем добавить в предыдущий код немного проверки данных:
Хорошо, работать с формой теперь можем, осталось прикрутить более вменяемый вывод ошибок (да-да, за «alert()» бьём по рукам):
При повторной отправке формы не забудьте убрать сообщения, оставшиеся от предыдущей проверки:
Теперь можно объединить кусочки кода и получить следующий вариант:
Запустите предыдущий пример и попробуйте отправить форму ниже, получившийся AJAX-запрос вы сможете изучить в консоли браузера:
Я хотел ещё вернуться к списку событий формы и перечислить недостающие:
focus — фокус на элементе, для работы с данным событием так же есть «shorthand» метод «.focus()»; потребуется, если надо вывести подсказку к элементу формы при наведении
blur — фокус ушёл с элемента + метод «.blur()»; пригодится при валидации формы по мере заполнения полей
select — выбор текста в «textarea» и «input[type=text]» + метод «.select()»; если соберётесь разрабатывать свой WYSIWYG, то познакомитесь очень плотно
Работа с событиями в jQuery. Часть 5
Дата публикации: 2016-12-16
От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Мы уже рассмотрели события мыши и клавиатуры, пришла очередь узнать о событиях форм. Приступим.
С формами нам придется работать очень часто, поэтому знать и уметь использовать события форм в jQuery — практически обязательно. Я возьму произвольную форму и, чтобы она смотрелась более-менее хорошо, подключу CSS фреймворк Bootstrap. Код формы вы найдете в исходниках.
Первым событием будет событие focus. Как следует из названия, событие происходит в момент получения элементом фокуса, проще говоря, когда мы встали в то или иное поле формы. Пример:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Теперь при клике по любому полю input или select мы получим вывод сообщения в консоль. Соответственно, теперь вы можете выполнять нужный набор действий при получении тем или иным элементом формы фокуса.
Следующее событие, наоборот, отслеживает потерю фокуса элементом — это событие blur:
Следующее событие — select. Можно подумать, что событие связано с выпадающим списком формы, но это не так. Событие наступает при выделении текста в текстовых полях формы (textarea и input типов text, email и т.п.), т.е. в полях, где можно ввести текст и затем выделить его:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Событие change также будет достаточно полезным. Как следует из названия, событие change возникает в момент изменения элемента формы. Например, если мы изменим значение выпадающего списка, это вызовет событие change:
Также событие change произойдет и в том случае, если мы изменим любое другое поле. Например, введем текст в текстовое поле, а затем выйдем из поля (уберем фокус) или же отметим чекбокс, или наоборот, снимем отметку. Любое изменение — это событие change. Очень удобно по данному событию валидировать поля формы. Пользователь завершает ввод, переходит к следующему полю, а мы проверяем только что заполненное поле.
И последнее, но не менее важное на сегодня событие — submit. Это событие отправки формы. Достаточно популярное событие на сегодня, поскольку благодаря ему мы можем отменить отправку формы. Зачем нужно отменять отправку формы, спросите вы? Все просто. При отправке формы по умолчанию перезагружается вся страница. Если же мы не хотим полной перезагрузки, тогда можем отправить форму, используя AJAX. Для этого достаточно отменить дефолтное поведение при отправке формы, т.е. остановить отправку, собрать данные всех полей и отправить их без перезагрузки страницы.
Работаем с событиями в jQuery
В данном уроке будет рассказано, как использовать события в jQuery. События являются фундаментом для большинства веб приложений JavaScript. Используя события ваш код может реагировать на то, что происходит в браузере, например, на то, что пользователь нажал кнопку, ввёл текст в поле ввода, или отправил форму.
Данный урок не является полноценным руководством, но он включает в себя основы, которые нужны при написании большинства скриптов. Для реализации ваших идей вам может понадобиться полный список методов событий jQuery.
В данном уроке будут раскрыты следующие темы:
Что такое событие?
Событие в JavaScript (и jQuery) генерируется, когда что-то происходит с элементом на странице. В список общих событий входят:
click Генерируется, когда пользователь нажимает на элементе кнопку мыши dblclick Генерируется, когда пользователь делает двойной щелчок кнопкой мыши на элементе mouseover Генерируется, когда пользователь перемещает указатель мыши на элемент load Генерируется после того, как элемент, например, изображение, полностью загружен submit Генерируется, когда происходит отправка формы (данное событие генерируется только для элементов form )
Работаем с событиями
Существует много методов jQuery для привязки событий к обработчикам, но метод bind() является основным. Он принимает имя события и имя функции как аргументы и привязывает обработчик к событию для выбранного элемента (или элементов):
Затем, когда происходит событие, ваша функция-обработчик автоматически и событие обрабатывается так, как требуется.
Простой пример
Следующий пример показывает, как создать простой обработчик события и привязать его к событию click кнопки формы:
Короткие методы для связывания общих событий
Для облегчения жизни jQuery имеет много коротких методов для связывания часто используемых событий с функциями- обработчиками. Вот некоторые из них:
click( functionName ) Эквивалентно вызову bind( ‘click’, functionName ) dblclick( functionName ) Эквивалентно вызову bind( ‘dblclick’, functionName ) load( functionName ) Эквивалентно вызову bind( ‘load’, functionName )
Например, вы можете переписать вызов метода bind() в выше приведённом примере следующим образом:
Доступ к элементам из обработчика событий
Получение дополнительной информации о событии
Часто ваш обработчик не нуждается в дополнительных сведениях о событии, которое его запустило. Но если нужно больше деталей о элементе, который сгенерировал событие, можно использовать ключевое слово this как уже было описано ранее. Однако, jQuery может снабдить вас большим количеством информации о событии, если в этом есть необходимость.
Чтобы получить больше сведений о событии, ваш обработчик должен принимать объект jQuery event в качестве аргумента. В таком случае обработчик события может получить доступ к дополнительной информации с помощью различных методов и свойств данного объекта.
Следующий пример не только выводит сообщение, когда нажата кнопка, но и указывает точную дату и время, когда произошло событие, а также выводит координаты X и Y указателя мыши в это время:
Выше приведённый скрипт использует три свойства 3 объекта event :
timeStamp Время, когда произошло событие pageX Координата X указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа pageY Координата Y указателя мыши в момент нажатия на кнопку, по отношению к левому верхнему углу документа
Остановка действий по умолчанию и распространение событий
События в JavaScript имеют пару особенностей, о которых надо упомянуть:
Часто нужно предотвращать запуск действий по умолчанию и/или распространение событий. Например, если установлен обработчик события click для ссылки, который нужен для проверки правильности заполнения формы перед тем как покинуть страницу, то нужно предотвратить переход по ссылке, который выполняется по умолчанию.
Или если для родительского элемента и его потомков установлены одинаковые обработчики события click может понадобиться предотвратить запуск всех функций в одно и тоже время.
Объект jQuery event даёт вам пару методов для того, чтобы остановить такое поведение программы:
preventDefault() Останавливает выполнение действий по умолчанию stopPropagation() Останавливает «всплытие» события к родительскому элементу
Следующий пример открывает ссылку в новом окне, когда на неё нажимают, и использует метод preventDefault() чтобы остановить открытие ссылки в текущем окне:
Вы также можете остановить действие по умолчанию и распространение события просто вернув false из обработчика события.
Сброс обработчика события
Для удаления обработчика заданного события:
Принудительная генерация события
Иногда нужно запускать события для элементов прямо из кода. Например, нужно отправить форму автоматически, когда пользователь нажмёт на ссылку.
Метод jQuery trigger() генерирует определённое событие для выбранного элемента (или элементов). Имя события нужно передать trigger() в триггер в качестве аргумента.
В примере происходит отправка формы, когда пользователь нажимает на ссылку на странице:
Вы также можете сгенерировать событие с помощью тех же коротких методов, которые использовались для привязки событий (они описаны выше в нашем уроке). Просто вызовите короткий метод без каких-либо аргументов. Например:
Резюме
В данном уроке мы рассмотрели, как работать с событиями в jQuery:
События являются очень мощным и полезным инструментом, а в jQuery многое сделано для того, чтобы облегчить работу с ними.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.elated.com/articles/jquery-events/
Перевел: Сергей Фастунов
Урок создан: 10 Августа 2010
Просмотров: 106848
Правила перепечатки
5 последних уроков рубрики «jQuery»
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.