Vue series event handling

“This article has participated in the call for good writing activities, click to view: the back end, the big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!”

I’m Kaomie, you can call me Kaomie, you can call me meomie, or you can call me Xiaomie. (Kill crazy kill crazy)

preface

It was several years ago that I read the official document of Vue for the first time, and I really read it carefully for the first time. Later, when I met something I forgot in my study and work, I would turn to the corresponding place and scan it for a few times, and I never read it completely and seriously again.

Recently do not forget the original intention to learn Vue, more and more taste more and more can not stop, or found a few interesting places, search and collect the content of interest in this record 📝.

DOM event flow

Must have seen the front end of the “little red book” er is not particularly strange to title, let’s look at the definition: when an HTML element to produce an event, the event will be in the DOM tree structure above spread along a path element node, the route taken by events that node receives the event, the communication process can be referred to as the DOM event stream.

2. DOM event flow model

DOM event flow is divided into capture event flow and bubbling event flow. The two event flows correspond to the capture stage and bubble stage in the three-stage DOM event flow model respectively:

Capture phase: Events are passed from the outermost ancestor node to the innermost descendant node
Target phase: The phase in which the actual target node is processing events
Bubbling phase: Events flow layer by layer from the innermost descendant node to the outermost ancestor node

Vue event processing

Vue provides syntax-sugar for event binding, so it’s easy to bind click events in the tag using @click=”handleClick($event)”.

Click =”handleClick($event)”;

Vue event modifiers

4.1 `.capture`

Capture listener

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff">Click here to</div>
    </div>
  </div>
</div>
Copy the code

The console displays 1 2 3 4 4 3 2 1

Following the DOM event flow model,.capture is used to fire events during the capture phase.

4.2 `.stop`

Blocking event delivery

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture.stop="log(3)" style="background-color: #ccf">
      <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff">Click here to</div>
    </div>
  </div>
</div>
Copy the code

The console displays 1, 2, 3

The real function of.stop is to prevent event flow, not only prevent capture event flow, but also prevent bubbling event flow.

The most common application scenario of.stop: for example, click the commodity list in the shopping cart on the mobile terminal to jump to the details of the commodity. There is a button to delete the commodity in the lower right corner of the commodity list. Click the button to delete the commodity. Suppose we normally listen for a click event. When we click the delete button, the delete event is triggered, but because the event bubbles, an event that jumps to the item details is triggered later. The conclusion is: add the.stop event modifier to the delete button listener event to avoid unintended consequences of event delivery.

4.3 `.prevent`

Prevent default event triggering: For example, some HTML tags have their own default events, such as a[href=”#”], button[type=”submit”] tags will start executing the default event after the bubble ends. Note that the default event, although started after bubbling, does not stop because the.stop event modifier prevents event delivery.

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture.stop="log(3)" style="background-color: #ccf">
      <a @click="log(4)" @click.capture="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to</a>
    </div>
  </div>
</div>
Copy the code

The console prints 1, 2, 3 x

The.stop event modifier does not prevent the default event in a[href=”#”] from firing.

<! Set.prevent to bubble stage -->
<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <a @click.prevent="log(4)" @click.capture="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to</a>
    </div>
  </div>
</div>

<! Bind.prevent to capture stage -->
<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <a @click="log(4)" @click.capture.prevent="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to</a>
    </div>
  </div>
</div>
Copy the code

The console displays 1 2 3 4 4 3 2 1

Both examples demonstrate that the result is the same whether you block the default event during the bubble phase or during the capture phase.

4.4 `.passive`

Don’t preventDefault event triggering: the browser won’t know whether the preventDefault function is called until the kernel thread reaches the event listener’s JavaScript code, so there’s no way the browser can optimize for this scenario. In this scenario, the user’s gesture events cannot be generated quickly. As a result, the page cannot execute the sliding logic quickly, which makes the user feel that the page is stuck. (In plain English, every time an event occurs, the browser should check whether it has preventDefault to prevent the event. We’re adding passive to tell the browser that it’s not necessary to query, and that we’re not preventDefault.

Application scenario: This function is generally used for the @scoll and @touchmove scroll listening. During the scroll listening process, each pixel is moved and an event is generated. Every time the kernel thread is used to query prevent, the slide is stalled. We skipped the kernel thread query through Passive to greatly improve the smoothness of the slide.

Note: Passive and prevent conflicts and cannot be bound to one listener at the same time.

4.5 `.self`

Events for an element are triggered only when the element itself is clicked.

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture.self="log(2)" style="background-color: #66f">
    <div @click.self="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <a @click="log(4)" @click.capture="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to</a>
    </div>
  </div>
</div>
Copy the code

Click the a label console and print the result:1 3 4 4 2 1 x
Click the layer 3 console and print:One, three, three, two, one

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <a @click.prevent.self="log(4)" @click.capturet="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to<div style="background-color: #ccc">5</div>
      </a>
    </div>
  </div>
</div>
Copy the code

Click the a label console and print the result:1, 2, 3, 4, 4, 3, 2, 1
Click on the layer 5 console and print:1, 3, 4, 3, 2, 1

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
  <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
    <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
      <a @click.self.prevent="log(4)" @click.capture="log(4)" href="javascript: console.log('x')" 
style="background-color: #fff">Click here to<div style="background-color: #ccc">5</div>
      </a>
    </div>
  </div>
</div>
Copy the code

Click the a label console and print the result:1, 2, 3, 4, 4, 3, 2, 1
Click on the layer 5 console and print:1 2 3 4 3 2 1 x(X is executed at the end because the default event is executed after the bubble ends)

Note: If self is written before prevent, prevent is affected by self. Prevent is triggered when you click directly on the target. Because Self intercepts the listener, prevent fails as well.

4.6 `.native`

Stereotype binding: This modifier is only used when using a VUE component.

< el-input@click. native=””> binds the event to the input[class=”el-input__inner”].

4.7 `.once`

Causes an element’s event to fire only once.

The listener bound to.once is fired only once and is removed after the first firing.

Refer to excellent articles

Event modifier
Vue event modifier (1).stop.capture
Vue event modifier (2).prevent. Passive
Vue event modifier (3).self concatenation
Vue event modifier (4).native. Once

preface

DOM event flow

2. DOM event flow model

Vue event processing

Vue event modifiers

4.1 .capture

4.2 .stop

4.3 .prevent

4.4 .passive

4.5 .self

4.6 .native

4.7 .once

Refer to excellent articles

Related Posts

[Security vulnerability] A brief analysis of the recent xyshell exploit chain

Use and principle of VueRouter

Reactv16.7: That’s right, we skipped