【前端 · 面试 】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”。

总结

题目不难，涉及到的知识点更是初级，可是，细节必定须要注意！

~

~本文完，感谢阅读！

~

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！

你们好，我是〖编程三昧〗的做者 隐逸王，个人公众号是『编程三昧』，欢迎关注，但愿你们多多指教！

你来，怀揣指望，我有墨香相迎！ 你归，不管得失，惟以余韵相赠！

知识与技能并重，内力和外功兼修，理论和实践两手都要抓、两手都要硬！