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.
.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 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 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 allows the browser to behave by default. It is the opposite of the
.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>
<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.
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.