Types of Vue.js events that you can handle
You can handle a lot of other Vue.js DOM events besides click. Vue.js can handle any kind of web or mobile native events as well as custom events. The most common events that are generally used to be handled:
submit
keyup
drag
scroll
error
abort
mouseover
mouseout
load etc.
Event Handling Methods
Click Event
See the following example to demonstrate the click event handling in Vue.js.
Index.html file:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click = "displaynumbers">Click Me to Add No.</button>
<h2> Add Number 100 + 200 = {{total}}</h2>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: "#app",
data: {
num1: 50,
num2 : 100,
total : ''
},
methods : {
displaynumbers : function(event) {
console.log(event);
return thisthis.total = this.num1+ this.num2;
}
},
})
Let's use a simple CSS file to make the output more attractive.
Index.css file:
html, body {
margin: 5px;
padding: 0;
}
Example explanation
In the above example, we have assigned the following click event for the DOM element.
<button v-on:click = "displaynumbers">Click Me to Add No.</button>
When you click on the button, it will call the method 'displaynumbers', which takes in the event, and we see the output.
We can also assign a shorthand @ instead of v-on directive. You can call the following event, and the result will be the same.
<button @click = "displaynumbers">Click ME</button>
Mouseover and Mouseout Event
Now, let's check two new Vue.js events named mouseover & mouseout. See the following example.
Index.html file:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "databinding">
<div v-bind:style = "styleobj" v-on:mouseover = "changebgcolor" v-on:mouseout = "originalcolor"></div>
</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#databinding',
data: {
num1: 100,
num2 : 200,
total : '',
styleobj : {
width:"100px",
height:"100px",
backgroundColor:"red"
}
},
methods : {
changebgcolor : function() {
this.styleobj.backgroundColor = "blue";
},
originalcolor : function() {
this.styleobj.backgroundColor = "brown";
}
},
})
After the execution of the program, you will see the following output:
Output:
![Image description]
(https://www.debug.school/uploads/articles/lzs9sojmprvmym07msab.png)
Example explanation
In the above example, we have created a div element with width and height as 100px. The default background color of this div is red. On mouseover, the background color is changed to blue, and on mouseout, it is changed to brown.
During the mouseover, a method is called changebgcolor and once we move the mouse out of the div, a method is called originalcolor.
Here, we have used two events mouseover and mouseout and assigned them to the div. We have created a styleobj variable and given the required style to be assigned to the div.
The same variable is binded to the div using v-bind:style = "styleobj". In changebgcolor, we are changing the color to green using the following code.
changebgcolor : function() {
this.styleobj.backgroundColor = "blue";
}
Using the stylobj variable, the color is changed to green. Similarly, we used the following code to change color to brown
originalcolor : function() {
this.styleobj.backgroundColor = "brown";
Vue.js Event Modifiers
Vue.js provides some event modifiers available on v-on attribute. We can very easily call event.preventDefault() or event.stopPropagation() inside event handlers. Here, .prevent and .stop are event modifiers.
These modifiers are directive postfixes denoted by a dot. Following is the list of most common modifiers available on v-on attribute:
.once
.prevent
.stop
.capture
.self
.passive
The .once Event Modifier
It allows the event to execute only once.
Syntax:
<button v-on:click.once = "buttonclicked">Click Once</button>
You must add the dot operator while calling the modifiers as shown in the syntax above.
Let's see a simple example to understand the concept and working of the once modifier.
Example
Index.html file:
<html>
<head>
<title>Vue.js Event Handling</title>
<link rel="stylesheet" href="index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id = "eg_2">
<button v-on:click.once = "buttonclickedonce" v-bind:style = "styleobj">Just once clickable</button>
Output:{{clicknum}}
<br/><br/>
<button v-on:click = "buttonclicked" v-bind:style = "styleobj">Click Me anytime</button>
Output:{{clicknum1}}
</div>
<script src="index.js"></script>
</body>
</html>
Index.js file:
var vm = new Vue({
el: '#eg_2',
data: {
clicknum : 0,
clicknum1 :0,
styleobj: {
backgroundColor: '#2196F3!important',
cursor: 'pointer',
padding: '8px 16px',
verticalAlign: 'middle',
}
},
methods : {
buttonclickedonce : function() {
this.clicknum++;
},
buttonclicked : function() {
this.clicknum1++;
}
}
})
After the execution of the program, you will see the following output:
Output:
Top comments (0)