8つの面接試験問題からJavaScript DOM事件のメカニズムを見ます.

As we all know、事件の構造は実はとても簡単で、 と のこの2つの点にほかならないです.筆者はもう詳しく説明しません.ネット上の関連記事がいっぱいあります.直接に面接問題を見ましょう.
タイトルが七になると、cssをセットします.

.test2 {
  height: 50px;
}

テーマ1

    



    document.querySelector('.test1').addEventListener('click',function () {
        console.log(1)
    })
    document.querySelector('.test2').addEventListener('click',function () {
        console.log(2)
    })

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目二

    



    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    }, true)
    document.querySelector('.test2').addEventListener('click', function () {
        console.log(2)
    }, true)

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目三

    



    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    })
    document.querySelector('.test2').addEventListener('click', function () {
        console.log(2)
    }, true)

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目四

    



    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    }, true)
    document.querySelector('.test2').addEventListener('click', function () {
        console.log(2)
    })

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目一到四的答案

题目一：2,1
题目二：1,2
题目三：2,1
题目四：1,2

如果上面四道题，你做不对，说明了两件事
一、你对事件机制的全过程不了解，其实很简单 ，
二、你对addEventListener的第三个参数不了解，MDN文書を見ましょう

OK，上面问题都搞清楚了吗？下面继续咯~

题目五

    



    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    })
    document.querySelector('.test2').addEventListener('click', function () {
        console.log(2)
    }, true)

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目六

    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    }, true)
    document.querySelector('.test1').addEventListener('click', function () {
        console.log(2)
    })

请问：点击div.test1后，数字1和2，谁先被打印出来？

题目七

    document.querySelector('.test1').addEventListener('click', function () {
        console.log(1)
    })
    document.querySelector('.test1').addEventListener('click', function () {
        console.log(2)
    }, true)

请问：点击div.test1后，数字1和2的出现顺序是什么样的？

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

题目五：2,1
题目六：1,2
题目七：1,2

我相信，题目五和题目六肯定是没问题的，但题目七可能和你想的不太一样，难道不是先捕获再冒泡了吗？

当然不是
为什么呢？
因为 ， ， ！

终极一题

Click me 

    document.querySelector('label').addEventListener('click',function () {
        console.log(1)
    })
    document.querySelector('input').addEventListener('click',function () {
        console.log(2)
    })

すみません、labelをクリックしたら、数字の1と2の出現順序はどうなりますか?
答え:1,2,1Labelとinputはバインディングされている label ， labelプロセスであるため、今回は内部input要素のイベントを傍受することは問わないので、1を先に打って終了してから、もう一度イベントのメカニズムを実行します.今回は正常なイベントの流れに従って、2,1を打ち出しました.