首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

看完这几道 JavaScript 面试题,让你与考官对答如流(上)

事件传播有三个阶段: 捕获阶段–事件从 window 开始,然后向下到每个元素,直到到达目标元素目标阶段–事件已达到目标元素。...冒泡阶段–事件从目标元素冒泡,然后上升到每个元素,直到到达 window。 7. 什么是事件冒泡? 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。...当事件发生在 DOM 元素上时,该事件并不完全发生在那个元素上。在捕获阶段,事件从window开始,一直到触发事件元素。...具体更多规则可以对参考之前文章: 对 JS 中相等和全等操作符转化过程一直很迷惑,直到有了这份算法 15. 为什么在 JS 中比较两个相似的对象时返回 false?...现在,当我们调用引用了innerFuncx变量时,innerParam将具有一个inner值,因为这是我们在调用中传递值,而globalVar变量值为guess,因为在调用x变量之前,我们将一个分配给

2K10
您找到你想要的搜索结果了吗?
是的
没有找到

攀爬TS之路(三) 数组类型、元组类型

图片 没想到好解决方案,有想法可以评论一下(虽然建议用这个) 元组类型 元组在赋值时,需要提供元组类型中指定项。...源具有 2 个元素,但目标需要 3 个。...源具有 4 个元素,但目标仅允许 3 个。 这么一看,就像是一个固定大小和元素类型数组。 但是,因为TS是JS超集,所以元组能够使用数组方法,即我们可以通过数组方法让该元组不再固定大小。...(这里说实在有点迷,赋值时候元组大小固定,调方法又能让元组大小固定) let tuple: [number, string, number | string] tuple = [1, 'hello...但是越界元素需要是元组中每个类型联合类型 console.log(tuple)

45230

AngularDart4.0 指南- 模板语法二 顶

您不能将[(ngModel)]应用到非表单原生元素或第三方自定义组件,除非您编写了一个合适值存取器,这个技术超出了本指南范围。...当指令没有合适宿主元素时如何对元素进行分组。 如何编写自己结构指令。 为什么你只能应用一个结构指令到一个元素。 本节介绍常见结构指令: NgIf:有条件地从DOM中添加或删除元素。...分配给* ngFor文本是指导迭代器进程指令。 *ngFor微语法 分配给* ngFor字符串不是模板表达式。 这是一种微语法 - Angular解释一种小语言。...你知道这一点,因为每个英雄ID没有改变。 但是Angular只能看到对象引用列表。 它别无选择,只能拆除旧DOM元素并插入所有DOM元素。...“Reset heroes”用相同 hero.ids创建heroes。 “Change ids”用hero.ids创造heroes 。

29.9K20

【前端】详解JavaScript事件代理(事件委托)

事件传播分成三个阶段: 捕获阶段:从window对象传导到目标节点(上层传到底层)称为“捕获阶段”(capture phase),捕获阶段不会响应任何事件; 目标阶段:在目标节点上触发,称为“目标阶段”...事件代理即是利用事件冒泡机制把里层所需要响应事件绑定到外层; 事件代理利用了事件冒泡原理。通过在父元素上设置监听器,可以捕获到在其子元素上触发事件。...如果用了事件委托就没有这种麻烦了,因为事件是绑定在父层,和目标元素增减是没有关系,执行到目标元素是在真正响应执行事件函数过程中去匹配;所以使用事件在动态绑定事件情况下是可以减少很多重复工作...Web 应用程序中,对所有可单击元素都采用这种方式,那么结果就会有数代码用于添加事件处理程序。...总结 Hello,各位看官老爷们好,已经建立了CSDN技术交流群,如果你很感兴趣,可以私信我加入社群。

6910

图片错误自动重载

但是我们通常只管给图片赋值一个链接 爱怎么加载怎么加载,失败也不管 这其实对于一个应用来说是非常不完善 因为每个用户网络情况无法预估(比如地铁上),图片加载失败必然导致页面就无法浏览或者体验差 这肯定不是一个好应用...3 动态监听 img错误 我们是不是 监听 img 元素插入,然后给 img 元素加上一个 onerror 事件? 当然不是啦 ?...不过既然不会冒泡,我们只能使用捕获保证先执行父级元素事件 4 处理图片错误 好了,上面说完了两条处理分支,现在来说一下共同错误处理分支 我们原则是 1、处理懒加载图片 2、图片加载未超过3次,重载图片...,超过3次使用默认图片 1处理懒加载图片 首先懒加载图片在没有划上屏幕时候,是没有加载src为空,只在data-src或者lazy-src保存原图片链接 所以这些图片不适用于错误重载,直接跳过...,如果你是监听全局,可以像这样 obseverImg(docuemnt.body) 但是有时不会是这样,因为不会全局使用一张默认图片 所以这里支持传入 目标dom 元素,只处理部分 img 4 总结

1.4K20

社招前端必会面试题(附答案)

事件流事件流是网页元素接收事件顺序,"DOM2级事件"规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生事件捕获,为截获事件提供机会。然后是实际目标接受事件。...虽然捕获阶段在规范中规定不允许响应事件,但是实际上还是会执行,所以有两次机会获取到目标对象。当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流顺序执行事件处理程序:父级捕获子级捕获子级冒泡父级冒泡且当事件处于目标阶段时...参考:前端进阶面试题详细解答外部js文件先加载还是onload先执行,为什么?...,那么他就不会被第二个参数活了,而是被后面的catch捕获到。

33830

如何使用 Java 泛型来避免 ClassCastException

泛型本质是为了参数化类型(在创建类型情况下,通过泛型指定不同类型来控制形参具体限制类型)。...实际上编译器已经报出错误了,它告诉我们不能将字符串列表转换为对象列表 ? 为什么会报这个错呢?...为什么我们有这个规则?因为泛型设计是为了在编译时捕获类型安全违规行为。如果没有泛型,我们可能会发生线上事故,因为程序抛出了 ClassCastException 并崩溃了!...>意味着任何类型对象都可以是列表元素类型,并且源元素目标元素类型可能是兼容 例:源列表是一个 Shape List,而目标列表是一个 String List,并且允许复制,那么在尝试检索目标列表元素时将抛出...当 s 引用 Set 被分配给 ss 时,编译器会生成一个未检查警告。它因为编译器不能确定 s 引用 Set 类型。

2.1K40

事件

事件捕获 事件捕获(event capturing),不太具体节点早接收到事件,而最具体节点最后接收事件。事件捕获用意在于在事件到达预定目标之前捕获它。...:在btn1捕获阶段 --> 才是目标阶段 --> 在btn1冒泡阶段 var divDom = document.getElementById("div1"), btnDom...最好只在需要在事件到达目标之前捕获时候将事件处理程序添加到捕获阶段。如果不是特别需要,建议在事件捕获阶段注册事件处理程序。 4....想向DOM中添加一个新元素,所以必须确定页面已经加载完毕。 B. 图片元素设置了src属性就会开始下载。所以必须在指定src元素之前先指定事件! 了解了上述特性,我们可以在客户端预先加载图片。...最后触发DOMSubtreeModified事件,目标节点父节点。 6.

3.2K51

50道JavaScript详解面试题,你需要了解一下

答案是输出为10,因为将对象传递给函数时对象相似,仅传递其值,而传递对内存位置实际引用。这就是为什么更改仅影响函数范围内参数原因。 3、控制台输出是什么?...不可以,因为字符串在JavaScript中是不可变,指向字符串变量可以分配给另一个字符串。 21、承诺链中嵌套捕获可以捕获在承诺链中向上抛出错误吗?...不可以,嵌套是一种用于限制catch语句范围控制结构。用简单的话来说,嵌套catch仅捕获其作用域及其以下范围内故障,而不捕获嵌套范围之外链中较高错误。 22、控制台输出是什么,为什么?...46、使用哪种方法将影子DOM树附加到指定元素,并返回对其ShadowRoot引用? Element.attachShadow()。 47、控制台输出是什么,为什么?...它返回h,因为数组在JavaScript中是从零开始,因此arr [2] [1]将可以访问外部数组第3个元素和内部数组第2个元素,从而得出值“ h”。

3.5K40

在 Vue 中,使用 $attrs 构建高级组件

更多开源作品请看 GitHub https://github.com/qq449245884/xiaozhi ,包含一线大厂面试完整考点、资料以及系列文章。...$attrs 也可以被看作是一个安全网,它可以捕获任何我们没有在组件中声明东西。...,我们可以看下,我们属性都被添加到了 HTML 元素上了: 看到这里,大家可能有疑问了,既然所有的 "非属性/事件" 属性都已经自动应用于内部HTML元素为什么还要对 $attrs 做这么大介绍...第二,value 远远超过了50,最后,检查一下HTML,会看到我们所有的额外属性(min, max, data-cy)都被分配给了根元素,而不是我们 input 元素。...还有一个问题--我们添加属性不仅被分配给了 input 元素上,也分配给了 root元素。 通常情况下,这可能对界面没啥影响,但有的属性确实会生产一些副作用,下面,我们来解决这个问题。

2.4K10

浅析 JavaScript 中事件委托

为什么要进行事件委托? 首先实现一个小功能:在单击 HTML 按钮后,把消息输出到控制台。...按钮列表被迭代为 for (const button of buttons) ,并且每个按钮都被附加了一个侦听器。另外在列表中按钮被添加或删除后,你必须还要手动删除或附加事件监听器。...点击事件传播分三个阶段: 捕获阶段 —— 从window,document 和根元素开始,事件向下扩散至目标元素祖先 目标阶段 —— 事件在用户单击元素上触发 冒泡阶段——最后,事件冒泡通过目标元素祖先...总结 当发生点击事件(或传播任何其他事件)时: 事件从 window、document、根元素向下传播,并经过目标元素祖先(捕获阶段); 事件发生在目标目标阶段)上; 最后,事件在目标祖先之间冒出气泡...使用事件委托需要三个步骤: 确定要监视事件元素父级元素 把将事件侦听器附加到父元素 用 event.target 选择目标元素 ---- 作者:Dmitri Pavlutin 翻译:疯狂技术宅

2.6K30

20道高级前端面试题解析

如果一个构造函数,bind了一个对象,用这个构造函数创建出实例会继承这个对象属性吗?为什么?...arr 包含 [] 字符串。...事件流事件流是网页元素接收事件顺序,"DOM2级事件"规定事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生事件捕获,为截获事件提供机会。然后是实际目标接受事件。...虽然捕获阶段在规范中规定不允许响应事件,但是实际上还是会执行,所以有两次机会获取到目标对象。当容器元素及嵌套元素,即在捕获阶段又在冒泡阶段调用事件处理程序时:事件按DOM事件流顺序执行事件处理程序:父级捕获子级捕获子级冒泡父级冒泡且当事件处于目标阶段时

1.2K30

再谈BOM和DOM(4):DOM0DOM2事件处理分析

NN4和IE4浏览器使用是两种兼容DOM。换句话说,虽然浏览器制造商目标一样,但他们解决DOM问题时采用办法却完全不同。...attachEvent不能指定绑定事件发生在捕获阶段还是冒泡阶段,它只能将事件绑定到冒泡阶段,但是并不意味这低版本ie没有事件捕获,它也是先发生事件捕获,再发生事件冒泡,只不过这个过程无法通过程序控制...实事件兼容性问题特别的多,比如获取事件对象方式、绑定和解除绑定事件方式、目标元素获取方式等等,由于古老浏览器现在基本被淘汰,所以也没有必要讲了。...W3C为了兼顾之前标准,将事件发生定义成如下三个阶段: 捕获阶段 --- 从window元素开始发生,一直到目标元素 目标阶段 --- 事件触发 冒泡阶段 --- 从目前元素开始发生,一直到window...Netscapte采用事件捕获,先由不具体元素接收事件,最具体节点最后才接收到事件。

78310

前端高频面试题汇总(二)

于是客户端设置了一个代理服务器,并且指定目标服务器,之后代理服务器向目标服务器转交请求并将获得内容发送给客户端。这样本质上起到了对真实服务器隐藏真实客户端目的。...请求和保持条件:当进程因请求资源而阻塞时,对已获得资源保持不放。剥夺条件:进程已获得资源在未使用完之前,不能剥夺,只能在使用完时由自己释放。...了解预加载最常用方式是使用 js 中 image 对象,通过为 image 对象来设置 scr 属性,来实现图片预加载。事件是什么?事件模型?...事件处理阶段会首先执行目标元素绑定监听事件。然后是事件冒泡阶段,冒泡指的是事件从目标元素冒泡到 document,依次检查经过节点是否绑定了事件监听函数,如果有则执行。...捕获指的是事件从 document 一直向下传播到目标元素,依次检查经过节点是否绑定了事件监听函数,如果有则执行。后面两个阶段和 IE 事件模型两个阶段相同。

55020

面试官:什么是js中事件流以及事件模型?

我们看看百度对于流解释 那连着事件我们是不是就能将事件流理解为从页面接收事件顺序,这些事件连起来就形成了一个像液体一样整体,这个整体中事件又有着自己执行顺序,这就是事件流。...后来ECMAScript将两种模型进行了整合,制定了统一标准:先捕获在冒泡 现在整合后标准事件流就有了三个阶段: 事件捕获阶段(目标捕获阶段接收事件) 目标阶段 (事件执行阶段,此阶段会被归入冒泡阶段...) 事件冒泡阶段 (事件传回Dom根节点) Tips: DOM2级事件规定了在捕获阶段不会涉及到目标阶段事件,但在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发目标事件上事件...六、stopPropagation()阻止捕获 stopPropagation() 方法防止调用相同事件传播。 传播意味着向上冒泡到父元素或向下捕获到子元素。...,想监听所有的标签,标签这里只列了五个,但实际业务中这里有可能会循环出成千上万个标签。

1.9K10

H5页面布局之图片液态化(自适应)处理简述

示意图 我们拿一张比较大图片和一张比较小图片来做例子,首先是一张比较大图片,公司地址一张俯瞰图(在杭州滨江,喜欢交朋友,距离近可以找我玩,请客,哈哈!): ?...先说一下我们平常怎么处理 我们一般写一个div或者是别的元素,准备将一张图片作为背景图时候,我们会这样写: css源码: .test1{ height: 40rem; width: 30rem...background-size:cover; 等比扩展图片来填满元素 background-size:contain; 等比缩小图片来适应元素尺寸 注意事项 下面讲一下用时候需要注意几个地方: 第一...就是css为什么保证图片不会变形,还要不失真,只能将图片等比缩放,那么等比缩放时候就意味着有一些地方是不会出现图片,所以只能是空白来填充!那么怎么解决这样问题呢?...我们可以设置高度,或者设置时候将高度用百分比表示就行了!

1.1K40

75个JavaScript面试题集锦,内含解答,自测 JS 掌握程度

事件传播有三个阶段: 捕获阶段–事件从 window 开始,然后向下到每个元素,直到到达目标元素目标阶段–事件已达到目标元素。...冒泡阶段–事件从目标元素冒泡,然后上升到每个元素,直到到达 window。 ? 7. 什么是事件冒泡? 当事件发生在DOM元素上时,该事件并不完全发生在那个元素上。...当事件发生在 DOM 元素上时,该事件并不完全发生在那个元素上。在捕获阶段,事件从window开始,一直到触发事件元素。...具体更多规则可以对参考之前文章: 对 JS 中相等和全等操作符转化过程一直很迷惑,直到有了这份算法 15. 为什么在 JS 中比较两个相似的对象时返回 false?...,是因为IIFE会为每次迭代创建一个作用域,我们捕获i值并将其传递给currentIndex参数,因此调用IIFE时,每次迭代currentIndex值都是不同

13K94

Web前端面试敲重点知识,14个TypeScript核心基础面试题和答案

,编译后,我们将得到简单、普通 JavaScript,TypeScript 设计目标是为开发大型应用而生 image.png 2、TypeScript 中原始类型有哪些 ?...我们使用数组来存储相同类型值,数组是有序和索引值集合 索引从 0 开始,即第一个元素索引为 0,第二个元素索引为 1,依此类推 image.png 4、什么是 any 类型,何时使用 ?...any类型允许你将任何类型分配给 any 类型变量 image.png 5、什么是void,什么时候使用void类型 ?...void 表示变量没有类型,它充当与任何相反类型,它在返回值函数中特别有用 如果变量是 void 类型,则只能将 null 或 undefined 值分配给该变量。...protected:受保护成员仅对包含该成员子类可见。扩展容器类外部代码无法访问受保护成员。 private:私有成员仅在类内部可见,没有外部代码可以访问类私有成员。

11.4K10
领券