Event handling in Vuejs

Hello friends. Today I will continue the series about Vuejs. Specifically, I will introduce to you about Event handling in Vuejs.

• Listen to the event
• Mode of event handling
• Call inline method
• Event modifier
• Key modifier
  • Auto key modifier
  • System modifier keys
  • Modifier .exact
  • Modifier for mouse key
• Why listen for events in HTML

Listen to the event

We can use the v-on directive to listen for DOM events and execute JavaScript when these events are triggered. For example:

Mode of event handling

In fact, the logic for handling events is often more complex, so it is not feasible to include JavaScript directly in the v-on property’s value. That’s why v-on can also get the name of a method you want to call. For example:

Call inline method

Instead of binding methods directly, we can also call methods in a JavaScript statement:

Sometimes we also want to access the original DOM event from the inline JavaScript statement. You can pass a DOM event into the method via the $event variable:

Event modifier

In many cases, we need to call event.preventDefault() or event.stopPropagation() inside an event handler. While this is not difficult at all, it is better if the methods have to focus only on resolving the data logic instead of handling the DOM events.

To solve this problem, Vue provides event modifiers for v-on . Event modfier is a postfix for the directive, indicated by a period.

• .stop
• .prevent
• .capture
• .self
• .once

When using multiple modifiers at the same time, the join order is very important, because the code will be generated in that order. For example, @click.prevent.self will prevent all clicks and @click.self.prevent only prevent clicks on the element itself.

From version 2.1.4 onwards

Unlike other modifiers, which can only be used for native DOM events, the .once modifier can also be used for component events . If you have not read about the component, you can skip it and come back later.

From version 2.3.0 onwards

Vue also provides a .passive modifier, which corresponds to the passive option for addEventListener .

The .passive modifier is particularly useful for improving the performance of apps on mobile devices.

Do not use .passive and .prevent together, because .prevent will not take effect, and the browser may turn on the warning. Remember that .passive tells the browser that you don’t want to prevent event default behavior.

Key modifier

When listening to keyboard events, we often have to check the key code. Vue supports adding key modifier (modifer for key code) for v-on in these cases:

Of course if you have to remember all the keys, it’s very tiring, so Vue provides alias (aliases) for the most common keys:

The following is a complete list of key modifiers:

• .enter
• .tab
• .delete (used for both “Delete” and “←” keys)
• .esc
• .space
• .up
• .down
• .left
• .right

You can also define your own alias for the key modifier with the global object config.keyCodes :

Auto key modifier

2.5.0+

You can also use any valid key name as a modifier by switching to kebab-case:

In the above example, the onPageDown function is only called if $event.key === 'PageDown' .

A small number of keys ( esc and arrow keys) have inconsistent key values ​​on IE9. If you need to support IE9, you should use the above alias.

System modifier keys

From version 2.1.0 onwards

You can use the following modifiers to trigger events only when the corresponding modifier keys are pressed:

• .ctrl
• .alt
• .shift
• .meta

On Macintosh keyboards, meta is the Command key (⌘). On Windows keyboards, meta is the Windows key (⊞). On the Sun Microsystems keyboard, the meta is marked with a diamond (◆). On certain keyboard types such as MIT and Lisp keyboards, the meta is labeled “META”. On Symbolics keyboard, meta is labeled “META” or “Meta”.

For example:

The modifier keys behave differently than normal keys, and when used with a keyup event, the modifier key must be pressed when the event is fired. In other words, keyup.ctrl will only be activated when you release a key while pressing ctrl . This event will not be triggered if you just release the ctrl key alone.

Modifier .exact

2.5.0+

The .exact (correct) modifier can be used in conjunction with other modifiers to specify that the event handler should only be executed when the correct key / mouse combination is pressed.

Modifier for mouse key

From version 2.2.0 onwards

• .left
• .right
• .middle

These modifiers restrict processing to events triggered by a given mouse key (left, right, or middle).

Why listen to events in HTML?

You may be concerned that the entire event listener by placing the event listener in HTML like this violates the ” separation of concerns ” rule. Rest assured, since all of Vue’s event handling functions and expressions are strictly bound to the ViewModel, there will be no maintenance difficulties. In fact, using v-on has the following benefits:

1. Make locating the processing function in JavaScript code easier by skimming the HTML template.
2. Because not manually attaching event handlers in JavaScript, the code in the ViewModel becomes pure logic and independent of the DOM. This makes it easier to write tests.
3. When a ViewModel is destroyed, all attached event handlers are automatically removed without you having to clean up.

Here I have introduced you to Event handling and some basic concepts in Event handling VueJs. If you have any questions, please leave a comment below.

Refer

https://vuejs.org/v2/guide/events.html