Event Modifier in Vue

In Vue, event modifiers are special directives that can be appended to event listeners to modify their behaviour.

They provide a convenient way to handle common scenarios such as preventing default browser behaviour, stopping event propagation, or executing event listeners only once.

Vue.js provides several built-in event modifiers that can be used with the "v-on" directive (or its shorthand @).

Overview of Event Modifiers:

Vue.js provides several event modifiers that can be appended to event bindings to modify their behaviour:

.stop: Stops event propagation.
.prevent: Prevents the default action of the event.
.capture: Adds an event listener in the capture phase.
.self: Only trigger the handler if the event was dispatched from the element itself.
.once: Trigger the event handler at most once.
.passive: Indicates that the handler will never call preventDefault(). A hint for optimizing performance.

.stop:

Stops the event propagation. Equivalent to "event.stopPropagation()".

Example:

<div @click.stop="handleClick">Click me</div>

.prevent:

Example:

// stop page reloading when form submit.
<form @submit.prevent="handleSubmit" > Submit Form </form>

or

// Stop anchor tag from navigating to other screen
// Add custom Behaviour
<a href="#" @click.prevent="handleClick" > Click me </a>

Prevents the default browser behaviour for the event. Equivalent to "event.preventDefault()".

Example:

<div @click.capture="handleClick" > Click me </div>

.capture:

Example:

<div @click.self="handleClick" > Click me </div>

Adds an event listener in the capture phase instead of the bubbling phase.

Example:

<button @click.once="handleClick" > Click me once </button>

.self:

Only triggers the event handler if the event target is the element itself, not its children.

.once:

Attaches an event listener that will only be executed once.

Example:

<input @keyup.enter="handleSubmit" />

.passive:

Example:

<div @click.left="handleLeftClick" > Left click </div>
<div @click.right="handleRightClick" > Right click </div>
<div @click.middle="handleMiddleClick" > Middle click </div>

Example:

<button @click.stop.prevent="handleClick" > Click me </button>

Indicates that the event listener will never call "event.preventDefault()". It's useful for improving scrolling performance.

Touch me

Key Modifiers:

Modifiers for keyboard events. For example, ".enter", ".tab", ".delete", ".esc", ".space", ".up", ".down", ".left", ".right".

Mouse Button Modifiers:

Modifiers for mouse events. For example, ".left", ".right", ".middle".

These event modifiers can be combined to achieve the desired behaviour.

Note:

Both the propagation of the event and the default browser behaviour will be prevented when the button is clicked.

<-- Methods

Computed Properties -->