Suggest an editImprove this articleRefine the answer for “What are event modifiers?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Event modifiers** are special suffixes (such as `.stop`, `.prevent`, `.once`) added to the `v-on` directive that let you change an event's behavior without writing extra JavaScript code. **Key point:** they automatically perform commonly used actions like `event.stopPropagation()` or `event.preventDefault()`, keeping the template cleaner.Shown above the full answer for quick recall.Answer (EN)Image**Event modifiers** are special suffixes (for example: `.stop`, `.prevent`, `.once`) that are added to the `v-on` directive and let you *change an event's behavior* without writing extra JavaScript code. In simpler terms: > **Event modifiers are a way to tell Vue exactly how to handle an event, automatically performing commonly used** `event.*` **actions.** They exist for convenience, template cleanliness, and reducing the amount of boilerplate code. --- ## What do event modifiers look like? ```html <button @click.stop="doSomething"></button> <button @submit.prevent="onSubmit"></button> <input @keyup.enter="search"> ``` --- ## Why are modifiers needed? They let you: - stop propagation (`stopPropagation`) - cancel default behavior (`preventDefault`) - make a handler fire only once - listen to events only on the element itself - work with keys - improve performance (passive) And all this without writing extra code: ```html <button @click="event.stopPropagation(); event.preventDefault(); doStuff()">...</button> ``` becomes: ```html <button @click.stop.prevent="doStuff"> ``` --- ## The main event modifiers ### 1. `.stop` Stops the event from propagating. ```html @click.stop ``` Equivalent to: ```js event.stopPropagation() ``` --- ### 2. `.prevent` Cancels the browser's default behavior. ```html @submit.prevent ``` Equivalent to: ```js event.preventDefault() ``` --- ### 3. `.once` The handler fires only once. ```html @click.once ``` After the first call, Vue removes the listener itself. --- ### 4. `.self` Fires only if the event came **from the element itself**, not from its children. ```html @click.self ``` --- ### 5. `.capture` Listens to the event during the **capture** phase (before propagation). ```html @click.capture ``` --- ### 6. `.passive` Creates a passive listener, useful for scroll handlers. ```html @scroll.passive ``` Improves performance. --- ## Key modifiers Applied to `keyup` / `keydown`: ```html @keyup.enter @keyup.esc @keyup.space @keyup.up @keyup.ctrl.enter ``` This also counts as an **event modifier**. --- ## Combining modifiers You can combine them: ```html @click.stop.prevent.once="save" ``` Order matters: Vue generates the handler in the order the modifiers are written. --- ## Where can't you use modifiers? - Inside components for arbitrary custom events (they only work with DOM events and system events)For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.