Deep dive into Vue event handling

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

1. onclick
2. ondragstart
3. ondrop
4. dblclick
5. onmousedown
6. onmouseup
7. mouseover

Keyboard events

1. onkeydown
2. onkeypress
3. onkeyup

HTML form and object events

1. onchange
2. onsubmit
3. onreset
4. onscroll
5. onerror

Call elements on v-on

<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:

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