Directive v-on:

Passing arguments to the handler function:

a) forwarding only the event object

If we do not pass any argument as part of the directive, Vue.js automatically always passes “event object” in the background. Therefore, we can always use it and call it as part of the event handler method.

Example

See the Pen Vue event by Web programming (@chos) on CodePen.

b) argument passing

When we want to pass a parameter to the callback function, which is not an event object, we need to use the following syntax:

Example

See the Pen Vue passing argument to event handler by Web Programming (@chos) on CodePen.

c) Argument and event object forwarding

When we want to pass an “event object” to the callback function in addition to a specific parameter, we need to specify it with “$event”:

Event modifiers

Directive modifiers (eng. modifiers) are special postfixes that are added to the directive using a dot, and their existence indicates that the directive should be modified in a special way.

NOTE:
Event modifiers can be chained to each other <button @click.stop.prevent="doThis"></button>
Since they are executed in the order they are listed, you should pay attention to that.

.stop

When this modifier is added to the directive, it has the same functionality as if we called the event.stopPropagation() method in the event handler and thus prevented the propagation of the event

Example

See the Pen Stop modifier by Web programming (@chos) on CodePen.

.prevent

When this modifier is added to the directive, it has the same functionality as if we had called the event.preventDefault() method as part of the event handler.

Example

In this example, using the .prevent modifier, we prevent the form’s default behavior of submitting when clicking the “calculate” button. If this code did not use the “prevent” modifier, then immediately after clicking the button the page would be reloaded, because we are submitting the form. When the button is clicked, the event handler “calculate” would also be called, but the page would be reloaded, so you wouldn’t see the result. It should be clarified that the same functionality would be achieved without modifiers by inserting the code event.preventDefault(); at the beginning of the “calculate” method. However, using the modifier is simpler and just looking at the HTML makes it clear that the default behavior of the form is being prevented.

See the Pen Modifier on event directive v-on by Web programming (@chos) on CodePen.

Key modifiers

These modifiers allow the event handler function to be activated only if a specific button is used. The most commonly used key modifiers are:

1. .enter

2. .tab

3. .delete

4. .esc

5. .space

6. .up

7. .down

8. .left

9. .right

In addition to these “regular” keyboard buttons, system buttons are also often used:

10. .ctrl

11. .alt

12. .shift

13. .meta (on Macintosh ⌘ and on Windows ⊞)

Example

Example

In addition to the button name itself, we can also use their alias (Enter is 13):

Mouse modifiers

These modifiers are used to more clearly define the event related to the operation of the mouse, depending on the button used.

1. .left

2. .right

3. .middle

The default event for the left button is “onclick”, while the default event for the right button is “oncontextmenu”, the middle button has no default event type defined. In addition to the default events on all three buttons, “onmousedown” or “onmouseup” events can also be used. Since the default events don’t need to use modifiers, it follows that we only use mouse modifiers for the “onmousedown” or “onmouseup” events.

Example

Since the “onclick” event already uses the left key by default, it’s stupid to use this onemodifier on the “onclick” event, therefore we use the modifier only for one of the two possible events onmousedown:

.capture

By default, the order of event transmission is “bubbling” (the event is transmitted from the inside to the outside element), however, if we want to use the reverse direction of event transmission, the so-called “capturing” requires that we use the .capture modifier. Read more about the sequence of execution of events in the article “Events in JavaScript=u”

Example

In this example, although the event listener is embedded on the middle element, if we click on the inner element, it will activate the event because the event is forwarded from the outside to the inside because of the “capture” modifier. However, for the same reason, nothing will happen if the external element is clicked

See the Pen Vue Capture v-on modifier by Web programming (@chos) on CodePen.

.self

This modifier allows the event to be “triggered” only if the exact element on which the directive is clicked.

Example

In this example, it can be noticed that there is no bubbling or capturining event forwarding, and that the event will be “triggered” only on the element on which the directive (event listener) is defined, in this case only on the middle element.

See the Pen Vue event modifier self by Web programming (@chos) on CodePen.

.native

Vue.js has its own event system when it comes to components, called “custom events” (eng.custom events). This system is separated from standard (native) events in the browser, so Vue.js expects a custom click event, not a native event. Therefore, if we still need the browser’s native event type, then it is necessary to use the .native modifier on the v-on directive.

.once

When the .once modifier is added to a directive, then only one event can be fired on that element.

Create event behaves as if it is in the event options in the options section

defined value { once: true }. See more about this in the documentation in the article “EventTarget.addEventListener()”.

.passive

When the .passive modifier is added to a directive, it ensures that the preventDefault () method is never called on that element. Even if it ever happens, Vue.js will ignore it and generate a warning in the console.

Create event listener behaves likewhen the value { passive: true } is defined in its options part.

See more about this in the MDN documentation article “addEventListener()”.