Vue 3 — Event Handling
Tags: vue, webdev, beginners, javascript
Published: 2020-10-17 01:03:23

---
title: Vue 3 — Event Handling
published: true
date: 2020-07-26 01:30:33 UTC
tags: vue,webdev,beginner,javascript
canonical_url: https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8aevent-handling-2/?utm_source=rss&utm_medium=rss&utm_campaign=vue-3%25e2%2580%258a-%25e2%2580%258aevent-handling-2
---
**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

Vue 3 is the up and coming version of Vue front end framework.

It builds on the popularity and ease of use of Vue 2.

In this article, we’ll look at how to handle events in Vue 3 components.

### Listening to Events

We can listen to events with the `v-on` directive, or `@` for short.

For instance, we can listen to clicks by writing:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button v-on:click="onClick">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick() {  
            alert("clicked");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We added the `v-on:click` directive to run the `onClick` method when we click the button.

So we should see an alert when we click the button.

To shorten it, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick() {  
            alert("clicked");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We can put any JavaScript expression as the value of the `v-on` directive.

### Methods in Inline Handlers

We don’t have to bind directly to the method in the expression we pass into `v-on` .

We can also call the method in there.

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick('hi')">hi</button>  
      <button @click="onClick('bye')">bye</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick(str) {  
            alert(str);  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

We pass in an argument to the `onClick` method so that `onClick` will get the argument and display the message.

To access the event object of the event, we can use the `$event` object.

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="onClick('hi', $event)">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          onClick(str, event) {  
            event.stopPropagation();  
            alert(str);  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

to pass in the `$event` object to our event handler.

Then we can call `stopPropagation` on it to stop the click event from propagation to parent elements.

This event object is the native event object.

### Multiple Event Handlers

We can have multiple event handlers in one expression.

For example, we can write:

```
<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <title>App</title>  
    <script src="https://unpkg.com/vue@next"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="one($event), two($event)">click me</button>  
    </div>  
    <script>  
      const vm = Vue.createApp({  
        methods: {  
          one(event) {  
            console.log("one");  
          },  
          two(event) {  
            console.log("two");  
          }  
        }  
      }).mount("#app");  
    </script>  
  </body>  
</html>

```

to run `one` and `two` as event handlers when we click on the button.

### Event Modifiers

We can add event modifiers so that we don’t have to call methods like `event.preventDefault()` or `event.stopPropagation()` in our event handlers.

The modifiers include:

- `.stop`
- `.prevent`
- `.capture`
- `.self`
- `.once`
- `.passive`

These are added to the `v-on` directive.

For example, to call `event.stopPropagation` in our event handler, we can write:

```
<a @click.stop="onClick"></a>

```

then the click event won’t be propagated to the parent elements.

And if we write:

```
<form @submit.prevent="onSubmit"></form>

```

`event.preventDefault()` will be called when running `onSubmit` .

Modifiers can also be chained, so we can write:

```
<a @click.stop.prevent="onClick"></a>

```

The `capture` modifier lets us use capture mode when adding an event listener.

And the `self` modifier only triggers the event handler if the `event.target` is the element itself.

`once` will only trigger the event handler at most once.

The `passive` modifier corresponds to the `addEventListener` ‘s `passive` option.

If we add it to the `@scroll` directive:

```
<div @scroll.passive="onScroll">...</div>

```

then the scroll event’s default behavior will happen immediately instead of waiting for `onScroll` to complete.

`passive` and `prevent` shouldn’t be used together since `prevent` will be ignored.

`passive` communicates to the browser that we don’t want to prevent the default browser behavior.

### Conclusion

We can listen to events with the `v-on` directives.

It makes many arguments and modifiers.

The post [Vue 3 — Event Handling](https://thewebdev.info/2020/07/26/vue-3%e2%80%8a-%e2%80%8aevent-handling-2/) appeared first on [The Web Dev](https://thewebdev.info).