Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge points about how to distinguish between .capture and .self in vue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Distinguish between .capture and .self

Capture and self are mainly about the order of function execution.

.capture executes the parent function before the child trigger function (general usage)

That is, to add a listener to the element, and when the element bubbles, the element with the modifier is triggered first. If there is more than one such modifier, it is triggered from the outside to the inside.

one hundred and twenty three

When a child's div is clicked at this time, alert ('1') is executed first, followed by alert ('2')

Self is a function that executes only the child itself.

one hundred and twenty three

Clicking on the child's div will execute alert ('2') instead of alert ('1').

Modifiers capture and selfcapture

Role of the .capture event modifier use event capture mode when adding event listeners

That is, to add a listener to the element, and when the element bubbles, the element with the modifier is triggered first. If there is more than one such modifier, it is triggered from the outside to the inside.

That is, whoever has the event modifier will trigger first. (capture phase trigger, from outside to inside, without capture modifier, bubbling trigger from inside to outside)

.capture event modifier * {margin: 0 auto; text-align: center; line-height: 40px;} div {width: 100px;} # obj1 {background: deeppink;} # obj2 {background: pink } # obj3 {background: hotpink;} # obj4 {background: # ff4225 } obj1 obj2 obj3 obj4 var content = new Vue ({el: "# content" Data: {id:''}, methods: {doc (event) {this.id = event.currentTarget.id Alert (this.id)}) self

The callback is triggered only if the event is triggered from the listener bound element itself

.capture event modifier * {margin: 0 auto; text-align: center; line-height: 40px;} div {width:200px } box1 box2 box3 new Vue ({el:'#app', data: {}, methods: {test1 () {console.log ('box1');}, test3 () {console.log (' box3')) }) this is all the content of the article "how to distinguish between .capture and .self in vue". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.