明白js的事宜冒泡和事宜捕捉

2019年8月24日 154次阅读 来源: kaizige

明白js的事宜冒泡和事宜捕捉

定義

冒泡：作用於子元素上的事宜會一級一級向上通報，類似於冒泡的情勢。
捕捉：作用於父元素的事宜會一級一級向下通報到終究的子元素。

運用要領

文檔請參考
addEventListener，以及
runnoob的addEventListener

EventTarget.addEventListener()語法：

element.addEventListener(event, function, useCapture)

注重useCapture參數，他是一個boolean值，指定事宜是不是在捕捉或冒泡階段實行。默以為false，假如指定為true，表明在捕捉階段實行，指定為true，表明在冒泡階段實行。

案例參考

先看以下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        #parent {
            height: 300px;
            background-color: #bcbcbc;
        }
        #son {
            margin-top: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
</head>
<body>
<div id="parent">
    我是父親
    <div id="son">我是兒子</div>
</div>

<script>
    function handler(event) {
        console.log('target: ', event.target);
        console.log('curtrentTarget: ', event.currentTarget);
    }
    let pa = document.getElementById('parent');
    pa.addEventListener('click', handler, false);
    let son = document.getElementById('son');
    son.addEventListener('click', handler, false);
</script>
</body>
</html>

運用瀏覽器運轉這段代碼，效果以下：
《明白js的事宜冒泡和事宜捕捉》

我們點擊兒子div，控制台打印以下：
《明白js的事宜冒泡和事宜捕捉》

能夠看到第一次打印的target和currentTarget都是son，而第二次事宜冒泡到了parent，此時target是son，currentTarget變成了parent。

事宜捕捉

我們把代碼中的useCapture改成true：

let pa = document.getElementById('parent');
pa.addEventListener('click', handler, true);
let son = document.getElementById('son');
son.addEventListener('click', handler, true);

然後再次運轉，效果如圖：
《明白js的事宜冒泡和事宜捕捉》

此時事宜着實捕捉階段實行，也就是說會先觸發parent的click事宜。

target和currentTarget的區分

仔細看前面的打印信息就知道了，target始終不變，它代表觸發事宜的誰人元素（不管是冒泡階段照樣捕捉階段都是指最底層的元素（這裏指son）。而currentTarget則示意當前階段註冊了EventListener的元素。

怎樣阻撓冒泡和捕捉階段事宜的進一步流傳

文檔參考：
event.stopPropagation

API用法：

event.stopPropagation()

修正我們的代碼，在handler中到場event.stopPropagation()：

    function handler(event) {
        console.log('target: ', event.target);
        console.log('curtrentTarget: ', event.currentTarget);
        event.stopPropagation();
    }

再次運轉，點擊兒子div，打印出來的日記以下（冒泡階段）：
《明白js的事宜冒泡和事宜捕捉》

捕捉階段打印日記：
《明白js的事宜冒泡和事宜捕捉》

能夠看到，冒泡階段，點擊事宜沒有繼承向上流傳到父元素；捕捉階段，點擊事宜沒有繼承向下流傳到子元素。

P.S. 請斟酌下在handler要領中，this究竟指向target照樣currentTarget呢？

    原文作者：kaizige
    原文地址: https://segmentfault.com/a/1190000014553860
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞