vue.js gets the current click object method instance

Friends who are familiar with jquery should know how crude it is to get the currently clicked object with jquery. Directly $(dom) gets the currently clicked dom element. Based on this, you can get almost all the attributes of this dom element. But what about when we use vue?

Maybe you will be a little confused at first. well? Yes, how can I use Vue to make the (Dragon-Slaying Sword) click and send it away... Oh no, click to get which element object I clicked? It's actually very simple, vue.js, isn't it still javascript? We can also pass $event events through click events.

Let’s take a look at the introduction to event standard attributes in the JavaScript document:

Attributes	Description
bubbles	Returns a Boolean value indicating whether the event is a bubble event type.
cancelable	Returns a Boolean value indicating whether the event can have a cancelable default action.
currentTarget	Returns the element whose event listener triggered this event.
eventPhase	Returns the current phase of event propagation.
target	Returns the element that triggered this event (the target node of the event).
timeStamp	Returns the date and time the event was generated.
type	Returns the name of the event represented by the current Event object.

Let’s take a look at the third property first:

currentTarget: The currentTarget event property returns the node whose listener triggered the event, that is, the element, document or window that currently handles the event.

In layman's terms, it means which element your click event is bound to, and currentTarget gets that element.

Let’s look at the fifth attribute:

target: The target event attribute can return the target node of the event (the node that triggered the event), such as the element, document or window that generated the event.

In layman's terms, it means which element you are currently clicking on, which element the target gets.

Maybe you still don’t understand it. Let’s use vue as a small example:

Template code:

<li v-for="img in willLoadImg" @click="selectImg($event)">
    <img class="loadimg" :src="img.url" :data-id="img.id"  alt=""></li>

We have bound a li tag Click event selectImg(), passing in the $event object. (Here we loop through an image array to show better effects. If necessary, please define the array and its corresponding images yourself. Don’t just copy the code completely and ask me why I reported an error)

Event method code:

methods: {
    selectImg(event) {
            console.log(event.currentTarget);
            console.log(event.target);
    }
}

Template rendering:

Similarly, in order to demonstrate the effect, we chose two vertically longer ones The image has been centered left and right. (Everything within the gray border belongs to the li tag)

Next, we click on the blank area first (that is, only click on the li tag, not the img image):

# # Console output:

Let’s expand and take a look:

We found that currently In the click event, both currentTarget and target obtain the complete li. There seems to be no difference.

Let’s click on the middle picture area again:

Console output:

We found , under the current click event, currentTarget obtains the complete li, while target obtains only the complete img tag.

I believe friends have already seen the difference:

Our event is bound to the li tag, whether we only click on the li tag or click on the child img image under the li tag , the currentTarget attribute gets the element to which our event is bound (that is, the li tag), and the target attribute gets the element we clicked.

Okay, after understanding this, I believe everyone will be able to quickly implement the function of obtaining the current clicked object in their own projects, and will no longer be confused about whether I use currentTarget or target, and will no longer be confused. Why does the click object I get seem to be wrong and cannot meet my needs.

Some people may also ask, it is useless to obtain the current clicked object. What is more needed in actual projects is to obtain the properties of the object. . . . . . . . . . . . . . . . Well, now that we understand that vue is actually still javascript, is it difficult to get object properties?

Related recommendations:

jquery gets the value method of the currently clicked object_jquery

The above is the detailed content of vue.js gets the current click object method instance. For more information, please follow other related articles on the PHP Chinese website!