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

若是上面四道题，你作不对，说明了两件事
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的出现顺序是什么样的？

题目5、题目六和题目七的答案

题目五：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