關於js事件冒泡和事件捕獲

MonsterLove發表於2018-10-18
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

相關文章