初探JavaScript - JS 事件 Event - 關於addEventListene中true & false的差異 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 12 屆 iThome 鐵人賽

DAY 17

自我挑戰組

「 Nice to meet you , JavaScript . 」- 學習日記系列第 17 篇

初探JavaScript - JS 事件 Event - 關於addEventListene中true & false的差異

12th鐵人賽 javascript

Linn

2020-09-17 01:01:14

1529 瀏覽

分享至

上一篇有提到addEventListener的寫法為addEventListener('click', function(e){}, false)，其中false沒有特別寫時，其預設值還是為false，但這個寫false跟true到底是代表什麼呢？先讓我們來看看下例：

我們先在頁面新增一個紅色方塊，並用addEventListener監聽，當點擊紅色方塊的時候，會彈跳出Hola!!!!!的視窗 ; 另外也使用addEventListener監聽HTML body元素(最底層元素），當body被點擊時，會彈跳出 I’m Body!的視窗。接下來試試看，當只有點擊紅色區塊的時候會出現什麼結果：
<範例程式碼>

<body class='bodyarea'>
    <div class='box'></div>

    <script>
        var box = document.querySelector('.box');
        box.addEventListener('click', function (e) {
            alert("Hola!!!!!")
        }, false);

        var body = document.querySelector('.bodyarea');
        body.addEventListener('click', function (e) {
            alert("I'm Body!")}, false);
    </script>

當只點擊紅色方塊後的結果，會先顯示Hola!!!!!彈跳視窗，按完確定後緊接著會顯示I’m Body! 的彈跳視窗，如下：

使用addEventListener監聽，會向下穿透元素，並依序顯示其相對應的動作行為，而在addEventListener('click', function(e){}, false)中的false會從指定的元素向外找，並依序顯示，如上範例，點擊紅方塊會先彈跳出box的Hola!!!!!，接著再向上層繼續找到body，彈跳出I’m Body!。相反的，如果是設定true的話，則會從外向內找到指定元素作顯示，而這兩種分別的事件名稱為：

事件氣泡 (Event Bubbling)：false - 從指定的元素向外找。
事件補捉（Event Capturing）：true - 從外向內找到指定元素。

stopPropagation() 中止冒泡事件

當元素重疊時，但希望只顯示出被點擊元素的回應行為，則可使用stopPropagation()來避免元素繼續往外找，範例如下：

<body class='bodyarea'>
    <div class='box'></div>

    <script>
        var box = document.querySelector('.box');
        box.addEventListener('click', function (e) {
            e.stopPropagation(); //中止繼續向外尋找元素
            alert("Hola!!!!!");
        }, false);

        var body = document.querySelector('.bodyarea');
        body.addEventListener('click', function (e) {
            alert("I'm Body!")
        }, false);
    </script>

顯示結果只會有Hola!!!!!，成功中止了氣泡，沒有繼續向上層尋找: