博主信息
编程三昧
博文
41
粉丝
0
评论
0
访问量
11883
积分:0
P豆:82

【前端 · 面试 】JavaScript 之你不一定会的基础题(一)

2021年08月12日 21:16:24阅读数:437博客 / 编程三昧/ JavaScript

最近我在做前端面试题总结系列,感兴趣的朋友可以添加关注,欢迎指正、交流。

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

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”。

总结

题目不难,涉及到的知识点更是初级,但是,细节一定需要注意!

~

~本文完,感谢阅读!


版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • 开发越来越吃香,如果想从事大开发,javascript要求必学必,所以php中文网作为知名编程学习网站,为您整理了2021年最全js,包含js、js高级以及js
    开发中中CSS直是重点考核,本文汇总了最新CSS,包括CSS,CSS中高级,搞这些,也就成功了半!
    文章《ps新手:ps学习中值得了解三件事(分享)》中,给大家介绍了个操作PS具体方法,有了这个保证颠三倒四。
    Angular​作为目最为流行框架,受到了开发者普遍欢迎。
    应用程序漏洞,人员秃头源。如果您直从事工作,就知道修复应用程序漏洞有多么困难。特别是使用JavaScript时,个很小错误有时可能需要几个小时来调
    当今数字世界,存在着无数网站,每天都需要处理各种原因访问。然而,这些网站中有很大部分显得笨重,使用起来也很麻烦。