Event Listeners & Handlers

document.querySelector('button').addEventListener('click', function(event) {
  event.stopPropagation();
  event.preventDefault();
});

stopPropagation prevents default behavior, preventDefault stops event bubbling
stopPropagation stops event bubbling, preventDefault prevents default behavior
stopPropagation() and preventDefault() serve different purposes: stopPropagation() stops the event from bubbling up to parent elements in the DOM tree, while preventDefault() prevents the default behavior associated with the event (like form submission or link navigation). They can be used independently or together depending on your needs. stopPropagation() is useful for controlling event flow, while preventDefault() is essential for custom handling of native behaviors.
They do the same thing
stopPropagation cancels the event, preventDefault modifies it