Vue Event Modifiers

 Vue Event Modifiers

 What are Event Modifiers?

Event modifiers help you handle common event tasks like:

• Preventing default behavior

• Stopping event bubbling

• Running an event only once

• Handling keyboard and mouse actions cleanly

 Syntax:

 Core Event Modifiers

.prevent

Prevents default browser behavior.

•  No need for event.preventDefault().

.stop

Stops event propagation (bubbling).

•  Clicking the button will NOT trigger outer.

.once

Runs the event only one time.

•  Useful for payments, OTP send, confirmations.

.self

Triggers event only if the element itself is clicked.

•  Prevents clicks inside child elements.

.capture

Uses event capturing instead of bubbling.

•  Parent runs before child.

.passive

Improves scrolling performance.

•  Tells browser you won’t call preventDefault().

 Keyboard Event Modifiers

Common Keys

• .enter

• .tab

• .esc

• .space

• .up

• .down

• .left

• .right

 System Modifier Keys

Detect key combinations.

Available:

• .ctrl

• .alt

• .shift

• .meta

 Mouse Button Modifiers

 Exact Modifier

Trigger only when exact key combination is pressed.

•  Will NOT trigger if Shift/Alt is also pressed.

 Chaining Modifiers

You can combine multiple modifiers.

•  Prevents default + stops bubbling.

 Common Use Cases

• Prevent page reload on submit

• Stop nested click conflicts

• Keyboard shortcuts

• Modal close logic

• Performance optimization

 Summary Table

Best Practices

•  Use modifiers instead of manual JS
•  Keep templates clean
•  Don’t over-chain unnecessarily
•  Use .once for sensitive actions

Conclusion

Vue event modifiers make event handling clean, readable, and efficient.
Mastering them is essential for forms, modals, shortcuts, and performance-optimized UI.