Capturing Events

Event propagation is a central feature of modern-day JavaScript. At its core, event propagation helps us add general behavior to groups of DOM elements while still adding specific behavior to components that need it.

Vue lets us control event propagation with the help of event modifiers in the same way that we can control event propagation in Vanilla JS event listeners. Vue’s advantage is readability through minimal syntax and a central way of doing things.

Event propagation

What exactly is event propagation, though? Events can either bubble up or trickle down. The default state of an event is to bubble up to its parent until stopped from doing so. So, for example, a click event can be triggered by an input field and will also be listenable to its surrounding container—parent, form, and body in this order.