从八道面试题看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

posted @   热爱前端知识  阅读(295)  评论(0编辑  收藏  举报
编辑推荐:
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
阅读排行:
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· AI工具推荐:领先的开源 AI 代码助手——Continue
· 探秘Transformer系列之(2)---总体架构
· V-Control:一个基于 .NET MAUI 的开箱即用的UI组件库
点击右上角即可分享
微信分享提示