Js事件流概述，以及阻止事件冒泡、阻止默认行为

天空中那座城

已于 2023-04-27 13:45:19 修改

阅读量1.1k

点赞数 3

分类专栏：前端知识文章标签： javascript 前端开发语言

于 2022-09-13 11:55:59 首次发布

本文链接：https://blog.csdn.net/Microhoo_/article/details/126830142

版权

前端知识专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一: 事件流概述

一: 事件流

事件发生时会在元素节点和根节点之间按照特定的顺序传播，路径所经过的所有结点都会收到该事件，这个传播过程即DOM事件流。

两种事件流模型：捕获型事件流、冒泡型事件流。

1）冒泡型事件流：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM的叶子到根（从内到外），简单的理解（冒泡像潜泳吐泡泡），你品你细品，hhh~

2）捕获型事件流：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM的根到叶子（从外到内），简单的理解（捕获像警察搜捕嫌疑人），你品你细品，hhh~

二：阻止事件冒泡

阻止冒泡：（在当前要阻止冒泡的事件函数中调用下面一种即可）

两种方式：① event.cancelBubble = true;

② event.stopPropagation();

例子：原生js案例阻止事件冒泡

案例解析：如果不阻止，点击内层div,内层div的事件执行完，会传播到外层div,执行外层div的事件，即冒泡型事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阻止事件冒泡</title>
    <style>
        #div1{
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            background-color: red;
            border-radius: 50%;
        }
        #div2{
            width: 150px;
            height: 150px;
            border: 1px solid #000;
            margin: 75px auto;
            background-color: black;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>

    <script>
        document.querySelector("#div1").onclick = function(){
            alert("触发了外层div")
        }
        document.querySelector("#div2").onclick = function(){
            alert("触发了内层div")
            // 阻止事件冒泡
            event.stopPropagation()
        }
    </script>
</body>
</html>

例子：Vue2中的阻止事件冒泡的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击事件阻止事件冒泡</title>
    <script src="../vue.js"></script>
    <style>
        [v-cloak]{
            display: block;
        }
        .parent,.son,.sun{
            border: 1px solid #000;
            border-radius: 50%;
        }
        .parent{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .son{
            width: 200px;
            height: 200px;
            margin: 50px auto;
            background-color: aqua;
        }
        .sun{
            width: 100px;
            height: 100px;
            margin: 50px auto;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="parent" @click="alert1()">
            <div class="son" @click.stop="alert2()">
                <div class="sun" @click.stop="alert3()"></div>
            </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            data: {
               
            },
            methods: {
                alert1:function(){
                    alert("父亲")
                },
                alert2:function(){
                    alert("儿子")
                },
                alert3:function(){
                    alert("孙子")
                }
            },
        })
    </script>
</body>
</html>

三：阻止默认行为

阻止默认行为：（在当前要阻止默认行为的事件函数中调用下面一种即可）

三种方式：① return false

② event.preventDefault()

③ event.returnValue = false

例子：原生js案例阻止事件默认行为

案例解析：阻止之后，form表单中的提交地址，就不提交，不进行网页跳转啦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>preventDefault</title>
</head>
<body>
    <div>
        <form action="https://www.baidu.com" method="post">
            <button id="submitBtn">提交表单</button>
        </form>
    </div>

    <script>
        document.querySelector("#submitBtn").onclick = function(){
            console.log("点击了表单提交按钮!")
            // 阻止默认行为
            event.preventDefault()
        }
    </script>
</body>
</html>

例子：Vue2中的阻止默认行为的写法

案例解析：阻止了才可以进行打印哦！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提交表单阻止默认行为</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <form action="https://www.baidu.com" method="post">
            <button id="btn" type="submit" @click.prevent="f()">
                点击提交
            </button>
        </form>
    </div>
    
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                
            },
            methods: {
                f:function(){
                    console.log("点击了表单提交按钮")

                    // 阻止事件默认行为  或者  使用事件修饰符阻止
                    // var ev = ev || event
                    // ev.preventDefault()
                }
            },
        })
    </script>
</body>
</html>