event.stopPropagation()
stopPropagation stops the event from bubbling up the event chain or we can say it prevents the default action of the event from triggering. One thing to remember is that it does not stop the event propagation to parent DOM elements.
Ex
With stopPropagation only the buttons click handler is called and the divs click handler never fires.
event.preventDefault()
preventDefault prevents the default action the browser makes on that event or we can say that it orevents the default action of the event from propagating to parent DOM elements which stopPropagation does not.
Ex
In preventDefault only the browsers default action is stopped but the div's click handler still fires.
