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

В качестве примера давайте напишем довольно простой код для валидации поля формы с 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 WooCommerce

Миша Рудрастых

Впервые познакомился с WordPress в 2009 году, и после двух лет мучений с Joomla и самописными движками это был просто бальзам на душу. С 2014 года меня можно встретить на WordCamp — официальной конфе по WP в Москве, иногда там выступаю. Также в настоящее время веду курсы по WordPress в Epic Skills в Питере.

Смотрите также