[前端 · 面試 ]JavaScript 之你不一定會的基礎題(一)

程式設計三昧發表於2021-08-12

最近我在做前端面試題總結系列,感興趣的朋友可以新增關注,歡迎指正、交流。

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

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 元素的事件執行順序一般有三個階段:

  • 事件捕獲
  • 事件觸發
  • 事件冒泡

借用網上的一張圖來說明一下這個過程:

image-20210812202737932

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 協議》,轉載必須註明作者和本文連結

相關文章