【前端 · 面試 】JavaScript 之你不必定會的基礎題（一）

最近我在作前端面試題總結系列，感興趣的朋友能夠添加關注，歡迎指正、交流。

爭取每一個知識點可以多總結一些，至少要作到在面試時，針對每一個知識點均可以侃起來，不至於啞火。

前言

面試每每就是博弈的一個過程，可是若是你手中的籌碼不夠豐厚，那結局大概不會怎麼理想。而籌碼的增長每每依賴於咱們日積月累的輸入。

哪怕再小的一個問題，只要你願意沉下心來往下鑽，最後獲得的多是一片森林。

今天我要記錄的這個問題，雖然比較基礎，可是，內涵倒是一點都很多！

題目

有以下的 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」。

總結

題目不難，涉及到的知識點更是初級，可是，細節必定須要注意！

~

~本文完，感謝閱讀！

~

學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！

你們好，我是〖編程三昧〗的做者 隱逸王，個人公衆號是『編程三昧』，歡迎關注，但願你們多多指教！

你來，懷揣指望，我有墨香相迎！ 你歸，不管得失，惟以餘韻相贈！

知識與技能並重，內力和外功兼修，理論和實踐兩手都要抓、兩手都要硬！