关于js事件冒泡和事件捕获

  事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%">
</div>
</div>
<script>
    document.getelementbyid('parent').addeventlistener('click',(e) =>{
        alert('parent');
    })

    document.getelementbyid('child').addeventlistener('click',(e) =>{
        alert('child');
    })
</script>

  结果先输出child，再输出parent，事件的触发顺序自内向外，这是事件冒泡。

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div>

 <script> document.getelementbyid('parent').addeventlistener('click',(e) =>{ alert('parent'); },true) document.getelementbyid('child').addeventlistener('click',(e) =>{ alert('child'); },true)
</script>

结果先输出parent，再输出child，事件触发顺序变更为自外向内，这是事件捕获。

还有一种写法使用settimeout实现捕获

<div id="parent" style="height: 100px;width: 100px;background-color: pink;">
<div id="child" style="width:100%; height:100%"></div></div>
    
    <script>
        document.getelementbyid('parent').addeventlistener('click',(e) =>{
            alert('parent');
        })
    
        document.getelementbyid('child').addeventlistener('click',(e) =>{
            settimeout(() => {
                alert('child');
            });
        })
    </script>

关于settimeout和setinterval的深入理解 https://www.cnblogs.com/xiaohuochai/p/5773183.html