vue事件冒泡

先说冒泡，我们都知道水中有气泡的时候，气泡会从水底往上升，由深往浅的。但是水在上升的过程中会经历不同的深度的水。
那么我们再来解释一下什么是事件冒泡，如果属性浏览器原理的同学就知道，页面是由文档流（即dom树组成的），当我们在
一个时间触发的时候，这个事件就像这个气泡一样，从dom树的底层，一层一层的往上面传递，一直传递到dom的根节点，如果子元素和父级元素触发的是相同事件的时候，当子元素被触发的时候父元素也会被触发冒泡机制，这就是冒泡的基本原理。

在不同的内核浏览器中，冒泡是不一样的

IE<11： div => body => html => document

在其他内核中：div => body =>html => window

注意：在JavaScript中，并非所有的事件都可以冒泡，像：blur、unload、load等事件就不能冒泡

类似下面的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="app">
    <div @click="divClick">
        点击
        <button @click="btnClick">点击</button>
    </div>
    <div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data: {},
        methods: {
            btnClick() {
                console.log("按钮点击");
            },
            divClick() {
                console.log("div被点击");
            }
        }
    }
    )
</script>

点击按钮时输出：

1
2
按钮点击
div被点击