What are Event Modifiers in Vue.js?

Last updated on October 8, 2022

Event handling is an important aspect of building a dynamic website for every front-end developer. Event handlers verify user actions, user input, and browser actions.

For example, a requirement needs to prevent the browser’s default behavior on click events such as a form submission default behavior reloading the page. But as per requirement, a form should be submitted without the page reloading.

Another case is a method that needs to be executed on the click event of an anchor tag without any going to the URL. This kind of situation can be handled with event handlers.

<button @click.once="alert("testing...")">Click</button>
<button v-on:click.once="alert("testing...")">Click</button>

In Vue JS, events can be listened to through directives like v-on and a shortened version with @ symbol. The above examples work in the same way. In this example on click event, it shows an alert box for the first time only and will never show again. It means the event modifier .once prevents the event from firing and stopping the execution of the alert box method in the DOM(document object module).

Vue JS provides event modifiers using v-on directives. We can call theme directive postfixes denoted by a dot.

.once
.self
.stop
.prevent
.capture
.passive

There are many DOM events that can be handled in Vue JS or Vanilla JavaScript.

.self Event

.self event modifier executes the method on click when the same element clicked in nested elements. It triggers the handler if the event target is the element itself and not from a child element. In the below example if we click without using .self on the outer and inner elements then the click event will fire in the parent element, not the child element. This kind of task can be handled with the .self event modifier.

<div id="example">
  <article @click.self="outer">
    <section @click.self="inner">
      <button @click="button">click</button>
    </section>
  </article>
</div>

.stop Event

.stop event modifier use to prevent the parent method from execution on click.

<div id="app">
  <div @click="outerMethod()" id="example">
    <!-- Use the .stop modifier to prevent the outer method from firing -->
    <a @click.stop="innerMethod()">Click here!</a>
  </div>
</div>

In the above example, if you click on anchor it runs innerMethod only. Without the .stop event modifier when clicking on the anchor element it will run the parent element method outerMethod. So .stop resolves this kind of issue.

.prevent Event

.prevent event modifier stops the default behavior of the browser.

<a href = "http://www.google.com" @click.prevent = "clickme" target= "_blank" >Click Me</a>

In the HTML, the anchor redirects the user to provided URL. but in the above example, .prevent modifier prevents the browser from redirection. But it will execute the method event on the click event.

.passive Event

.passive allows the browser to behave by default. It is the opposite of the preventingDefault() method in javascript. .passive cannot use with .prevent at the same time.

.capture Event

.capture event modifier helps to change the bubbling sequence,

<div class="outer" @click.capture="outer"> 
　　　　<div class="middle" @click.capture="middle"> 
　　　　　　<button @click="inner">click here</button>
    　　</div>
    </div>

In the above example button is nested with two divs and all three elements including the button have JavaScript methods (outer, middle, inner). At the click of a button, all three methods run within a sequence in the capturing mode. As per the rule, on click of the button in capturing mode top element which has the same event modifier will be run first So, As per the above case, methods will be running in the below sequence.

Outer
Middle
Inner

<div class="outer" @click.capture="outer"> 
　　　　<div class="middle" @click="middle"> 
　　　　　　<button @click.capture="inner">click me(^_^)</button>
    　　</div>
    </div>

In the above example, we have changed the case. .capture event modifier works on the button(inner) and then the parent element(Outer). So on click event, the first outer function will be run, and then the rest functions which are inner and middle.

Conclusion

Vue.js provides event modifiers that help to handle many things related to events. In this article, we have explained what are event modifiers in Vue.js with examples. If you would like to learn more about it then check out our Vue.js page.

Written by

Ayaz Ali Shah

I am a skilled full-stack developer with extensive experience in creating and deploying large and small-scale applications. My expertise spans front-end and back-end technologies, along with database management and server-side programming.

Share on: