Skip to content

23_Events.md

Latest commit

 

History

History
46 lines (33 loc) · 1.39 KB

23_Events.md

File metadata and controls

46 lines (33 loc) · 1.39 KB

What is the difference between event bubbling and event capturing?

  • When the event is fired by a target element(ex. a button), the event is propagating every single parent elements.
  • To propagating the event from top to bottom in DOM - it calls Event Capturing Phase (Phase 1).
  • To propagating the event from bottom to top in DOM - it calls Event Bubbling Phase (Phase 2).

Syntax

document.addEventListener(event, function, useCapture)
  • userCapture: true: event capturing phase
  • useCapture: false (default): event bubbling phase

DOM example

Window
document
body
first
second
third
forth
button

What is difference between stopPropagation and preventDefaut?

  • propagate means to spread them to others.
  • Both - Stop event doing something.

stopPropagation

To stop event capturing phase or an event bubbling phase.

preventDefault

To stop the target event but event propagation work.
For example, if I' added preventDefautl for a checkbox, the checkbox doesn't checked but event bubbling phase or event capturing phase work after clicking.