Shulou(Shulou.com)06/01 Report--

Vue how to use event modifiers, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can gain something.

1. DOM event flow

Sometimes, when we need to complete certain functions in the page, we need to use v-on instructions on the page elements that need to implement the function to listen for DOM events. In the html4 era, how browsers determine which part of the page will have specific events, the IE and Netscape development teams put forward two diametrically opposed concepts. This difference also makes us need to consider how to handle the event details of DOM when writing code. To solve this problem, vue provides us with event modifiers that make our methods purely data logic, rather than dealing with DOM event details.

Some involve concepts:

1. Event: an action set by the user or performed by the browser itself. For example, click (click), load (load), mouseover (mouse over), change (change), etc.

2. Event handler: a function method built to implement the function of an event, also known as an event listener

3. DOM event flow: describes the order in which events are received from the page, and can also be understood as the order in which events are propagated in the page

There are three stages in the DOM event flow: the event capture phase, the target phase, and the event bubbling phase.

Event capture (event capture): when the mouse clicks or triggers the DOM event, the browser propagates the event from the outside to the inside from the root node, that is, clicks on the child element. If the parent element registers the corresponding event through the event capture method, the event bound by the parent element will be triggered first.

Event bubbling (event bubbing): when the mouse clicks or triggers the DOM event, the browser propagates the event from the inside to the outside from the root node, that is, if the child element is clicked, the event bound by the child element is triggered first, and gradually spread to the event bound by the parent element.

The IE and Netscape development teams we mentioned earlier put forward two diametrically opposed event flow concepts. IE takes the event bubbling flow, while the standard browser event flow is the event capture flow. So, in order to be compatible with IE, we need to change some writing methods.

Event modifiers

1. .stop: prevent the event from bubbling

In the following example, we create a click event for button and a click event for div outside. According to the bubbling mechanism of the event, we can see that when we click the button, it will spread to the parent element, thus triggering the click event of the parent element. The specific results are shown in the following figure:

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

fourteen

fifteen

sixteen

seventeen

eighteen

nineteen

twenty

Var vm = new Vue ({

El:'# app'

Data: {}

Methods: {

DivHandlerClick () {

Alert ('I am the click event of div!')

}

BtnHandlerClick () {

Alert ('I am the click event of button')

}

}

});

At this point, if we don't want event bubbles, we can use Vue's built-in modifiers to easily prevent event bubbles. Because we are bubbling the event after clicking on button, we just need to add the stop modifier to the click event of button. The example code is as follows.

one

2. Default: block the default event

It is also easy to understand that there are events in some tags, such as the jump of the a tag, the submission event of the submit button in the form form, and so on. At some point, we only want to execute the events we set by ourselves. At this time, we need to prevent the execution of the default event of the tag. We can use the preventDefault method to achieve the native js, while in Vue, we only need to use the prevent keyword.

In the following example, we add a click event for the a tag, and because the a tag itself has a default jump event, when we click, we will eventually execute the default event for the a tag.

one

two

three

four

five

six

seven

eight

nine

ten

eleven

twelve

thirteen

Link jump

Var vm = new Vue ({

El:'# app'

Data: {}

Methods: {

AHandlerClick () {

Alert ('I am the click event of the a tag')

}

}

});

In Vue, when we want to block the default event of an element, we only need to use the prevent modifier after the bound event, as shown in the sample code.

one

Link jump

3. .capture: use event capture mode when adding event listeners

In the above study, we learned that the event capture mode and the event bubble mode are a pair of opposite event handling processes. When we want to change the event flow of the page element to the event capture mode, we only need to use the capture modifier on the event of the parent element, which is the code of the above example, when we use the capture modifier on the click event bound by div. The first thing we trigger when we click the button is the outermost div event.

one

two

three

four

five

4. .self: triggers handlers only when event.target is the current element itself (such as events triggered by events that are not caused by child element bubbles)

In the above example, we bound a click event for div, and our intention may have been to trigger this event only when we clicked on div, but the actual situation is event bubbling or event capture will trigger this event, which is not consistent with our original intention. In Vue, we can use the self modifier to modify the event so that it is triggered only when we want to trigger it.

one

two

three

four

five

5. Once: the event is triggered only once

When we just want the bound event to be triggered only the first time, we can use the once modifier to modify the bound event. For example, in the following code, the binding event is triggered only on the first click, and none of the subsequent clicks are triggered.

one

6. .passive: the default behavior of the scrolling event (that is, the scrolling behavior) will be triggered immediately

When the page scrolls, the browser triggers scrolling after the entire event has been handled, because the browser does not know whether the event was called event.preventDefault () in its handler, and the passive modifier is used to further tell the browser that the default behavior of this event will not be canceled, that is, the use of the passive modifier indicates that bound events will never call event.preventDefault ().

Summary

1. When using modifiers, order is important; the corresponding code is generated in the same order. Therefore, using v-on:click.prevent.self will block all clicks, while v-on:click.self.prevent will only block clicks on the element itself.

2. Do not use .passive with .passient, because .passient will be ignored and the browser may show you a warning. Remember,. Passive will tell the browser that you do not want to block the default behavior of the event.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.