最近我在做前端面試題總結系列，感興趣的朋友可以新增關注，歡迎指正、交流。
爭取每個知識點能夠多總結一些，至少要做到在面試時，針對每個知識點都可以侃起來，不至於啞火。
前言
面試往往就是博弈的一個過程，但是如果你手中的籌碼不夠豐厚，那結局大概不會怎麼理想。而籌碼的增加往往依賴於我們日積月累的輸入。
哪怕再小的一個問題，只要你願意沉下心來往下鑽，最後得到的可能是一片森林。
今天我要記錄的這個問題，雖然比較基礎，但是，內涵卻是一點都不少！
題目
有如下的 HTML 文件結構：
<div id="parent">
<child id="child" class="child">
點我
</child>
</div>第一次執行如下 JavaScript 程式碼：
document.getElementById("parent").addEventListener("click", function () {
alert(`parent 事件觸發，` + this.id);
});
document.getElementById("child").addEventListener("click", function () {
alert(`child 事件觸發，` + this.id);
});第二次執行另一套 JavaScript 程式碼：
document.getElementById("parent").addEventListener("click", function (e) {
alert(`parent 事件觸發，` + e.target.id);
});
document.getElementById("child").addEventListener("click", function (e) {
alert(`child 事件觸發，` + e.target.id);
});第三次再執行一套：
document.getElementById("parent").addEventListener("click", function (e) {
alert(`parent 事件觸發，` + e.target.id);
}, true);
document.getElementById("child").addEventListener("click", function (e) {
alert(`child 事件觸發，` + e.target.id);
}, true);問題如下：
點選 id 為 child 的 div 後，這三份 JavaScript 程式碼的執行結果分別是什麼？
題外話
這道題目涉及到的內容和知識點都很基礎，無非就是事件捕獲、事件觸發、事件冒泡再加上 addEventListener 介面中的第三個引數的含義而已。
只要對 JavaScript 基礎知識掌握得較為牢固，那麼這題就是送分題，輕鬆加愉快；可一旦對這一塊的知識有盲點，那就成了送命題了，且行且珍惜。
DOM 元素事件執行順序
HTML 頁面上 DOM 元素的事件執行順序一般有三個階段：
- 事件捕獲
- 事件觸發
- 事件冒泡
借用網上的一張圖來說明一下這個過程：
dom標準事件流的觸發的先後順序為：先捕獲再冒泡，即當觸發dom事件時，會先進行事件捕獲，捕獲到事件源之後透過事件傳播進行事件冒泡。
而在瀏覽器中預設執行的是事件冒泡，即我們一般觀察不到事件捕獲階段，比如 onclick 等事件。
如果想要觀察到事件的捕獲階段，那我們就需要藉助 addEventListener 介面來實現。
關於addEventListener()
addEventListener 的基本語法為：
target.addEventListener(type, listener, useCapture);- type 事件型別。
- listener 事件觸發實際執行的匿名函式。
- userCapture 可選，型別為 Boolean，意思是是否執行事件捕獲階段。
關於 listener 中的 this 和 target
- 當一個 EventListener 在 EventTarget 正在處理事件的時候被註冊到 EventTarget 上，它不會被立即觸發，但可能在事件流後面的事件觸發階段被觸發，例如可能在捕獲階段新增，然後在冒泡階段被觸發。
- 通常來說 this 的值是觸發事件的元素的引用，當使用 addEventListener() 為一個元素註冊事件的時候，控制程式碼裡的 this 值是該元素的引用。其與傳遞給控制程式碼的 event 引數的 currentTarget 屬性的值一樣。
解題
透過以上分析，我們應該可以得到那道題的答案了：
- 第一次結果為：先彈出“child 事件觸發，child”，再彈出“parent 事件觸發，parent”。
- 第二次結果為：先彈出“child 事件觸發，child”，再彈出“parent 事件觸發，child”。
- 第三次結果為：先彈出“parent 事件觸發，child”，再彈出“child 事件觸發，child”。
總結
題目不難，涉及到的知識點更是初級，但是，細節一定需要注意！
~
~本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖程式設計三昧〗的作者 隱逸王，我的公眾號是『程式設計三昧』，歡迎關注，希望大家多多指教！
你來，懷揣期望，我有墨香相迎！ 你歸，無論得失，唯以餘韻相贈！
知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！
本作品採用《CC 協議》，轉載必須註明作者和本文連結