从八道面试题看JavaScript DOM事件机制
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
本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hbch0chakbb
从八道面试题看JavaScript DOM事件机制的更多相关文章
- DOM事件机制进一步理解
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 走进javascript——DOM事件
DOM事件模型 在0级DOM事件模型中,它只是简单的执行你为它绑定的事件,比如你为某个元素添加了一个onclick事件,当事件触发时,它只是去调用我们绑定的那个方法,不再做其他的操作. 在2级DOM事 ...
- JavaScript Dom 事件
JavaScript Dom 事件 对于事件需要注意的要点: // this标签当前正在操作的标签. this // event封装了当前事件的内容. even 常用事件 // 鼠标单击.触发事件 ...
- JavaScript DOM 事件模型
JavaScript DOM 事件模型 JavaScript 是基于面向对象和事件驱动的一门语言,事件模型是 DOM 中至关重要的内容,理解事件驱动机制.事件反馈.事件冒泡.事件捕获以及事件委托能帮助 ...
- DOM事件机制
前言 本文主要介绍DOM事件级别.DOM事件模型.事件流.事件代理和Event对象常见的应用,希望对你们有些帮助和启发! 本文首发地址为GitHub博客,写文章不易,请多多支持与关注! 一.DOM事件 ...
- JavaScript的事件机制
JavaScript的事件机制 摘要 事件是将JavaScript脚本与网页联系在一起的主要方式,是JavaScript中最重要的主题之一,深入理解事件的工作机制以及它们对性能的影响至关重要.本文将详 ...
- 深入研究JavaScript的事件机制
本篇开始将回顾下Javascript的事件机制.同时会从一个最小的函数开始写到最后一个具有完整功能的,强大的事件模块.为叙述方便将响应函数/回调函数/事件Listener/事件handler都称为事件 ...
- Redis常见的八道面试题
一.memcached与redis的区别? 1.存储方式不同.memcached把数据全部存在内存之中,断电之后会挂掉,而redis虽然也用到了内存,但是会有部分数据存在硬盘中,保证数据持久性. ...
- JavaScript DOM事件模型
早期由于浏览器厂商对于浏览器市场的争夺,各家浏览器厂商对同一功能的JavaScript的实现都不进相同,本节内容介绍JavaScript的DOM事件模型及事件处理程序的分类. 1.DOM事件模型.DO ...
随机推荐
- mysql通过mysqldunp命令重做从库详细操作步骤
mysql通过mysqldunp命令重做从库详细操作步骤 背景 生产环境上的主从复制集群,因为一些异常或人为原因,在从库做了一些操作,导致主从同步失败.一般修复起来比较麻烦,通过重做mysql从库的方 ...
- LeetCode-040-组合总和 II
组合总和 II 题目描述:给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字 ...
- Triple Shift
来源:Atcoder ARC 136 B - Triple Shift (atcoder.jp) 题解:这道题我们不可能去硬模拟(大多数这种题都不能这样去模拟的),然后我们就要去发现特性, 发现把 a ...
- 重磅 | 腾讯云服务网格开源项目 Aeraki Mesh 加入 CNCF 云原生全景图
作者 赵化冰,腾讯云工程师,Aeraki Mesh 创始人,Istio member,Envoy contributor,目前负责 Tencent Cloud Mesh 研发工作. 摘要 近日,腾讯云 ...
- laravel7文件上传至七牛云并保存在本地图片
HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...
- Redis常用命令代码实例集合
//连接本地的 Redis 服务 $redis = new Redis(); $redis->connect('127.0.0.1', 6379); $redis->auth('12345 ...
- 宏参数(Arguments)的扩展
宏分为两种,一种是 object-like 宏,比如: #define STR "Hello, World!" 另一种是 function-like 宏,比如: #define M ...
- Centos7 环境下设置固定IP
1. 在/etc/sysconfig/network-scripts/下创建ifcfg-eth0配置文件, 并填入以下内容: DEVICE=eth0 TYPE=Ethernet IPADDR=192. ...
- CTS,CLS,CLR
1)CTS通用类型系统(Common Type System) CTS不但实现了COM的变量兼容类型,而且还定义了通过用户自定义类型的方式来进行类型扩展.任何以.NET平台作为目标的语言必须建立它的数 ...
- JDBC 使用详解
1.JDBC 编程步骤: 加载驱动程序; Class.forName(driverClass) 加载Mysql驱动:Class.forName("com.mysql.jdbc.Driver& ...