关于事件的前端面试题总结

本文首发于前端面试总结@知乎专栏,各位可以通过点击文章下方的阅读原来来访问原文地址

问题一览

  1. mouseover和mouseenter两个事件有什么区别?
  2. 移动端的click事件行为与PC端有什么不同?如何屏蔽掉这个不同?
  3. Event对象中,target和currentTarget的区别?
  4. 说一说什么是事件冒泡,如何阻止事件冒泡?如何阻止默认事件?
  5. 是否了解移动端的点击穿透,原理及解决方法?
  6. 是否了解事件委托?
  7. 什么是事件循环?
  8. css3中有哪些属性可以直接影响JS中的事件?(可以讲一下pointer-events和touch-action属性吗)

问题解答

1.mouseover和mouseenter两个事件有什么区别?

二者的区别是mouseenter不会冒泡(bubble)。

详细解释一下

当二者绑定的元素都没有子元素时,二者的行为是一致的。但是二者内部都包含子元素时,行为就不一样了。

在mouseover绑定的元素中,鼠标每次进入一个子元素就会触发一次mouseover事件,而mouseenter只会触发一次。

下面一篇博文中的例子写的很好,我就不自己写代码了。

https://blog.csdn.net/cao199408/article/details/70210826

2.移动端的click事件行为与PC端有什么不同?如何屏蔽掉这个不同?

移动端的click事件会延迟300ms触发事件回调(只在部分手机浏览器上出现)。

为什么会这样?

因为手机浏览器中需要处理如翻页这样复杂的手势。在用户做翻页或双击放大等操作时,是先将手指触碰到屏幕(此时理应已经触发了click事件),然后再上下移动手指,浏览器开发厂商为了识别这种事件,所以加入了300ms延迟的处理。

解决方法

可以引入Fastclick.js来解决这个问题。它的原理是 FastClick 在检测到touchend事件的时候,会通过 DOM 自定义事件立即触发一个模拟click事件,并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。

3.Event对象中,target和currentTarget的区别?

currentTarget是当事件遍历DOM时,标识事件的当前目标。它总是引用事件处理程序附加到的元素,而不是event.target,event.target标识事件发生的元素。

有个简单的验证方法,你会在下面的例子中看到e.currentTarget一直返回的是body元素,而e.target则随着你点击位置的不同而变化

4.说一说什么是事件冒泡,如何阻止事件冒泡?如何阻止默认事件?

事件冒泡是指 事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接受,然后逐级向上传播到较为不具体的节点(文档)。

阻止事件冒泡的方法。

调用当前事件对象的stopPropagation()方法

阻止默认事件

调用当前事件对象的preventDefault()方法

5.是否了解移动端的点击穿透,原理及解决方法?

有上面click事件300ms延迟的讲解,这个“点击穿透”就能好理解一些。

点击穿透是指在移动端,由于click事件延迟300ms触发,那么如果300ms内,页面显示变化(主要是指DOM的隐藏和显示)的话,会出现实际点击元素触发了touch事件,而300ms后该位置的实际元素又被再次触发了click事件的情况。

下面是我在网上找到的点击穿透的现象详细说明:

点击穿透现象有3种: 点击穿透问题:点击蒙层(mask)上的关闭按钮,蒙层消失后发现触发了按钮下面元素的click事件。 蒙层的关闭按钮绑定的是touch事件,而按钮下面元素绑定的是click事件,touch事件触发之后,蒙层消失了,300ms后这个点的click事件fire,event的target自然就是按钮下面的元素,因为按钮跟蒙层一起消失了。 跨页面点击穿透问题:如果按钮下面恰好是一个有href属性的a标签,那么页面就会发生跳转。 因为 a标签跳转默认是click事件触发 ,所以原理和上面的完全相同。 另一种跨页面点击穿透问题:这次没有mask了,直接点击页内按钮跳转至新页,然后发现新页面中对应位置元素的click事件被触发了。

避免方法在上面的问题中已经说过,可以引入fastclick之类的插件来解决。

6.是否了解事件委托?

这道题通常情况下会有好几种引出方式,看面试官如何带节奏了~

比如,会问你如何给一个超长的商品列表中的每个商品绑定一个点击事件啊?如何解决大量事件绑定造成的内存开销问题啊?

其实,这些问题都是想确认你是否有事件委托的意识。

事件委托是指利用“事件冒泡”,只通过指定一个事件处理程序,来管理某一类型的所有事件。也就是说,当此事件处理程序被触发时,通过当前事件对象中的target来确认究竟是在哪个元素触发的事件,从而达到一次注册 处理多个元素触发事件的目的。

7.什么是事件循环

事件循环是一个大概念,想要讲透不是几句话可以说清的。当然如果面试官问到了,他的初衷也绝对不是想让你透彻的讲解一遍,只是想确认面试者对于JS运行机制的了解程度。

好,我试着笼统地概括一下。

JavaScript是单线程的,“主线程”负责执行所有的同步任务,一旦所有同步任务执行完成,则立即从“任务队列”中读取最优先的任务放到“主线程”中执行,如此循环往复。向“任务队列”插入的是一个个事件处理函数(确切的说是函数地址)或定时任务(setTimeout的回调)。

以上总结参考了以下两篇文章:

并发模型与时间循环:

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/EventLoop

JavaScript 运行机制详解:再谈Event Loop

http://www.ruanyifeng.com/blog/2014/10/event-loop.html

能说出JavaScript是单线程,还有任务队列(或说“事件队列”)的概念,基本就可以了。

8.css3中有哪些属性可以直接影响JS中的事件?(可以讲一下pointer-events和touch-action属性吗)

css3中有两个属性是可以直接影响到JS中的事件的,他们是pointer-events和touch-action。

pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。当该属性值设定为none时 表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。

需要注意的是,如果当前元素的pointer-events属性指定位none,但是当其后代元素的pointer-events属性指定其他值时,鼠标事件可以指向后代元素,在这种情况下,鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。

touch-action 用于指定某个给定的区域是否允许用户操作,以及如何响应用户操作(比如浏览器自带的划动、缩放等)。

最常见的用法是禁用元素(及其不可滚动的后代)上的所有手势,以使用自己提供的拖放和缩放行为(如地图或游戏表面)。

总结:现在很多框架(如Vue、React)已经将事件绑定和处理都封装了,如果你是框架的强依赖开发者的话,很多问题你可能并不会遇到,如你几乎不需要理解Event对象中的target。

但是话说回来,用人单位和面试官(有水平的那种)其实希望面试者是真正掌握JavaScript这门语言,而并不是掌握某某框架的使用方法,大家应该清楚其中的不同。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2018-04-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mini188

学习笔记:delphi之TStringGrid

1、说明 最近加入了一个项目组,使用的开发工具是delphi6,想想又要开始搞这个工具有点小忧伤,但没办法谁让咱就是个打杂的尼。。。 的需求是显示一个类似于Wo...

23050
来自专栏Coding迪斯尼

VUE+WebPack前端游戏设计:实现物体的拖拽动态特效

13030
来自专栏hightopo

原 荐 WebGL 3D 电信机架实战之数据

24060
来自专栏企鹅号快讯

react.js 学习笔记

单向数据流驱动,父节点传递到子节点 react最重要是组件 ReactJS官方地址:https://facebook.github.io/react/ GitH...

228100
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

16060
来自专栏静默虚空的博客

jQuery 事件

什么是事件 页面对不同访问者的响应叫做事件。 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。 常见 DOM 事件: 鼠标事件 ...

23270
来自专栏老司机的简书

老司机读书笔记——Weex学习笔记

Weex整体上与Vue语法大概一直,基本用法由阿里进行二次封装。以下主要介绍Weex的一些内置组件。

36340
来自专栏极客编程

前端的对决:React的JSX与Vue的templates

React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大,相对来说很容易获取和使用。

23420
来自专栏林德熙的博客

win10 uwp dataGrid Microsoft.Toolkit.Uwp.UI.Controls.DataGrid表格控件

首先需要通过 Nuget 搜索 Microsoft.Toolkit.Uwp.UI.Controls.DataGrid 安装

81510
来自专栏Modeng的专栏

Canvas学习系列一:初识canvas

版权声明:本文为原创文章发布于公众号:Modeng , 你可以随意转载但请务必注明出处!!!关注微信公众号:Modeng,回复 「前端书籍」上百本经...

17330

扫码关注云+社区

领取腾讯云代金券