Preventdefault – защита вашего сайта от нежелательного поведения пользователей

preventDefault() - это метод объекта Event, который позволяет отменить стандартное поведение браузера при возникновении события. Обычно, когда пользователь взаимодействует с элементами на странице, браузер автоматически выполняет некоторые действия, связанные с этим элементом. Например, если пользователь нажимает на ссылку, то браузер переходит по этой ссылке на другую страницу. Если же мы хотим избежать этого поведения и выполнить свои действия, то применяется метод preventDefault().

Пример использования preventDefault() на JavaScript:

HTML:

Нажми меня

JavaScript:

const link = document.getElementById('link');
link.addEventListener('click', function(event) {
  event.preventDefault();
  console.log('Клик на ссылке!');
});

В данном примере применен метод preventDefault() для ссылки, которая имеет пустой атрибут href. При клике на ссылку в консоль будет выведено сообщение "Клик на ссылке!", а стандартное действие браузера не будет выполнено.

Также можно использовать метод preventDefault() для отмены стандартного действия формы при отправке. Например:

HTML:

  
  Отправить

JavaScript:

const form = document.getElementById('form');
form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('Форма отправлена!');
});

В данном примере при отправке формы метод preventDefault() отменяет отправку данных на сервер и выводит сообщение в консоль.