“约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理（建议收藏）
對于事件的傳播機制，Netscape Communicator采用的是事件捕獲(event capture)，IE9、Safari、Chrome、Opera和Firefox采用的是事件冒泡（event bubbling）,下面我們通過案例來具體理解，代碼使用chrome瀏覽器進行測試，先給出HTML和CSS文件:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>理解事件冒泡與事件捕獲</title><style>html {box-sizing: border-box;}*, *:before, *:after { box-sizing: inherit; }div {width:100%;padding:50px;}.one {background: red;}.two {background:blue;}.three {background:green;}</style></head><body class="bod"><div class="one">外面：id為1<div class="two">中間：id為2<div class="three">里面：id為3</div></div></div><p>請點擊復選框控件</p><form><label for="id-checkbox">Checkbox</label><input type="checkbox" id="id-checkbox" name="checkbox" checked /></form></body></html>一、capture參數
在chrome中默認以冒泡的形式，capture為false,可以直接指定第三個參數為false,相當于{capture:false}
function logText(e) {console.log(this.classList.value);}divs.forEach(div => div.addEventListener('click', logText));點擊id=one元素 : one;
點擊id=2的元素 ： two one
點擊id=3的元素，three two one
function logText(e) {console.log(this.classList.value);}divs.forEach(div => div.addEventListener('click', logText, {capture: true,}));點擊id=one元素 : one;
點擊id=2的元素 ：one two
點擊id=3的元素 : one two three
二、 e.stopPropagation():阻止捕獲和冒泡階段中當前事件的進一步傳播
function logText(e) {console.log(this.classList.value);e.stopPropagation(); // one ; two ; three}divs.forEach(div => div.addEventListener('click', logText));點擊id=one元素 : one
點擊id=2的元素 ：two
點擊id=3的元素 : three
function logText(e) {console.log(this.classList.value);e.stopPropagation();/}divs.forEach(div => div.addEventListener('click', logText, {capture: true,}));事件只會在第一個捕獲的元素上面觸發
點擊id=one元素 : one
點擊id=2的元素 ：one
點擊id=3的元素 : one
三、event.preventDefault():
（1）如果事件可取消，則取消該事件，而不停止事件的進一步傳播。preventDefault 方法不會阻止該事件的進一步冒泡. event.stopPropagation 方法才有這樣的功能.
document.querySelector("#id-checkbox").addEventListener("click", function(event){alert("preventDefault會阻止該復選框被勾選.")event.preventDefault();//無法勾選選項框console.log(event.defaultPrevented);//true//阻止該復選框被勾}, false);（2）使用passive:false來禁止e.preventDefault()的調用
document.querySelector("#id-checkbox").addEventListener("click", function(event){event.preventDefault();//可以勾選選項框console.log(event.defaultPrevented);//false}, {passive:true});//Unable to preventDefault inside passive event listener invocation.四、事件代理：
1、原理：事件冒泡，為外層元素指定一個事件處理程序，就可以管理某一類型的所有事件。
(1)event.target和event.currentTarget:在事件處理程序內部，對象 this 始終等于 currentTarget 的值，而 target 則只包含事件的實際目標。如果直接將事件處理程序指定給了目標元素，則 this、currentTarget 和 target包含相同的值：
(2)event.eventPhase :可以用來確定事件當前正位于事件流的哪個階段。如果是在捕獲階
段調用的事件處理程序，那么eventPhase 等于1；如果事件處理程序處于目標對象上，則event-
Phase 等于2；如果是在冒泡階段調用的事件處理程序，eventPhase 等于3。這里要注意的是，盡管
“處于目標”發生在冒泡階段，但eventPhase 仍然一直等于2
function logText(e) {console.log(e.currentTarget);console.log(e.currentTarget === this);console.log(e.target);}document.querySelector('.one').addEventListener('click',logText,false);依次點擊id為1、2、3的div控制臺會輸出以下數據：
?
下面通過使用{capture:true}參數了解event.eventPhrase,盡管“處于目標”發生在捕獲階段，但eventPhase 仍然一直等于2
function logText(e) {console.log(e.currentTarget);console.log(e.currentTarget === this);console.log(e.target);console.log(e.eventPhase);}document.querySelector('.one').addEventListener('click',logText,{capture:true});?
依次點擊id為1、2、3的div控制臺會輸出以下數據：
以上是本人對事件代理、事件捕獲和事件代理的理解，不當之處，敬請指出：
本面試題為前端常考面試題，后續有機會繼續完善。我是歌謠，一個沉迷于故事的講述者。
歡迎一起私信交流。
“睡服“面試官系列之各系列目錄匯總（建議學習收藏）?
?
?
總結
以上是生活随笔為你收集整理的“约见”面试官系列之常见面试题第三十四篇之事件冒泡、事件捕获、事件代理（建议收藏）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [2020 年百度之星·程序设计大赛 -
- 下一篇： GPS广播星历和精密星历的下载