Vue 事件、事件冒泡和事件捕获

blockchain beginner

已于 2022-11-14 19:29:47 修改

阅读量3.7k

点赞数 1

文章标签： javascript 前端开发语言

于 2022-11-13 21:30:00 首次发布

本文链接：https://blog.csdn.net/qq_45783437/article/details/127829637

版权

什么是事件

JavaScript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。

常见的有加载事件、鼠标事件

事件的三阶段

事件捕捉阶段(capture phrase): 先由文档的根节点document往事件触发对象，从外向内捕获事件对象
处于目标阶段(target phrase): 到达目标事件位置，触发事件本身的程序内容
事件冒泡阶段(bubbling phrase): 从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象

事件冒泡和事件捕获分别由微软共色和网景公司提出,是为了解决页面中事件流(事件发生顺序)的问题

事件冒泡

事件冒泡是微软提出的事件流,可以形象的比喻为烧开的热水,泡泡会从底部向上冒出水面(即时间会从最内从的元素开始发生,一直向上传播,直到document对象)

故在事件冒泡的概念下载button按钮发生click事件的顺序应该是 button→div→html→doncument

事件冒泡案例

//div样式   
 <style>
        .father {
            width: 200px;
            height: 200px;
            background: red;
        }
        .son{
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
//绑定点击事件
    <div id="app">
        <div class="father" @click="fatherfun">父
            <div class="son" @click="sonfun">子</div>
        </div>
    </div>
    <script src="../../../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{},
            // 事件
            methods:{
                fatherfun(){
                    console.log('fatherdiv');
                },
                sonfun(){
                    console.log('sondiv');
                },
            },
        })
    </script>
</body>

效果:

事件捕获

网景对此提出另一种名为事件捕获的事件流,与事件冒泡相反,事件从最外层发生,直到具体的元素

故在事件捕获的概念下button按钮发生click时间顺序应该是document →html→body→div → button

事件捕获案例:

点击box2的结果

终止事件冒泡

在相应的函数中加上event.stopPropagation()

这是阻止事件的冒泡方法，不让事件向documen上蔓延。

实例1

            methods:{
                fatherfun(){
                    console.log('fatherdiv');
                    event.stopPropagation()
                },
                sonfun(){
                    console.log('sondiv');
                    event.stopPropagation()
                },
            },

实例2 用vue的方式终止事件冒泡

<body>
    <div id="app">
        <div class="father" @click.stop="fatherfun">父
            <div class="son" @click.stop="sonfun">子</div>
        </div>
    </div>

结果成功终止冒泡

事件方法