Работа с событиями в jQuery. Часть 5

Работа с событиями в jQuery

От автора: приветствую вас, друзья. В этой статье мы продолжим изучение событий в jQuery. Мы уже рассмотрели события мыши и клавиатуры, пришла очередь узнать о событиях форм. Приступим.

С формами нам придется работать очень часто, поэтому знать и уметь использовать события форм в jQuery — практически обязательно. Я возьму произвольную форму и, чтобы она смотрелась более-менее хорошо, подключу CSS фреймворк Bootstrap. Код формы вы найдете в исходниках.

Работа с событиями в jQuery

Первым событием будет событие focus. Как следует из названия, событие происходит в момент получения элементом фокуса, проще говоря, когда мы встали в то или иное поле формы. Пример:

$('form input, form select').focus(function(){
 console.log('Focus!');
});

Теперь при клике по любому полю input или select мы получим вывод сообщения в консоль. Соответственно, теперь вы можете выполнять нужный набор действий при получении тем или иным элементом формы фокуса.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Следующее событие, наоборот, отслеживает потерю фокуса элементом — это событие blur:

$(function(){
 $('form input, form select').focus(function(){
  console.log('Focus!');
 }).blur(function(){
  console.log('blur');
 });
});

Следующее событие — select. Можно подумать, что событие связано с выпадающим списком формы, но это не так. Событие наступает при выделении текста в текстовых полях формы (textarea и input типов text, email и т.п.), т.е. в полях, где можно ввести текст и затем выделить его:

$(function(){
 $('form input, form select').focus(function(){
  console.log('Focus!');
 }).blur(function(){
  console.log('blur');
 }).select(function(){
  console.log('select');
 });
});

Работа с событиями в jQuery

Событие change также будет достаточно полезным. Как следует из названия, событие change возникает в момент изменения элемента формы. Например, если мы изменим значение выпадающего списка, это вызовет событие change:

Работа с событиями в jQuery

Также событие change произойдет и в том случае, если мы изменим любое другое поле. Например, введем текст в текстовое поле, а затем выйдем из поля (уберем фокус) или же отметим чекбокс, или наоборот, снимем отметку. Любое изменение — это событие change. Очень удобно по данному событию валидировать поля формы. Пользователь завершает ввод, переходит к следующему полю, а мы проверяем только что заполненное поле.

И последнее, но не менее важное на сегодня событие — submit. Это событие отправки формы. Достаточно популярное событие на сегодня, поскольку благодаря ему мы можем отменить отправку формы. Зачем нужно отменять отправку формы, спросите вы? Все просто. При отправке формы по умолчанию перезагружается вся страница. Если же мы не хотим полной перезагрузки, тогда можем отправить форму, используя AJAX. Для этого достаточно отменить дефолтное поведение при отправке формы, т.е. остановить отправку, собрать данные всех полей и отправить их без перезагрузки страницы.

Использование submit выглядит так:

$('form').submit(function(e){
 console.log('Отправка формы...');
 e.preventDefault(); // или return false;
});

Теперь при клике по кнопке отправки формы мы увидим в консоли соответствующее сообщение, сама форма при этом не отправляется.

Работа с событиями в jQuery

На этом сегодня все. Больше и jQuerу вы можете узнать из наших уроков или курса. Удачи!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree