Использование нескольких обработчиков событий

В качестве примера давайте напишем довольно простой код для валидации поля формы с e-mail. Если пользователь не указал свой e-mail адрес, то он увидит сообщение об ошибке. Как только он укажет его, сообщение об ошибке исчезнет.

Этот пост именно об использовании событий JQuery, поэтому ничего лишнего вы не увидите.

Поле E-mail можно (нужно!) проверять ещё и на правильность заполнения.

Итак, после того, как снимается фокус с поля input #email, будет выполняться функция проверки.

$('#email').blur(function(){
	if($(this).val() == ''){
	// если поле не заполнено, вывод сообщения об ошибке
		} else {
	// скрываем сообщение об ошибке (если оно отображено)
		}
	});

Но что делать, если мы хотим также проверять значение поля при нажатии клавиши? Правильным ли будет добавление ещё одной такой же функции, но только привязка её к событию keyup?

$('#email').keyup(function(){
	// функция проверки
	});

Нет конечно 🙂 Ведь можно объединить несколько обработчиков событий в один при помощи bind.

$('#email').bind('blur keyup', function(){
	if($(this).val() == ''){
	// если поле не заполнено, вывод сообщения об ошибке
		} else {
	// скрываем сообщение об ошибке (если оно отображено)
		}
	});

Событий может быть сколько угодно, главное перечисляйте их обработчики через пробел.

Миша

Недавно я осознал, что моя миссия – способствовать распространению WordPress. Ведь WordPress – это лучший движок для разработки сайтов – как для тех, кто готов использовать заложенную структуру этой CMS, так и для тех, кто предпочитает headless решения.

Сам же я впервые познакомился с WordPress в 2009 году. Организатор WordCamp. Преподаватель в школах Epic Skills и LoftSchool.

Если вам нужна помощь с вашим сайтом или может даже разработка с нуля на WordPress / WooCommerce — пишите. Я и моя команда сделаем вам всё на лучшем уровне.