События: on и off

Событие — сигнал браузера о том, что что-то произошло: щелчок, ввод текста, отправка формы. Функцию, которая реагирует на событие, называют обработчиком. В jQuery обработчик назначают методом on().

Обработчик щелчка

<button id="add">Добавить</button>
<p id="counter">Задач: 0</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  let count = 0;
 
  $('#add').on('click', function () {
    count++;
    $('#counter').text('Задач: ' + count);
  });
</script>

Нажмите кнопку несколько раз: число в абзаце растёт. В проекте такой код лежит в script.js внутри $(function () { ... }).

Несколько элементов и this

Если в наборе несколько элементов, обработчик назначается каждому. Внутри функции this — элемент, на котором сработало событие:

<style>
  .done { text-decoration: line-through; color: gray; }
</style>
 
<ul>
  <li>Купить хлеб</li>
  <li>Позвонить Олегу</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('li').on('click', function () {
    $(this).toggleClass('done');
  });
</script>

Щелчок по пункту зачёркивает его, повторный щелчок снимает отметку.

Частые события

Одной функции можно назначить несколько событий через пробел: on('mouseenter mouseleave', fn).

Снятие обработчика

off() убирает обработчики. Чтобы снять конкретную функцию, её сохраняют в переменной:

<button id="add">Добавить</button>
<button id="lock">Заблокировать</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  function addTask() {
    console.log('Задача добавлена');
  }
 
  $('#add').on('click', addTask);
 
  $('#lock').on('click', function () {
    $('#add').off('click', addTask);
    console.log('Добавление выключено');
  });
</script>

После нажатия «Заблокировать» кнопка «Добавить» больше ничего не выводит. Вызов off('click') без функции снял бы все обработчики щелчка.

Один раз: one

Метод one() назначает обработчик, который сам снимется после первого срабатывания:

<button id="welcome">Показать подсказку</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#welcome').one('click', function () {
    console.log('Нажмите на задачу, чтобы отметить её выполненной');
  });
</script>

То же на обычном JavaScript

on() соответствует addEventListener(), off() — removeEventListener(), one() — addEventListener() с настройкой once: true.

Частая ошибка

Писать .click(fn), .submit(fn) и подобные короткие методы. Они встречаются в старом коде, но с jQuery 3.3 считаются устаревшими. В новом коде используйте on('click', fn) — эта запись работает и для делегирования из следующего урока.