Сейчас мы с вами разберем, как привязываются события с помощью jQuery.

Отдельные методы для событий

Практически каждому событию JavaScript соответствует свой метод jQuery. К примеру, клик по элементам можно отловить так: $(селектор).click(функция).

Давайте сделаем так, чтобы по клику на любую li алертом выводился восклицательный знак:

<ul>
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
$('li').click(function() {
	alert('!');
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Внутри привязанной функции доступен this, ссылающийся на тот элемент, в котором произошло событие (в нашем случае на li, на которую был клик). Этот this можно использовать стиле JavaScript, например, this.innerHTML или в стиле jQuery - для этого этот this следует обернуть в $, вот так: $(this).

Давайте сделаем так, чтобы по клику на li ей в конец добавлялся восклицательный знак:

<ul>
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
$('li').click(function() {
	$(this).append('!');
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Список методов для привязки событий

Вот список методов jQuery, которые можно использовать для привязки событий: click, blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error.

Отвязывание событий

Привязанные события можно отвязать с помощью метода unbind. Он первым параметром принимает название события (например, 'click'), а вторым - имя ранее привязанной функции, которую следует отвязать.

Давайте сделаем так, чтобы по клику на li ей в конец добавлялся восклицательный знак, но только по первому клику. Для этого после срабатывания клика отвяжем от этого li функцию добавления (назовем ее func) с помощью unbind:

<ul>
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
$('li').click(func);
function func() {
	$(this).append('!');
	$(this).unbind('click', func);
}

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

В общем-то функцию можно не выносить отдельно, а просто дать ей имя прямо на месте:

<ul>
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
$('li').click(function func() {
	$(this).append('!');
	$(this).unbind('click', func);
});

Универсальный метод on

Для привязывания событий также можно использовать универсальный метод on. Первым параметром он принимает название события (например, 'click'), а вторым - функцию, которую следует привязать.

Перепишем код для li, который мы писали выше через метод on:

$('li').on('click', function() {
	$(this).append('!');
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Метод off

Отвязывание событий, привязанных через on, производится с помощью метода off. Первым параметром он принимает тип события (например, 'click'), а вторым - имя функции, которую следует отвязать.

Давайте сделаем так, чтобы после первого клика по li, событие от нее отвязывалось:

$('li').on('click', function func() {
	$(this).append('!');
	$(this).off('click', func);
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Несколько событий одновременно

Можно одновременно привязать одну функцию на несколько типов событий - для этого их нужно перечислить их через пробел: 'click mousemove и т.д.'. Смотрите пример:

$('li').on('click mousemove', function func() {
	какой-то код;
});

Делегирование

$('ul').on('click', 'li', function() {
	$(this).append('!');
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Однократное событие

В jQuery есть удобный метод one, который позволяет привязать однократное событие - оно выполнится только только один раз, а потом автоматически отвяжется. Этот метод первым параметром принимает тип события, а вторым - привязанную функцию.

В следующем примере к каждой li привязано однократное событие:

$('li').one('click', function() {
	$(this).append('!');
});

Понажимайте на пункты списка - вы увидите, как работает этот код:

  • пункт 1
  • пункт 2
  • пункт 3

Отмена действия по умолчанию

Как вы должны уже знать, действие пользователя на JavaScript отменяется с помощью event.preventDefault(). Давайте предотвратим отправку данных формы, а так же дальнейшее всплытие события:

$('form').on('submit', function(event) {
	event.preventDefault();
});

Можно также предотвратить только отправку данных формы (но не всплытие события) в стиле jQuery - для этого функция-обработчик события должна вернуть false:

$('form').on('submit', function() {
	return false;
});

Конечно же, можно отменять любое событие, например клик по ссылке:

$('a').on('click', function() {
	return false;
});