Why event bindings in vue do not follow the DOM standard event model

clipboard.png

< html lang= "en" >

< head >

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

< / head >

< body >

<!--  -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
    <div @click="div">
        <span @click="span">1231</span>

    </div>
</div>
<script>
    new Vue({
        el: "-sharpapp",
        data: {

        },
        methods: {
            span() {
                console.log("span");
            },
            div() {
                console.log("div");

            },
        }
    })
</script>

< / body >

< / html >
trigger span, first and then div

Mar.26,2021

Yes, if you need to monitor and capture, use @ click.capture


js processing events are all in the bubbling phase by default (so is vue), so span is triggered first and then triggered. In div,vue, events can be triggered during the capture phase through event modifiers

<div :click.capture="handleClick">...</div>
The

event is a bubbling mechanism. Click on the outer layer, trigger the inside first, and bubble to the parent. It's the same with dom.

Menu