События в jQuery (click, unbind, on, off, one, preventDefault)

Для обработки событий в библиотеке jQuery есть разнообразные методы.

Клик по элементу (click)

Простейшее событие - это клик левой кнопкой мыши. Это событие можно назначить на любой элемент с помощью метода click. В параметры этого метода необходимо передать функцию, которая будет происходить по клику. Внутри этой функции даже можно использовать this, который будет указывать на тот элемент, на который кликнули. Давайте попробуем привести пример, когда клик на любой, элемент, удовлетворяющий условию, приведёт к срабатыванию функции:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').click(function() {
      var a = $(this).html();
      alert( a );
   });
</script>

Если создать HTML страницу с таким примером и попытаться нажать на любой <div> контейнер, то появится всплывающее окно, в котором будет текст контейнера, на который кликнули:

Отвязать событие (unbind)

Бывают ситуации, когда необходимо удалить событие. Для этого используется метод unbind. Этот метод получает два параметра: название событие (к примеру, 'click') и название функции, которую надо отвязать. Модифицируем предыдущий пример, чтобы продемонстрировать метод unbind. Пусть при первом же вызове произойдёт отвязка:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').click(MyFunc);
   function MyFunc() {
      var a = $(this).html();
      alert( a );
      $(this).unbind('click', MyFunc);
   }
</script>

Как можно заметить, в примере мы разделили функцию и привязку для наглядности. То есть обозвали функцию "MyFunc" и вынесли её отдельно. Если загрузить страницу с таким кодом к кликнуть на любой <div> контейнер, то появится всплывающее окно с содержанием контейнера, на который кликнули (так же как и в предыдущем примере). Но затем произойдёт отвязка события с помощью unbind и повторные клики на этот элемент ни к чему не приведут.

Универсальный метод привязки (on)

Иногда удобнее вопспользоваться универсальным методом привязки on. Первым параметром ему передаётся название события, а вторым название функции (или сама функция) для привязки. Попробуем модифицировать один из предыдущих примеров, пользуясь этим методом:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').on('click', function() {
      var a = $(this).html();
      alert( a );
   });
</script>

Благодаря этому методу можно производить привязку нескольких методов одновременно, перечислив их через пробел в первом свойстве метода on. Давайте изменим пример и добавим помимо события по клику мышкой "click" ещё и событие на движение мышкой "mousemove":

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').on('click mousemove', function() {
      var a = $(this).html();
      alert( a );
   });
</script>

Универсальный метод отвязки (off)

Антонимом к методу on является универсальный метод отвязки off. Ему тоже необхоим передавать названия события для отвязки и названия функции, которую надо отвзязать. Попробуем модифицировать один из предыдущих примеров, пользуясь этим методом:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').on('click', MyFunc);
   function MyFunc() {
      var a = $(this).html();
      alert( a );
      $(this).off('click', MyFunc);
   }
</script>

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

Бывают случаи, когда необходимо сделать однократное событие. То есть событие, которое будет срабатывать только один раз. Делается это с помощью метода one (в преводе с английского "one" = "один"). Этот метод принимает те же самые праметры, что и метод on. Попробуем его:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').one('click', function() {
      var a = $(this).html();
      alert( a );
   });
</script>

Теперь если вызвать событие, то оно произойдёт только один раз, а потом отвяжется, как будто внутри функции стоит метод unbind.

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

На сайтах можно часто встретить метод preventDefault. Этот метод принудительно останавливает любую активность при выполнении стандартных процедур. К примеру, если его поставить на клик по ссылке, то во время клика не будет происходить перехода на другую страницу. Или если его поставить на обработку формы, то форма не будет отправлена. Продемонстрируем это с использованием ранее изученного метода on:

<form id="mouse" action="/" method="post">
   <input type="submit" value="Отправить">
</form>
<script>
   $('#mouse').on('submit', function(event) {
      event.preventDefault();
   });
</script>

- при попытке отправить такую форму не произойдёт ничего, потому что внутри функции стоит "event.preventDefault", который останавливает любые стандартные действия.