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

今天药忘吃喽~ 2023-10-02 21:03 4阅读 0赞

**目录**

一: 事件流概述

二：阻止事件冒泡

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

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

三：阻止默认行为

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

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

--------------------

### 一: 事件流 ###

事件发生时会在元素节点和根节点之间按照特定的顺序传播，路径所经过的所有结点都会收到该事件，这个传播过程即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中的阻止默认行为的写法** ####

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