web應用的生命周期

從第4步開始頁面的建構

頁面建構

頁面的建構過程，主要做兩件事

• 解析HTML代碼并建構文檔對象模型（DOM）
• 執行JavaScript代碼。

當浏覽器在頁面建構階段遇到了腳本節點，就會停止HTML到DOM的建構，轉而開始執行JavaScript代碼，依次執行全局JS代碼，若期間調用了函數，則執行JS 函數内的代碼。

JS 代碼執行結束後，将繼續HTML到DOM的建構，直到再次遇到腳本節點。

這兩件事不斷交替，直到整個頁面建構完畢，接着進入事件處理階段。

事件處理

頁面建構完成後，使用者即可看到頁面，并與頁面進行互動，這些互動，都通過事件的形式跟蹤和觸發。

常見的事件有：

• 浏覽器事件，例如當頁面加載完成後或無法加載時；
• 網絡事件，例如來自伺服器的響應（Ajax事件和伺服器端事件）；
• 使用者事件，例如滑鼠單擊、滑鼠移動和鍵盤事件；
• 計時器事件，當timeout時間到期或又觸發了一次時間間隔。

要想讓頁面對事件做出響應，需要先注冊事件 —— 即告訴浏覽器，在事件發生時，要執行哪些 JS 代碼。

注冊事件

• 方式一：【不推薦】 把函數賦給某個特殊屬性

缺點：對于某個事件隻能注冊一個事件處理器

window.onload = function（）{};
document.body.onclick = function（）{};      

• 方式二：使用内置addEventListener方法

優點：對于某個事件可以注冊多個事件處理器

.body.addEventListener（"mousemove", function（） {    ←---  為mousemove事件注冊處理器
      var second = document.getElementById（"second"）;
      addMessage（second, "Event: mousemove"）;
   }）;

   document.body.addEventListener（"click", function（）{    ←---  為click事件注冊處理器
      var second = document.getElementById（"second"）;
      addMessage（second, "Event: click"）;
   }）;      

事件輪詢

因為 JS 是單線程執行，是以事件會排成一個隊列，通過事件輪詢機制，一個個執行（先進先出），圖示如下：

處理事件