midVue.js
What is the difference between 'Event Bubbling' and 'Capturing' in Vue?
Updated May 4, 2026
Short answer
Bubbling (default) moves from child to parent; Capturing moves from parent to child.
Deep explanation
Vue uses the standard DOM event model. You can listen to an event in the capturing phase by adding the .capture modifier to the directive. This is useful for intercepting events before they reach the child elements.
Real-world example
A global click tracker that needs to log which area was clicked before any specific component logic fires.
Common mistakes
- Using `.capture` when you actually meant `.self` (which only triggers if the event was dispatched from that exact element).
Follow-up questions
- What does the .passive modifier do?