Объект события и preventDefault

Каждый обработчик получает первым аргументом объект события — сведения о том, что произошло: на каком элементе, какая клавиша нажата. У него же есть методы, которые отменяют стандартное действие браузера и останавливают дальнейшую передачу события.

Свойства объекта события

<input id="title" placeholder="Нажмите клавишу">
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#title').on('keydown', function (event) {
    console.log(event.type, event.key);
  });
</script>

Нажимайте клавиши в поле: в выводе появляются строки вида keydown a и keydown Enter. Объект обычно называют event или коротко e.

jQuery оборачивает событие браузера в свой объект и копирует в него самые нужные свойства. Остальные доступны через originalEvent.

Добавление задачи по Enter

<input id="title" placeholder="Новая задача">
<ul id="tasks"></ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#title').on('keydown', function (event) {
    if (event.key === 'Enter') {
      $('#tasks').append($('<li>').text($(this).val()));
      $(this).val('');
    }
  });
</script>

Введите название и нажмите Enter: задача появляется в списке, поле очищается.

preventDefault: отменить действие браузера

У некоторых событий есть стандартное действие: ссылка открывает адрес, форма отправляется и перезагружает страницу. preventDefault() его отменяет:

<a href="/tasks/archive" id="archive">Архив задач</a>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#archive').on('click', function (event) {
    event.preventDefault();
    console.log('Переход отменён, показываем архив на этой же странице');
  });
</script>

Щелчок по ссылке не уводит со страницы, а только печатает сообщение.

stopPropagation: остановить всплытие

Событие всплывает: сначала срабатывают обработчики на самом элементе, потом на его родителях. stopPropagation() прекращает этот подъём:

<ul id="tasks">
  <li>Купить хлеб <button class="delete">Удалить</button></li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#tasks').on('click', 'li', function () {
    console.log('Щелчок по задаче');
  });
 
  $('#tasks').on('click', '.delete', function (event) {
    event.stopPropagation();
    console.log('Удалить');
  });
</script>

Щелчок по кнопке выводит только «Удалить», без «Щелчок по задаче».

return false

Если обработчик jQuery возвращает false, это то же самое, что вызвать и preventDefault(), и stopPropagation(). Так часто пишут в старом коде, но явные вызовы понятнее.

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

Объект события в addEventListener устроен так же, и методы preventDefault() и stopPropagation() у него те же. Но return false в обычном обработчике addEventListener ничего не отменяет.

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

Путать event.target и this. При делегировании $('#tasks').on('click', 'li', ...) щелчок по тексту внутри <span> даст event.target — этот span, а this — пункт li. Для работы с пунктом используйте this или event.currentTarget.