从八道面试题看JavaScript DOM事件机制
2021-01-30 20:14
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
下一篇：Python求差集
文章标题：从八道面试题看JavaScript DOM事件机制
文章链接：http://soscw.com/index.php/essay/49188.html