Event Bubbling、Event Capturing 差異

Posted on In

這章節要講解的是：.addEventListener的第三個參數，為什麼要寫false呢？

html:

1
<div class="box"></div>

css:

1
2
3
4
5
.box{
    width: 100px;
    height: 100px;
    background-color: #000;
}

JS:

🎃 建立變數el，來選取.box

🎃 用.addEventListener綁定「click事件」

1
2
3
4
5
6
var el = document.querySelector('.box');

el.addEventListener('click',function(){
    alert('box');
    console.log('box');
},false);

🍋 點擊.box會跳出 alert

🍋 Console 也有出現「box」

點擊<body>

現在，我在<body>也用.addEventListener綁定一個「click事件」

html:

1
2
3
<body class="body">

    <div class="box"></div>

false （事件氣泡 Event Bubbling）

🎃 .addEventListener的第三個參數，寫false代表：從指定元素往外層找

🍋 寫false又稱為「事件氣泡 Event Bubbling」：從「點擊的那個元素」，開始「往外」冒泡泡

🍋 如果第三個參數沒有寫，預設就會是false

JS:

🎃 .addEventListener的第三個參數，寫false

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// .box 的「click 事件」
var el = document.querySelector('.box');

el.addEventListener('click',function(){
    alert('box');
    console.log('box');
},false);

// <body> 的「click 事件」
var elBody = document.querySelector('.body');

elBody.addEventListener('click', function () {
    alert('body');
    console.log('body');
}, false);

當我點擊.box時，除了觸發「.box的“click 事件”」，也會同時觸發「<body>的“click 事件”」

🍋 先跳出alert('box');

🍋 再跳出alert('body');

原因為：

所有的元素都是在<body>裡面在點擊.box後，就會一層一層往外找–> 找到<body>–> 再找到 document 為止

🎃 .addEventListener的第三個參數，寫false代表：從指定元素往外層找

🔔 為什麼要往外找？

除了「點擊的那個元素」之外，一定還有東西把元素層層包住，所以會一直往外層找，直到「最外層」為止–> .box的最外層就是<body>

true （事件捕捉 Event Capturing ）

🎃 .addEventListener的第三個參數，寫true代表：從「最外層 document」找到「指定元素」

🍋 寫true又稱為「事件捕捉 Event Capturing」：要從「大草原（<body>）」，找到裡面的小動物（指定的元素）

🍋 true的使用時機：有時候在寫系統時，會需要先知道「外層的狀況」，再慢慢「往內」提供資訊

JS:

🎃 .addEventListener的第三個參數，寫true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// .box 的「click 事件」
var el = document.querySelector('.box');

el.addEventListener('click',function(){
    alert('box');
    console.log('box');
},true);

// <body> 的「click 事件」
var elBody = document.querySelector('.body');

elBody.addEventListener('click', function () {
    alert('body');
    console.log('body');
},true);

因為會從「最外層 document」找到「指定元素」，所以就會：

🍋 先跳出alert('body');

🍋 再跳出alert('box');

元素都是「互相重疊的」

html:

1
2
3
4
<ul>
    <li><a href="#">1234</a></li>
    <li><a href="#">1234</a></li>
</ul>

當我點擊「<a></a>」時，也同時會點擊到「<li></li> 和 <ul></ul> 和 <body></body>」的範圍