onloadイベント; readystatechange、DOMContentLoaded事件

ときに、文書  readyState のプロパティが変更、トリガとなる  readystatechange イベントを。

onloadイベントは、ロードされたページや画像の直後に発生しました

純粋なHTMLが完全にロードされ、解析されたときにDOMContentLoaded イベントが終了負荷にスタイルシート、画像やサブフレームを待たずに、トリガされます。

< divのクラス= "コントロール" > 
  < ボタンのid = "リロード" タイプ= "ボタン" >再読み込み</ ボタン> 
</ divの> 

< divのクラス= "イベントログ" > 
  < ラベル>イベントログ：</ ラベル> 
  < TEXTAREA 読み取り専用クラス= "イベントログ内容" 行= "8" COLS = "30" > </ TEXTAREA > 
</ DIV >

constのログ= document.querySelector（」イベント・ログの内容。）; 
constのリロード = document.querySelector（ '＃リロード' ）; 

reload.addEventListener（ ）（'クリック' => { 
  log.textContent = '' ; 
  window.setTimeoutは（（） => { 
      window.location.reload（真）
  }、 200 ）; 
}）; 

window.addEventListener（ '負荷'、（イベント）=> { 
    log.textContent = log.textContent + 'ロード\ n' ; 
}）; 

document.addEventListener（ 'readystatechange'、（イベント）=> { 
    ログ。= log.textContent + `のreadyState：$ {document.readystateで} \ N '。
}）; 

document.addEventListener（ 'DOMContentLoaded'、（イベント）=> { 
    log.textContent = log.textContent + `DOMContentLoaded \ N '; 
}）;