In Vue.js, just like in standard JavaScript, when you add an event listener, you can choose whether the listener runs during the capture phase or the bubble phase of event propagation.
How Event Flow Works
The browser handles DOM events in three phases:
- Capturing Phase: The event travels from the window down to the target element.
- Target Phase: The event reaches the target element.
- Bubbling Phase: The event bubbles back up from the target to the window.
By default, most event listeners run during the bubbling phase, not the capturing phase.
What is Capture Mode?
Capture mode refers to the capturing phase of the event flow. When you attach an event listener in capture mode, it means that listener will be triggered during the top-down journey of the event, before it reaches the target element and before the bubbling phase begins.
How to Use Capture Mode in Vue
In Vue templates, you can enable capture mode using .capture modifier:
<template> <div @click.capture="handleClick">
Click Me
</div>
</template>
<script setup>
function handleClick() {
console.log('Captured!')
}
</script>
What this does:
The handleClick will run during the capture phase, before any other non-capture click listeners on the same event.
Also Read: Best Vue.js Framework Of All Time
When Should You Use Capture Mode?
Most of the time, you don’t need capture mode.
You might use it when:
- You need to intercept an event before it reaches certain elements.
- You’re working with deeply nested components or custom event delegation.
- You want to stop an event before it hits the target’s own handlers.
Related Resources
