EasyDOM & Events📖 Theory Question

What is the difference between event.stopPropagation() and event.preventDefault()?

💡

Hint

stopPropagation=stop bubbling; preventDefault=cancel browser default action

Full Answer

  • stopPropagation() — stops event from bubbling to parent elements
  • preventDefault() — cancels browser default (link navigation, form submit) but still bubbles
  • stopImmediatePropagation() — stops bubbling + prevents other listeners on same element
link.addEventListener('click', (e) => {
  e.preventDefault();    // don't navigate
  e.stopPropagation();   // don't bubble up
  doSomething();
});

More DOM & Events Questions

EasyExplain event delegation and why it is useful.→EasyWhat is the difference between event bubbling and event capturing?→EasyHow do you create and dispatch Custom Events?→MediumWhat is MutationObserver and when do you use it?→

Practice this in a timed sprint →

5 free questions, no signup required

⚡ Start Sprint