从八道面试题看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
最新文章
- 【Java EE 学习 67 上】【OA项目练习】【JBPM工作流的使用】
- js获取新浪天气接口
- python学习总结1
- android之消息机制(一)
- [原创] IIS7下顶级域名301跳转到WWW域名
- hdu4291之矩阵快速幂
- Android 官方文档:(二)应用清单 —— 2.2 &;lt;action&;gt;标签
- 算法导论(第三版)Problems2(归并插入排序、数列逆序计算)
- 福建省队集训被虐记——DAY1
- WebApi Help Pages
- 【算法设计与分析基础】24、kruskal算法详解
- L2-006 树的遍历 (25 分)
- OpenCV3如何使用SIFT和SURF Where did SIFT and SURF go in OpenCV 3?
- 一.C#基础:标识符和关键字
- neutron相关知识
- PHP-CPP开发扩展(四)
- python简介及安装配置
- apscheduler -定时任务
- Python3------反射详解
- ajax异步加载回跳定位