イベントフェーズの流れを確認する

あいうえお
マウスの右クリックから検証を選択してconsoleタグをクリックしてください。

  <script type="text/javascript">

      let p=document.getElementById('p');

    // ------------------------------------------------------------

    // DOM オブジェクトのすべての子孫を検索する関数

    // ------------------------------------------------------------

    let array = ['apple','banana','lemon','orange'];
    console.log(array);
    let mystring = "Hello world!";
    let mynumber = 1234;
    console.log("The message is: " + "%s" + " %d", mystring, mynumber);
    function DomNodeFindAllDescendants(node,func){

      function f(n){

       let nodes = n.childNodes;

        let i;

        let num = nodes.length;

        let a = new Array();

        for(i=0;i < num;i++){ a[i] = nodes[i]; }

        for(i=0;i < num;i++){

          node = func(a[i]);

          if(node){ return node; }

          node = f(a[i]);

          if(node){ return node; }

        }

        return null;

      }

      return f(node);

    }

    // イベントリスナーに対応している

    if(window.addEventListener){

      // ------------------------------------------------------------

      // マウスボタンを押したときに実行される関数

      // ------------------------------------------------------------

      function MouseDownFunc(e){

        let current = e.currentTarget;

        let target = e.target;

        console.log("カレント:" + current + "(" + current.nodeName + ")");

        p.innerHTML=target;

        console.log("ターゲット:" + target + "(" + target.nodeName + ")");

        console.log("イベントフェーズ:" + e.eventPhase);

        console.log("---");

      }

      // ------------------------------------------------------------

      // すべてのフェーズでリッスンを開始

      // ------------------------------------------------------------

      // ウィンドウにリスナーを登録

      window.addEventListener("mousedown",MouseDownFunc,true );

      window.addEventListener("mousedown",MouseDownFunc,false );

      // ドキュメントにリスナーを登録

      document.addEventListener("mousedown",MouseDownFunc,true );

      document.addEventListener("mousedown",MouseDownFunc,false );

      

      // コールバック関数を使って、ドキュメントのすべての子孫を検索

      DomNodeFindAllDescendants(document,function (node){

        

        // ドキュメントの子孫にリスナーを登録

        node.addEventListener("mousedown",MouseDownFunc,true );

        node.addEventListener("mousedown",MouseDownFunc,false );

        

        // 検索を継続

        return null;

      });

    }

  </script>