в чем отличия event stoppropagation и event preventdefault в javascript

Аватар пользователя Maksim Litvinov
Maksim Litvinov
20 ноября 2024

Метод event.stopPropagation()

Метод event.stopPropagation() предотвращает дальнейшее всплытие события вверх по DOM (Document Object Model). Когда событие активируется на элементе, оно всплывает от этого элемента к его родителям и дальше вверх по DOM. Вызывая event.stopPropagation(), вы предотвращаете это всплытие. Это полезно, когда вам нужно остановить обработку события на каком-то конкретном элементе и избежать срабатывания обработчиков событий на его родителях.

document.getElementById('childElement').addEventListener('click', function(event) {
    event.stopPropagation();
    // Код обработчика события
});

Метод event.preventDefault():

Метод event.preventDefault() предотвращает стандартное поведение браузера, связанное с событием (например, переход по ссылке при клике на нее). Когда вызывается event.preventDefault(), браузер не будет выполнять стандартное действие, связанное с событием. Это часто используется для предотвращения перезагрузки страницы при отправке формы, открытия ссылки в новом окне и т.д.

document.getElementById('link').addEventListener('click', function(event) {
    event.preventDefault();
    // Код обработчика события
});
1 0