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

Метод 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();
    // Код обработчика события
});