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

In this article Xiaobian for you to introduce in detail "how to use the event object in Vue", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the event object in Vue" can help you solve your doubts.

What is an event object

Event object: represents the state of the event. For example, get the current element: e.Target.

Second, event bubbling

What is event bubbling? Baidu encyclopedia is explained as follows:

When an event occurs, the event begins to spread (from the inside to the outside or from the outside to the inside). Why spread it? Because the event source itself (probably) does not have the ability to handle the event, that is, the function (method) that handles the event is not bound to the event source. For example, when we click a button, a click event is generated, but the button itself may not be able to handle the event, and the event must be propagated from the button to reach the code that can handle the event (for example, we give the button's onclick property the name of a function to handle the button's click event), or the button's parent binds an event function When the click event occurs on the button and the button itself does not handle the event function, it is propagated to the parent for processing.

Perhaps the following example is easier to understand:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log (my div2);}, play3:function () {console.log (my div3) })} my div1, my div2, my div3

Effect:

In the above code, three div are bound to three different events. When you click "my div3"

So how to stop the event from bubbling?

1. The processing methods in the original JS

The code example is as follows:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log ("my div2");}, play3:function (e) {console.log ("my div3"); e.stopPropagation () })} my div1, my div2, my div3

Effect:

2. Processing methods in vue

The code example is as follows:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log (my div2);}, play3:function (e) {console.log (my div3); / / e.stopPropagation () })} my div1, my div2, my div3, my div4

Effect:

Clicking "my div4" will prevent the event from bubbling, but clicking "my div3" will not stop the event from bubbling.

The default action of the event

Take a look at the following code example:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log (my div2);}, play3:function (e) {console.log (my div3); / / e.stopPropagation () }, play4:function (e) {console.log ("I am a hyperlink") })} my div1, my div2, my div3, my div4 click

Effect:

Click "click" when you will find that the page jumped to Baidu, will not enter the play4 event, if the debugging code wants to enter the play4 event how to deal with it?

1. Use native JS processing

The code example is as follows:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log (my div2);}, play3:function (e) {console.log (my div3); / / e.stopPropagation () }, play4:function (e) {console.log ("I am a hyperlink"); / / cancel the default action of the event e.preventDefault () })} my div1, my div2, my div3, my div4 click

Effect:

When you click "click" here, you will not enter the home page of Baidu. Bubbling is not handled here, so play2 and play1 events are triggered.

2. Use vue to process

The code example is as follows:

Event bubbling _ window.onload=function () {/ / build vue instance new Vue ({el: "# my", data: {} / / method methods: {play1:function () {console.log (my div1) }, play2:function () {console.log (my div2);}, play3:function (e) {console.log (my div3); / / e.stopPropagation () }, play4:function (e) {console.log ("I am a hyperlink"); / / cancel the default action of the event / / e.preventDefault () })} my div1, my div2, my div3, my div4 Click click2

Effect:

After reading this, the article "how to use event objects in Vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow 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.