从八道面试题看JavaScript DOM事件机制
原文:https://segmentfault.com/a/1190000013894510#articleHeader0
As we all know,事件机制其实很简单,无非冒泡
和捕获
这两点,笔者不再赘述,网上相关文章一大堆,下面让我们直接看面试题
题目一到七,统一设置css
.test2 {height: 50px;
}
题目一
<div class="test1"><div class="test2"></div>
</div>
<script>document.querySelector('.test1').addEventListener('click',function () {console.log(1)})document.querySelector('.test2').addEventListener('click',function () {console.log(2)})
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目二
<div class="test1"><div class="test2"></div>
</div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)}, true)document.querySelector('.test2').addEventListener('click', function () {console.log(2)}, true)
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目三
<div class="test1"><div class="test2"></div>
</div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)})document.querySelector('.test2').addEventListener('click', function () {console.log(2)}, true)
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目四
<div class="test1"><div class="test2"></div>
</div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)}, true)document.querySelector('.test2').addEventListener('click', function () {console.log(2)})
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目一到四的答案
题目一:2,1
题目二:1,2
题目三:2,1
题目四:1,2
如果上面四道题,你做不对,说明了两件事
一、你对事件机制的全过程不了解,其实很简单事件机制是先进行捕获,再进行冒泡
二、你对addEventListener
的第三个参数不了解,看MDN文档吧
OK,上面问题都搞清楚了吗?下面继续咯~
题目五
<div class="test1"><div class="test2"></div>
</div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)})document.querySelector('.test2').addEventListener('click', function () {console.log(2)}, true)
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目六
<div class="test1"></div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)}, true)document.querySelector('.test1').addEventListener('click', function () {console.log(2)})
</script>
请问:点击div.test1后,数字1和2,谁先被打印出来?
题目七
<div class="test1"></div>
<script>document.querySelector('.test1').addEventListener('click', function () {console.log(1)})document.querySelector('.test1').addEventListener('click', function () {console.log(2)}, true)
</script>
请问:点击div.test1后,数字1和2的出现顺序是什么样的?
题目五、题目六和题目七的答案
题目五:2,1
题目六:1,2
题目七:1,2
我相信,题目五和题目六肯定是没问题的,但题目七可能和你想的不太一样,难道不是先捕获再冒泡了吗?
当然不是
为什么呢?
因为如果被监听的元素没有子元素,那么哪个监听代码写在前面,就先执行哪个!
终极一题
<label>Click me <input type="text"></label>
<script>document.querySelector('label').addEventListener('click',function () {console.log(1)})document.querySelector('input').addEventListener('click',function () {console.log(2)})
</script>
请问:点击label后,数字1和2的出现顺序是什么样的?
答案:1,2,1
因为label和input是有绑定的
点击label后,浏览器自动帮你再点击一次label
过程就是先进行一次事件机制,这一次对内部input元素的事件监听是不管不问的,所以先打出1
结束后,再进行一次事件机制,这一次,按照正常事件机制流程走,所以接着打出了2,1
从八道面试题看JavaScript DOM事件机制相关推荐
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- 深入理解DOM事件机制
前言 本文主要介绍: DOM事件级别 DOM事件流 DOM事件模型 事件代理 Event对象常见的方法和属性 一.DOM事件级别 针对不同级别的DOM,我们的DOM事件处理方式也是不一样的. DOM级 ...
- 移除元素所有事件监听_前端日记—DOM 事件机制和事件委托
DOM事件机制 事件指的就是就是onclick,onmouseover,onmouseout等. 2002年W3C规定了浏览器的事件调用顺序标准,这其中有两个关键术语. 事件捕获:简单一点解释事件捕获 ...
- 移除元素所有事件监听_DOM 事件模型或 DOM 事件机制
DOM 事件模型 DOM 的事件操作(监听和触发),都定义在EventTarget接口.所有节点对象都部署了这个接口,其他一些需要事件通信的浏览器内置对象(比如,XMLHttpRequest.Audi ...
- addeventlistener事件参数_从Chrome源码看浏览器的事件机制
在上一篇<从Chrome源码看浏览器如何构建DOM树>介绍了blink如何创建一棵DOM树,在这一篇将介绍事件机制. 上一篇还有一个地方未提及,那就是在构建完DOM之后,浏览器将会触发DO ...
- Java后端面试必问:四十八道面试题及答案最新整理(速看速藏)
在本篇文章里小编给大家整理了一篇关于Java后端面试题最新整理内容,需要的朋友们可以参考下. 我们学习java知识,除了要做基础的程序运行外,不可避免的要在面试中遇到一些理论的考察.有些小伙伴程序做的 ...
- C语言-八道笔试题由浅入深玩转指针
前言:本文章将带你刷8道比较有意思的指针笔试题,笔者将由深入浅出解析这些题目!必要的题目,作者已经加上内存布局图!希望本文对你有所帮助! 目录 一.笔试题1 -指针与一维数组的关系-值 二.笔试题2- ...
- Redis常见的八道面试题
一.memcached与redis的区别? 1.存储方式不同.memcached把数据全部存在内存之中,断电之后会挂掉,而redis虽然也用到了内存,但是会有部分数据存在硬盘中,保证数据持久性. 2. ...
- 指针进阶·八道笔试题(四)
目录 指针笔试题 001 解析 002 解析 003 解析 004 解析 005 解析 006 解析 007 解析 008 解析 结束语 指针笔试题 001 //001 int main() {int ...
最新文章
- 转 spring配置文件
- java 中常用方法_java_中常用的方法总结
- 有的人撑死,有的人饿死,有的人吓死
- 第一次创建springboot框架项目
- 中国十大穷光蛋排行榜
- 震惊!Faker.js作者删库,理由竟然是 拒绝被“白嫖”~
- java例程练习(数组复制与arraycopy)
- matlab求解数学题,MATLABR2013a求解数学问题
- [转帖]常用项目管理软件介绍
- Python实现PDF转TXT
- Delphi 德尔菲法
- 50步带你在windows PC上创建属于自己的虚拟机(一)
- APP推广渠道ROI预测
- 网络协议--05--IP子网划分
- 【渝粤题库】陕西师范大学202021宏观经济学作业(高起本、专升本)
- php 美团配送 生成签名
- Linux里get命令,Linux apt-get 命令用法详解-Linux命令大全(手册)
- ECMAScript6常用语法
- aix系统挂载nas
- 一位职场老前辈呕心沥血总结的心得
热门文章
- 中国工程科学院计算机院士,冯夏庭 中国工程院院士
- mac 播放器MPV 下载地址
- 利用python实现简易地雷游戏
- 【dvwa】--SQL注入
- 关于使用python实现AIR724ug连接阿里云平台
- 五部超燃科幻电影,九成没有全部看过
- php的和谐脏话,大司马仅有的两次说脏话,听完网友笑出声,直播效果一片和谐!...
- QT多个ui界面设计
- %3chtml%3e%3c html,在JEditorPane中显示HTML的问题java
- wiringPi库与bcm_2835区别