從八道面試題看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