从八道面试题看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 ...
随机推荐
- vue项目部署到IIS服务器上
前端Vue项目需要部署到IIS服务器上: 准备工作: 1:部署IIS服务器 2:项目npm run build打包生成需要部署的文件(dist文件夹)我的是manage文件夹 开始部署: 1:复制文件 ...
- Java中ArrayList和LinkedList的异同
一:ArrayList和LinkedList的大致区别如下: 1.ArrayList是实现了基于动态数组的数据结构,ArrayList实现了长度可变的数组,在内存中分配连续的空间.遍历元素和随机访问元 ...
- vue--axios异步请求及文件目录结构分析(个人记录)
我这里使用axios进行异步加载 axios是一个库,并不是vue中的第三方插件,使用时不能通过Vue.use()安装插件,需要在原型上进行绑定,即直接在main.js中使用Vue.prototype ...
- LeetCode-093-复原 IP 地址
复原 IP 地址 题目描述:给定一个只包含数字的字符串,用以表示一个 IP 地址,返回所有可能从 s 获得的 有效 IP 地址 .你可以按任何顺序返回答案. 有效 IP 地址 正好由四个整数(每个整数 ...
- 『现学现忘』Docker基础 — 11、Docker安装的问题补充
目录 1.问题复现 2.解决冲突 3.重新安装docker-ce-selinux 4.安装Docker-ce 5.总结 通过yum安装Docker的时候,安装20版本的Docker没有出现问题,在安装 ...
- 用Vue编写一个简单的仿Explorer文件管理器
大家一定很熟悉你桌面左上角那个小电脑吧,学名Windows资源管理器,几乎所有的工作都从这里开始,文件云端化是一种趋势.怎样用浏览器实现一个Web版本的Windows资源管理器呢?今天来用Vue好好 ...
- promise 理解与总结
对Promise的理解 Promise是异步编程的一种解决方案,可以获取异步操作的消息,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更强大. 所谓Promise,简单说就是一个容器,里面保 ...
- 25 面向对象编程 继承概念 代码 快捷键 super注意点
继承概念 继承的本质是对某一批的抽象,从而实现对现实世界更美好的建模. extends的意思的"扩展".子类是父类的扩展. JAVA中类只有单继承,没有多继承!理解:一个儿子只能有 ...
- svelte组件:Svelte自定义弹窗Popup组件|svelte移动端弹框组件
基于Svelte3.x自定义多功能svPopup弹出框组件(组件式+函数式) 前几天有分享一个svelte自定义tabbar+navbar组件,今天继续带来svelte自定义弹窗组件. svPopup ...
- ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer)
一.倒排索引 1. 构建倒排索引 例如说有下面两个句子doc1,doc2 doc1:I really liked my small dogs, and I think my mom also like ...