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

2018-10-19 06:14:12来源：博客园阅读 ()

事件捕获指的是从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>