События jQuery

Регистрация и удаление обработчиков событий

События позволяют нам отследить изменение состояния элемента и обработать пользовательский ввод. Используя стандартный код JavaScript мы могли бы обработать событие прямо в разметке элемента с помощью соответствующих атрибутов. Например, обработаем нажатие кнопки:

<button onclick="alert('Привет мир');">Нажать</button>

Для обработки нажатия кнопки задаются некоторые действия, например, как в данном случае вывод сообщения.

Библиотека jQuery предлагает нам эффектный способ регистрации обработчиков событий у элементов с помощью метода bind.

Метод bind имеет следующий синтаксис: bind('тип_события', функция_обработчика_события). Например, обработаем нажатие кнопки с помощью jQuery:

<button class="redStyle">Нажать</button>
<script type="text/javascript">
$(function(){
	$('button').bind('click', function(){
		alert('Привет мир!');
	});
});
</script>

Используя в обработчике выражение $(this) мы можем получить элемент, на котором было произведено событие. Используя свойства элемента, можно задать более сложную логику обработки события. Например, пусть у нас на странице несколько кнопок, и действия в зависимости от нажатой кнопки будут различаться:

<button class="langs">Языки программирования</button>
<script type="text/javascript">
$(function(){
	$('button').bind('click', function(){
		if($(this).hasClass("langs")){
			$('body').append('<ul><li>Java</li><li>JavaScript</li></ul>');
		}
		alert('Обработчик события click');
	});
});
</script>

Таким образом, если у нас на странице несколько кнопок, то только в случае с одной по нажатию на нее будет добавляться на страницу список. В остальных случаях будет просто выводиться сообщение на экран.

Применяя метод bind, важно учитывать, что он добавляет обработчики для уже имеющихся элементов. К динамически добавленным элементам обработчики применяться не будут.

Метод unbind

Если по какой-то причине нам больше не нужно обрабатывать событие, то мы можем отменить регистрацию связанного с ним обработчика с помощью метода unbind:

	$('button').bind('click', function(e){
		alert('Привет мир!');
	});
	$('button').unbind();

Однократная обработка событий. Метод one

Метод one позволяет задать для элемента обработчик события, который будет срабатывать только один раз. После отработки произвойдет удаление обработчика:

<button>Жми1</button>
<button>Жми2</button>
<button>Жми3</button>
<script type="text/javascript">
$(function(){
	$('button').one('click', function(e){
		$(this).css('color', 'red');
		alert('Обработчик для кнопки: '+$(this).text());
	});
});
</script>

В результате обработчик каждой кнопки сработает по разу.