乐趣区

关于javascript:前端-面试-JavaScript-之你不一定会的基础题一

jiezi

最近我在做前端面试题总结系列，感兴趣的敌人能够增加关注，欢送斧正、交换。

争取每个知识点可能多总结一些，至多要做到在面试时，针对每个知识点都能够侃起来，不至于哑火。

前言

面试往往就是博弈的一个过程，然而如果你手中的筹码不够丰富，那终局大略不会怎么现实。而筹码的减少往往依赖于咱们与日俱增的输出。

哪怕再小的一个问题，只有你违心沉下心来往下钻，最初失去的可能是一片森林。

明天我要记录的这个问题，尽管比拟根底，然而，外延却是一点都不少！

题目

有如下的 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”。

总结

题目不难，波及到的知识点更是高级，然而，细节肯定须要留神！

~

~ 本文完，感激浏览！

~

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

你来，怀揣冀望，我有墨香相迎！你归，无论得失，唯以余韵相赠！

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

退出移动版