適用イベントループの例

6334 ワード
TIL_PLUS イベントループ テキストリンク

イベントループの例として理解

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>Click to add</button>
    <script>
      const button = document.querySelector('button');
      button.addEventListener('click', () => {
        const element = document.createElement('h1');
        document.body.appendChild(element);
        element.style.color = 'red';
        element.innerText = 'hello';
      });
    </script>
  </body>
</html>
以上のコードのbutton.addEventListenerを表示すると、要素とドキュメントが作成されます.appendをbodyに追加し、styleを指定します.動作は正常です.
ただし、コードの流れでは、bodyに追加する前にstyleを指定して追加する必要がある場合があります.
eventの動作原理は次のとおりです.
  • addEventListenerは、clickイベントの実行時にコールバック関数をTaskキューに入れる.
  • 呼び出しスタックが空の場合、Taskキューのコールバック関数が呼び出しスタックに格納されます.
  • イベントループは、callスタックに入るcallback関数がすべて実行されるのを待つ.
  • コールバック関数がすべて実行されると、イベントループはループを再開します.
  • イベントループはループであり、レンダリングが発生するとコールバック関数がすべて実行されるため、スタイルが適用されるレンダリングツリーが形成されます.
    • DOMについて
    Semantic Web & Semantic Tags