event handling

33 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Keyboard event key modifiers

When listening for keyboard events, Vue allows adding key modifiers for v-on or @ when listening for key events. You can use any valid key name exposed via KeyboardEvent.key as modifiers by converting them to kebab-case. Example: `<input @keyup.page-down="onPageDown" />` triggers only if $event.key equals 'PageDown'. Example: `<input @keyup.enter="submit" />` triggers only if the key is Enter.

Vue key aliases for common keyboard keys

Vue provides aliases for commonly used keys: .enter, .tab, .delete (captures both Delete and Backspace), .esc, .space, .up, .down, .left, .right.

Inline event modifiers example

Inline event modifiers are applied directly in templates using the @ symbol with dots. Example: `<a @click.stop="doThis"></a>` uses the .stop modifier inline to prevent event propagation without needing to call event.stopPropagation() in the handler.

Mouse button modifiers

Vue provides mouse button modifiers: .left, .right, .middle. These restrict the handler to events triggered by a specific mouse button. .left, .right, and .middle represent main, secondary, and auxiliary pointing device event triggers respectively, not literal physical button positions.

.exact modifier for precise system modifier combinations

The .exact modifier allows control of the exact combination of system modifiers needed to trigger an event. `<button @click.ctrl="onClick">A</button>` fires even if Alt or Shift is pressed. `<button @click.ctrl.exact="onCtrlClick">A</button>` only fires when Ctrl and no other keys are pressed. `<button @click.exact="onClick">A</button>` only fires when no system modifiers are pressed.

Modifier keys behavior with keyup events

Modifier keys are different from regular keys. When used with keyup events, modifier keys must be pressed when the event is emitted. keyup.ctrl only triggers if you release a key while holding down ctrl. It won't trigger if you release the ctrl key alone.

System modifier key examples

Examples of system modifier keys: `<input @keyup.alt.enter="clear" />` for Alt + Enter, `<div @click.ctrl="doSomething">Do something</div>` for Ctrl + Click.

System modifier keys in Vue

Vue provides system modifier keys to trigger event listeners only when the corresponding modifier key is pressed: .ctrl, .alt, .shift, .meta. On Macintosh keyboards, meta is the command key (⌘). On Windows keyboards, meta is the Windows key (⊞).

v-on directive and @ shorthand for listening to events

The v-on directive listens to DOM events and runs JavaScript when they're triggered. The syntax is v-on:click="handler" or with the shorthand @ symbol, @click="handler". The @ symbol is typically used as the shorter form.

Two types of event handler values

Handler values can be one of two types: (1) Inline handlers are inline JavaScript executed when the event is triggered, similar to the native onclick attribute. (2) Method handlers are property names or paths pointing to a method defined on the component.

Inline handler example with count increment

In Composition API, use `const count = ref(0)` then bind with `<button @click="count++">Add 1</button><p>Count is: {{ count }}</p>`. In Options API, define `data() { return { count: 0 } }` with the same template. Inline handlers execute JavaScript expressions directly when triggered.

Method handler receives native DOM event automatically

A method handler automatically receives the native DOM Event object that triggers it. For example, you can access the element dispatching the event via event.target. The method is called with no arguments needed if you just reference the method name in the binding.

Method handler example with parameter access

In Composition API: `const name = ref('Vue.js'); function greet(event) { alert(\`Hello ${name.value}!\`); if (event) { alert(event.target.tagName); } }` then bind with `<button @click="greet">Greet</button>`. In Options API, use `this.name` inside the methods object. The event parameter receives the native DOM event.

Method vs inline handler detection

The template compiler detects method handlers by checking if the v-on value string is a valid JavaScript identifier or property access path. Examples treated as method handlers: foo, foo.bar, foo['bar']. Examples treated as inline handlers: foo(), count++.

Calling methods in inline handlers with custom arguments

Instead of binding directly to a method name, you can call methods in an inline handler to pass custom arguments instead of the native event. For example: `<button @click="say('hello')">Say hello</button>` calls the method with a specific argument.

Accessing native DOM event in inline handlers with $event

When calling methods in inline handlers, use the special $event variable to pass the native DOM event. Example: `<button @click="warn('Form cannot be submitted yet.', $event)">Submit</button>`. Alternatively, use an inline arrow function: `<button @click="(event) => warn('Form cannot be submitted yet.', event)">Submit</button>`.

Event modifiers in Vue

Vue provides event modifiers for v-on, which are directive postfixes denoted by a dot. The available event modifiers are: .stop, .prevent, .self, .capture, .once, .passive.

Event modifier examples and chaining

Event modifiers can be used individually or chained. Examples: `<a @click.stop="doThis"></a>` prevents propagation, `<form @submit.prevent="onSubmit"></form>` prevents page reload, `<a @click.stop.prevent="doThat"></a>` chains modifiers, `<form @submit.prevent></form>` uses modifier without a handler, `<div @click.self="doThat">...</div>` triggers only if event.target is the element itself.

Order matters with event modifiers

The order of modifiers matters because the relevant code is generated in the same order. @click.prevent.self prevents click's default action on the element itself and its children. @click.self.prevent only prevents click's default action on the element itself.

Event modifiers .capture, .once, .passive and native addEventListener

.capture uses capture mode when adding the event listener (an event targeting an inner element is handled before being handled by that element). .once triggers the handler at most once. .passive indicates the scroll event's default behavior will happen immediately instead of waiting for the handler to complete (in case it contains event.preventDefault()).

Do not combine .passive and .prevent modifiers

.passive and .prevent should not be used together because .passive already indicates to the browser that you do not intend to prevent the event's default behavior. Using them together will likely trigger a warning from the browser.

v-on shorthand syntax

The v-on directive has shorthand syntax using the @ character: <a @click="doSomething"></a> instead of <a v-on:click="doSomething"></a>.

v-on object syntax for multiple events

v-on also supports binding to an object of event/listener pairs without an argument using the syntax v-on="{ eventName: handler, eventName2: handler2 }". When using the object syntax, modifiers are not supported.

v-on directive shorthand and event handling

v-on attaches an event listener to an element. Shorthand: @. It expects a Function, Inline Statement, or Object (without argument). The argument is the event name (optional if using Object syntax). When used on a normal element, v-on listens to native DOM events only. When used on a custom element component, it listens to custom events emitted on that child component. When listening to native DOM events, the method receives the native event as the only argument. If using inline statement, the statement has access to the special $event property.

v-on event modifiers

v-on supports the following modifiers: .stop calls event.stopPropagation(); .prevent calls event.preventDefault(); .capture adds event listener in capture mode; .self only triggers handler if event was dispatched from this element; .{keyAlias} only triggers handler on certain keys; .once triggers handler at most once; .left only triggers handler for left button mouse events; .right only triggers handler for right button mouse events; .middle only triggers handler for middle button mouse events; .passive attaches a DOM event with { passive: true }.

Stateful methods in Options API

In some cases, you may need to dynamically create a method function, for example creating a debounced event handler. However, if a debounced function is shared among multiple component instances, they will interfere with one another because a debounced function is stateful.

Methods used as event listeners in templates

Inside a template, methods are most commonly used as event listeners. For example: `<button @click="increment">{{ count }}</button>` will call the `increment` method when the button is clicked.

Do not use arrow functions for methods

You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value. Arrow functions do not have their own `this` binding.

Vue automatically binds this in methods

Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback.

Methods example in Options API

export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { // methods can be called in lifecycle hooks, or other methods! this.increment() } }

Declaring methods in Options API

To add methods to a component instance in Options API, use the `methods` option. This should be an object containing the desired methods. Methods can be called in lifecycle hooks, other methods, or from templates.

Avoid arrow functions when declaring methods

Do not use arrow functions when declaring methods because arrow functions will not have access to the component instance via this.

methods are automatically bound to component instance

Declared methods can be directly accessed on the component instance or used in template expressions. All methods have their this context automatically bound to the component instance, even when passed around.

Give your agent this brain