The event processing

If you need to access native DOM events in the associative sentence processor. You can use the special variable $event and pass it to a method in methods.

In Vue, event modifiers take care of a lot of the details of DOM events, freeing us from having to spend a lot of time dealing with annoying things and focusing on the logic of the program.

Event modifiers in Vue are:

.stop: equivalent to JavaScript event.stopPropagation() to prevent events from bubbling. prevent: It is the same as event.preventDefault() in JavaScript to prevent the preset behavior from being performed (if the event is cancelable, cancel the event without stopping further propagation of the event).capture: As opposed to the direction of event bubblers, events are captured from the outside in. Self: Only events within its own scope are fired, excluding child elements. Once: Only one event is firedCopy the code

. Stop Prevents events from bubbling

Bubble events: nested two or three layers of parent-child relationships, and then each layer has a click event. When the innermost child node is clicked, the click event from the inner child node to the outer child node -> parent node is triggered.

<! -- HTML --> <div id="app"> 
        <div class="outeer" @click="outer"> 
            <div class="middle" @click="middle"> 
                <button @click="inner"> click me (^_^) < / button > < / div > < / div > < p > {{message}} < / p > < / div >let app = new Vue({
    el: '#app'.data () { 
        return { message: 'Test bubbling Event' };
    }, 
    methods: { 
        inner: function () {
            this.message = 'Inner: This is the innermost Button' 
        }, 
        middle: function () { 
            this.message = 'Middle: This is the middle Div' 
        }, 
        outer: function () { 
            this.message = 'outer: This is the outer Div'}}})Copy the code

To prevent bubbling events, click on the event plus. Stop calls the equivalent of Event.stopPropagation () in each method. Clicking on the child does not capture the events of the parent.

<! -- HTML --> <div id="app"> 
    <div class="outeer" @click.stop="outer"> 
        <div class="middle" @click.stop="middle"> 
            <button @click.stop="inner"</button> </div> </div>Copy the code

. Prevent Cancels the default event

.prevent is the JavaScript equivalent of event.preventDefault() to cancel the default event.

Default events are actions that automatically occur when operations on the DOM are performed, such as redirecting the page when a hyperlink is clicked or reloading the page when a form submission button is clicked. Use the “. Prevent “modifier to prevent these events from happening.

<a href="http://www.baidu.com" @click.prevent="doSomething"></a>
Copy the code

Clicking the hyperlink at this point will not redirect the page.

. Capture Capture events

Catch bubbles, that is, when bubbles occur, the DOM elements with the modifier execute first and, if there are more than one, from outside to inside, and then execute the triggered events in their natural order.

Click on the innermost div and the result looks like this:

Multiple capture events:

Click the innermost result:

The self:

Binds an event to itself that only itself can fire, usually to avoid the effects of bubbling events.

Click on the innermost layer:

.once Performs only one click

If we add the.once modifier to the @click event, clicking the button will only happen once.

Keyboard modifier

In addition to the events described above, there are keyboard events in JavaScript events, and it is often necessary to monitor common key values.

Allows V-ON to add key modifiers when listening for keyboard events in Vue.

Remembering all keycodes can be difficult, so Vue provides aliases for the most common keyboard events:

TAB: TAB. Delete: contains delete and backspace. Esc: return keyCopy the code

Mouse modifier

The mouse modifier is used to restrict the handler from listening for a particular mouse key. Common ones are:

. Left: left mouse button. Middle: middle mouse wheel. Right: right mouse buttonCopy the code

Modifier keys

Mouse or keyboard event listening can be turned on with the following modifier to respond when a key is pressed:

.ctrl
.alt
.shift
.meta
Copy the code

### Custom keymodifier alias

You can customize key modifier aliases in Vue via config.keyCodes. For example, because keycode 116 (F5) has a pre-defined alias of F5, pressing F5 in the text input box triggers the prompt method and an alert appears.

<! -- HTML --> <div id="app">
    <input type="text" v-on:keydown.f5="prompt()">
</div>

Vue.config.keyCodes.f5 = 116;

let app = new Vue({
    el: '#app',
    methods: {
        prompt: function() {
            alert('I'm F5! '); }}});Copy the code

conclusion

In Vue, v-ON is used to bind events to elements, and Vue provides methods to better handle logical things.

Define methods in methods that help us with logical things. In this article, we mainly introduce some event modifiers, such as the common prevent event bubbling, keyboard modifiers and so on.

In addition, config.keyCodes provide custom keymodifier aliases.

From:

1, www.cnblogs.com/xuqp/p/9406…

2, blog.csdn.net/qq_29468573…