Методы обработки событий

Все темы React Developer

В чем разница между методами event.preventDefault() и event.stopPropagation()?

Разница между event.preventDefault() и event.stopPropagation():

1. event.preventDefault():

   • Назначение: Предотвращает стандартное поведение браузера для события.

   • Пример:

     document.getElementById("myLink").addEventListener("click", function(event) {
         event.preventDefault(); // Отменяет переход по ссылке
     });

2. event.stopPropagation():

   • Назначение: Останавливает дальнейшее распространение события (всплытие или погружение).

   • Пример:

     document.getElementById("child").addEventListener("click", function(event) {
         event.stopPropagation(); // Останавливает всплытие события
     });

Итог:

• event.preventDefault(): Отменяет стандартное поведение события.

• event.stopPropagation(): Останавливает распространение события по DOM-дереву.

Как узнать об использовании метода event.preventDefault()?

event.defaultPrevented показывает, была ли успешно отменена стандартная обработка события. Вызов preventDefault() не меняет это свойство, если событие неотменяемое или обработчик passive.

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

document.getElementById("myLink").addEventListener("click", function (event) {
  event.preventDefault();
  console.log(event.defaultPrevented); // true
});

event.defaultPrevented показывает, была ли успешно отменена стандартная обработка события. Вызов preventDefault() не меняет это свойство, если событие неотменяемое или обработчик passive.