Deep dive into Vue event handling

When building a dynamic website, you need to listen for different types of events. To drive these types of interactions on our website or web application, we can use event handling.

There are several different ways to handle events in Vue, but the best solution will depend on the type of event you are listening to, how you want to react to the event, and what you hope to achieve with the event.

For example, if a user clicks a button, submits a form, or even just moves their mouse, you might add a reaction, like showing an animation or calling a function. Adding these types of events provides a rich UX for the end user.

In this article, we’ll cover the basics of handling events in Vue, and we’ll learn how to apply event handling in a real-world application. We’ll learn how to change or prevent an element’s behavior by listening to the event, intercepting it, and handling it using the methods described below.

To understand this tutorial, you should be familiar with events in JavaScript. Let’s get started!

Create inline events

First, let’s look at a common use case of event handling in Vue, creating inline events. With Vue’s native directive v-on, you can listen to the browser’s native DOM events. In the code block below, we’ll listen to a click event on a button, then change the button’s text:

<template>
  <div>
<button v-on:click='text="Clicked!"'>{text}</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',
  data: function () {
    return {
      text: "Click Me"
    }
  }
}
</script>

Alternately, we can call a function to show an alert using the v-on directive:

<template>
  <div>
<button v-on:click='showAlert'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',

  methods:{
  showAlert: ()=>{
    alert("Hola, buenos dia")
  }
  }
}
</script>

In both examples above, we added the v-on directive to the DOM element to intercept its event:

<button v-on:click="eventHandler"></button>

We also added an argument to the v-on directive, which is the name of the event we want to handle. In our case, the argument is click.

Next, we’ll bind an expression to the directive, which is typically a method you want to use to handle the event. We’ve called ours eventHandler and used a shorthand for the v-on directive:

<button @click="eventHandler"></button>

Common events in Vue

In our examples so far, we’ve listened to events occurring onclick. Let’s review a few other popular types of events:

Mouse events

• onclick
• ondragstart
• ondrop
• dblclick
• onmousedown
• onmouseup
• mouseover

Keyboard events

• onkeydown
• onkeypress
• onkeyup

HTML form and object events

• onchange
• onsubmit
• onreset
• onscroll
• onerror

There are more events described in the Vue documentation that you can choose from when designing your application. You should review and experiment with these to make sure your design is as intuitive as possible for the user.

Call elements on v-on

In Vue, you can use methods called on the element’s v-on directive, which will contain complex logic that will be executed whenever the event is fired. For example, let’s consider an alert fired onclick:

<template>
  <div>
<button v-on:click='showAlert("Hello, good morning")'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',
  methods:{
  showAlert: (message)=>{
    alert(message)
  }
  }
}
</script>

In the code block above, we pass a message to the showAlert method directly from the v-on directive. However, we could improve on this code by adding more context to the function. In the code block below, we’ll update the message displayed by showAlert by concating Hello with any text passed in the showAlert function:

<template>
  <div>
<button v-on:click='showAlert("Good Morning!")'>Show alert</button>
</div>  
</template>
<script>
export default {
  name: 'InlineEvent',

  methods:{
  showAlert: (message)=>{
    alert(`Hello, ${message}`)
  }
  }
}
</script>

Now that we know how to intercept and create a new event, let’s learn how to alter and prevent the default behavior of an event.

Modify and prevent events

In Vue, we can use event modifiers to change an event’s behavior or prevent the default event.

For example, let’s say we have a form containing a button. By default, if the user either clicks the button or presses the enter key, the form will be submitted and the page will be refreshed. In single page applications, we want to avoid fully reloading the page, so we’ll use AJAX to submit the form.

Prevent default behavior

To prevent an event’s default behavior, we can call the .prevent modifier in Vue, which calls the native event.preventDefault() method. This series of steps prevents the event from reloading the page after the form is submitted.

On the other hand, the .stop modifier halts the DOM event’s default behavior completely by calling event.stopPropagation(). For example, in the following code, we use the .stop and .submit modifiers on submit on the v-on directive:

<template>
  <div>
    <h2>Form</h2>
    <form
      v-on:submit.stop.prevent="log('clicked!', $event)">
      <button type="Submit">
        Click Me
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'EventModifier',
  methods: {
    log(msg, event) {
      console.log(event.target.tagName, msg);
    }
  }
}
</script>

Both methods perform a similar task and are used together. You can use .prevent to intercept the default behavior of a form and use .stop to prevent event bubbling on a parent element.

Change default behavior

To change the default behavior, let’s look at the example in the code block below. By default, when a user clicks on the Click Me link, they’ll see an alert. Then, Google will open in a new tab:

<a href = "http://www.google.com" v-on:click = "alert('Hola, buenos dias')">Click Me</a>

However, if we don’t want to open the link after showing the alert, we can use the .prevent modifier, as seen below:

<a href = "http://www.google.com" v-on:click.prevent = "alert('Hola, buenos dias')">Click Me</a>

The .prevent modifier prevents the link from opening and only executes the method assigned to the tag. Now, clicking the button will send an alert message without opening the link.

Additional event modifiers

In our examples, we used the .prevent modifier in Vue. Let’s take a look at a few other popular modifiers and their functions:

• .self : triggers event only if event.target is the element itself
• .once : prevents the event from executing more than once
• .keyup : listens to keyboard events
• .capture: handles events that target an inner element before handling the element that triggered the event

Key event modifiers

Key event modifiers in Vue offer extensive support for listening to the keyboard. For example, we can use key modifiers to listen to events where specific keys are pressed. Note that key names with multiple words are usually written in kebab case.

In the example below, we are listening to the enter key event:

<input type = "text" v-on:keyup.enter = "alert('Hola, buenos dias!')" />

When the input element above is focused, pressing the enter button will trigger the alert function.

The key event modifier follows the structure v-on.keyevent.keyname. You can also nest multiple key names like v-on.keyup.ctrl.enter.

Create custom events

In Vue, the parent component can pass data to its child components through the prop attribute, however, a child component cannot send data to the parent component. However, we can use $emit to make the parent component listen to the child component and allow the child component to pass data to the parent component.

In the example below, App.vue, which contains the parent component, is listening to Child.vue, the child component:

//App.vue (parent component)
<template>
  <div>
    <child @show-alert="updateAlert"> </child>
  </div>
</template>
<script>
import Child from "@/components/Child.vue";
export default {
  components: {
    Child,
  },
  methods: {
    updateAlert(item) {
      alert(item);
    },
  },
};
</script>

//Child.vue (child component)

<template>
  <div>
    <button class="Button" @click="emitAlert('Hello world')">Show alert</button>
  </div>
</template>
<script>
export default {
  methods: {
    emitAlert(item) {
      this.$emit("show-alert", item);
    },
    updateAlert(item) {
      alert(item);
    },
  },
};
</script>

Conclusion

Although event handling may seem straightforward, an incorrect or incomplete event handler could clutter your code or even break your application. In this tutorial, we learned about several different ways to handle events in a Vue application.

We covered adding inline events with the v-on directive and reviewed some of the different types of events we can use to customize our application. We also learned how to prevent or change an event’s default behavior using modifiers. Finally, we covered how to alter communication between our child and parent components using $emit.