[TOC]

事件流是指用户在网页上的交互、我们需要处理事件捕获或者监听、那什么时候需要用捕获什么时候需要监听、所以我们要去理解JS事件流的机制和触发的条件！

DOM事件流的三个阶段

事件捕获阶段、处于目标阶段、事件冒泡阶段、默认情况下，事件使用冒泡事件流，不使用捕获事件流、但是我们可以通过addEventListener追加第三个参数为true则以捕获的方式进行！

580909919-5b4f29132fdeb.png

事件捕获

<!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>Document</title>
</head>
<body>
    <div id="box" style="width: 200px;height: 200px;background: black;">
        box
        <div id="box1" style="width: 100px;height: 100px;background: red;">
            box1
        </div>
    </div>
</body>
</html>

<script>
    let box = document.getElementById("box");
    let box1 = document.getElementById("box1");
    let body = document.getElementsByTagName('body')[0];

    box.addEventListener("click",function(e){
        console.log('box捕获',e)
    },true)
    box1.addEventListener("click",function(e){
        console.log('box1捕获',e)
    },true)
    body.addEventListener("click",function(e){
        console.log('body捕获',e)
    },true)

    // body捕获
    // box捕获 
    // box1捕获
</script>

事件冒泡

  • element.addEventListener(event, function, useCapture); 第三个参数是个布尔值用于描述事件是冒泡（false-默认）还是捕获（true)。该参数是可选的 ```json <!DOCTYPE html>
    box
    box1 

<a name="Cu4bP"></a>
#### 
<a name="N6WAt"></a>
#### 事件捕获&事件冒泡
```json
<!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>Document</title>
</head>
<body>
    <div id="box" style="width: 200px;height: 200px;background: black;">
        box
        <div id="box1" style="width: 100px;height: 100px;background: red;">
            box1
        </div>
    </div>
</body>
</html>

<script>
    let box = document.getElementById("box");
    let box1 = document.getElementById("box1");
    let body = document.getElementsByTagName('body')[0];

    box.onclick = function(e){
        console.log('接收冒泡box-onclick',e);
    }
    box1.onclick = function(e){
        console.log('目标box1-onclick',e);
    }
    body.onclick = function(e){
        console.log('接收冒泡body',e)
    }

    box.addEventListener("click",function(e){
        console.log('box捕获',e)
    },true)
    box1.addEventListener("click",function(e){
        console.log('box1捕获',e)
    },true)
    body.addEventListener("click",function(e){
        console.log('body捕获',e)
    },true)

    // body捕获
    // box捕获
    // box1捕获
    // 目标box1-onclick
    // 接收冒泡box-onclick 
    // 接收冒泡body 

</script>

阻止冒泡：element.stopPropagation()

<!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>Document</title>
</head>
<body>
    <div id="box" style="width: 200px;height: 200px;background: black;">
        box
        <div id="box1" style="width: 100px;height: 100px;background: red;">
            box1
        </div>
    </div>
</body>
</html>

<script>
    let box = document.getElementById("box");
    let box1 = document.getElementById("box1");
    let body = document.getElementsByTagName('body')[0];

    box.onclick = function(e){
        console.log('接收冒泡box-onclick',e);
    }
    box1.onclick = function(e){
        // 阻止冒泡
        e.stopPropagation()
        console.log('目标box1-onclick',e);
    }
    body.onclick = function(e){
        console.log('接收冒泡body',e)
    }
    // 目标box1-onclick
</script>

在目标事件里面插入e.stopPropagation() 阻止事件往上冒！