Home >Web Front-end >JS Tutorial >Detailed introduction to the use of Vue event modifier capture
The function of the capture event modifier is to add a listener to the element. When the element bubbles, the element with this modifier is triggered first. This article introduces you to the use of the Vue event modifier capture. Friends who need it can refer to it
. The function of the capture event modifier uses the event capture mode when adding an event listener
That is to add a listener to the element. When the element bubbles, the element with this modifier is triggered first. If there are multiple modifiers, they will be triggered from outside to inside.
That is, whoever has the event modifier will be triggered first.
The code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>.capture事件修饰符</title>
<style type="text/css">
* {
margin: 0 auto;
text-align: center;
line-height: 40px;
}
p {
width: 100px;
}
#obj1 {
background: deeppink;
}
#obj2 {
background: pink;
}
#obj3 {
background: hotpink;
}
#obj4 {
background: #ff4225;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<p id="content">
<p id="obj1" v-on:click.capture="doc">
obj1
<p id="obj2" v-on:click.capture="doc">
obj2
<p id="obj3" v-on:click="doc">
obj3
<p id="obj4" v-on:click="doc">
obj4
<!--。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。点击obj4的时候，弹出的顺序为：obj1、obj2、obj4、obj3；
由于1，2有修饰符，故而先触发事件，然后就是4本身触发，最后冒泡事件。
-->
</p>
</p>
</p>
</p>
</p>
<script type="text/javascript">
var content = new Vue({
el: "#content",
data: {
id: ''
},
methods: {
doc: function () {
this.id = event.currentTarget.id;
alert(this.id)
}
}
})
</script>
</body>
</html>The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.
Related articles:
About ajax requests in jquery (detailed tutorial)
EventLoop issues in JavaScript
Questions about vue form validation in element
How to use the picture magnifying glass plug-in in vue2.x?
How to configure the loader in vue?
How to build a development environment using vue vuex koa2
How to implement data update using jquery ajaxform springboot
The above is the detailed content of Detailed introduction to the use of Vue event modifier capture. For more information, please follow other related articles on the PHP Chinese website!