资讯专栏INFORMATION COLUMN

从八道面试题看JavaScript DOM事件机制

CollinPeng / 2960人阅读

摘要:事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题题目一到七,统一设置题目一请问点击后,数字和,谁先被打印出来题目二请问点击后,数字和,谁先被打印出来题目三请问点击后,数字和,谁先被打印出来题

As we all know,事件机制其实很简单,无非冒泡捕获
这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题

题目一到七,统一设置css

.test2 {
  height: 50px;
}
题目一

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目二

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目三

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目四

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目一到四的答案

题目一:2,1
题目二:1,2
题目三:2,1
题目四:1,2

如果上面四道题,你做不对,说明了两件事
一、你对事件机制的全过程不了解,其实很简单事件机制是先进行捕获,再进行冒泡
二、你对addEventListener的第三个参数不了解,看MDN文档吧

OK,上面问题都搞清楚了吗?下面继续咯~

题目五

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目六

请问:点击div.test1后,数字1和2,谁先被打印出来?

题目七

请问:点击div.test1后,数字1和2的出现顺序是什么样的?

题目五、题目六和题目七的答案

题目五:2,1
题目六:1,2
题目七:1,2

我相信,题目五和题目六肯定是没问题的,但题目七可能和你想的不太一样,难道不是先捕获再冒泡了吗?

当然不是
为什么呢?
因为如果被监听的元素没有子元素,那么哪个监听代码写在前面,就先执行哪个!

终极一题

请问:点击label后,数字1和2的出现顺序是什么样的?

答案:1,2,1

因为label和input是有绑定的
点击label后,浏览器自动帮你再点击一次label
过程就是先进行一次事件机制,这一次对内部input元素的事件监听是不管不问的,所以先打出1
结束后,再进行一次事件机制,这一次,按照正常事件机制流程走,所以接着打出了2,1

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93592.html

相关文章

  • 八道面试题看JavaScript DOM事件机制

    摘要:事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题题目一到七,统一设置题目一请问点击后,数字和,谁先被打印出来题目二请问点击后,数字和,谁先被打印出来题目三请问点击后,数字和,谁先被打印出来题 As we all know,事件机制其实很简单,无非冒泡和捕获这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题 题目一到七,统一...

    lieeps 评论0 收藏0
  • 经典面试题看var与let

    摘要:这也就解释了以下代码运行正常那么,的循环里发生了什么呢变量提升 for (var index = 0; index < 5; index++) { setTimeout(function (){ console.log(index);//5 }, 10) } console.log(index)// 5 这是个老生常谈的问题,但是今天我才明白过来实际是怎么回事。使用ES...

    沈俭 评论0 收藏0
  • 帝都寒冬一年经验前端面试总结

    摘要:不过幸运的是所有面试的公司都给了,在这里总结下经验吧。这里推荐下我当时看的一篇的面经,木易杨老师写的大厂高级前端面试题汇总。 前言 本人毕业一年,最近陆续面试了头条、瓜子、360、猿辅导、中信银行、老虎等公司,由于最近比较寒冬而且招1-3年的并不多,再加上自己对公司规模和位置有一定要求,所以最后合适的也就这几家了。不过幸运的是所有面试的公司都给了offer,在这里总结下经验吧。掘金:h...

    Scott 评论0 收藏0
  • 「前端面试题系列7」Javascript 中的事件机制原生到框架)

    摘要:要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。当用阻止浏览器的默认行为时,会做下面这件事停止回调函数执行并立即返回。 showImg(https://segmentfault.com/img/bVboOcb?w=750&h=422); 前言 这是前端面试题系列的第 7 篇,你可能错过了前面的篇章,可以在这里找到: 理解函数的柯里化 ES6 中箭头函数的用法 thi...

    Tony 评论0 收藏0
  • 一道题看Python的LEGB规则

    摘要:例题核心编程第二版变量作用域和命名空间一节有以下一道题目请问输出结果是什么要想解这道题,必须先了解中的一些概念的变量名解析机制有时称为。 例题 《核心编程(第二版)》变量作用域和命名空间一节有以下一道题目 # coding=utf-8 #!/usr/bin/env python def proc1(): j,k = 3,4 print j == %d and k ==...

    iamyoung001 评论0 收藏0

发表评论

0条评论

CollinPeng

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<