JS事件冒泡和事件捕获

2019-09-25 本文已影响0人疯也是一种态度_

css部分

  <style>
    * {
        margin: 0;
        padding: 0;
    }

    #box1 {
        width: 400px;
        height: 400px;
        background: red;
        margin: 0 auto;
        overflow: hidden;
    }

    #box2 {
        width: 300px;
        height: 300px;
        background: blue;
        margin: 50px auto;
        overflow: hidden;
    }

    #box3 {
        width: 200px;
        height: 200px;
        background: lawngreen;
        margin: 50px auto;
        overflow: hidden;
    }
</style>

<body>
<div id="box1">
    <div id="box2">
        <div id="box3">

        </div>
    </div>
</div>
</body>

JS部分

默认 false , false 是冒泡, true 是事件捕获

事件捕获

假设在box3内部进行点击，那么：事件捕获认为：你点击box3，因为box1在box3外部，所以，box1先捕获到，然后再传递给box3，所以，事件执行顺序是“box1-box2-box3”，这就像你进去房间，必须先进入大院，再进入门一样。

<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
box1.addEventListener('click', function () {
    console.log('点击了box1')
}, true)  
box2.addEventListener('click', function () {
    console.log('点击了box2')
}, true)
box3.addEventListener('click', function () {
    console.log('点击了box3')
}, true)
// true 从外往里 123 
</script>

事件冒泡

假设在box3内部进行点击，那么：冒泡事件认为：你点击了box3，而box3在box1里内部，所以，也点击了box1，因此执行顺序是 “box3-box2-box1” ，由内往外一步步向上，这很像水里有一个鱼吐了一个水泡，这个水泡往上飘一样，所以叫做“冒泡事件”

<script>
var box1 = document.getElementById('box1')
var box2 = document.getElementById('box2')
var box3 = document.getElementById('box3')
box1.addEventListener('click', function () {
    console.log('点击了box1')
},  false)  
box2.addEventListener('click', function () {
    console.log('点击了box2')
},  false)
box3.addEventListener('click', function () {
    console.log('点击了box3')
},  false)
//  false 从里往外  321
</script>