ProgressEvent

建構函式

ProgressEvent()

使用給定的引數建立一個 ProgressEvent 事件。

例項屬性

也繼承自其父級 Event 的屬性.

ProgressEvent.lengthComputable 只讀

一個布林標誌，指示已傳輸或處理的資料量（loaded）與資料總量（total）之間的比例是否可計算。換句話說，它告訴您進度是否可衡量。

ProgressEvent.loaded 只讀

一個數字，表示已傳輸或處理的資料量。對於瀏覽器在 HTTP 訊息中分派的 ProgressEvent，該值指的是訊息正文的大小（以位元組為單位），不包括標頭和其他開銷。對於總大小未知的壓縮訊息，loaded 可能指的是壓縮資料的大小或未壓縮資料的大小，具體取決於瀏覽器。截至 2024 年，Firefox 中它包含壓縮資料的大小，Chrome 中包含未壓縮資料的大小。在您自己建立的 ProgressEvent 中，您可以為 loaded 分配任何代表相對於 total 值已完成工作量的數值。

ProgressEvent.total 只讀

一個數字，表示正在傳輸或處理的資料的總大小。對於瀏覽器在 HTTP 訊息中分派的 ProgressEvent，該值指的是資源的（以位元組為單位的）大小，並從 Content-Length 標頭派生。在您自己建立的 ProgressEvent 中，如果您希望避免透露資源的精確位元組數，可以將 total 規範化為 100 或 1 等值。例如，如果使用 1 作為總數，那麼 loaded 將是介於 0 和 1 之間的十進位制值。

例項方法

繼承其父級 Event 的方法。

示例

顯示請求狀態

以下示例向新的 XMLHttpRequest 物件新增一個 ProgressEvent，並使用它來顯示請求的狀態。

const progressBar = document.getElementById("p"),
  client = new XMLHttpRequest();
client.open("GET", "magical-unicorns");
client.onprogress = (pe) => {
  if (pe.lengthComputable) {
    progressBar.max = pe.total;
    progressBar.value = pe.loaded;
  }
};
client.onloadend = (pe) => {
  progressBar.value = pe.loaded;
};
client.send();

在 ProgressEvent 中使用分數

資源的位元組總數可能會透露過多關於該資源的資訊，因此可以在 ProgressEvent() 建構函式中使用 0 到 1 之間的數字，而不是。

function updateProgress(loaded, total) {
  const progressEvent = new ProgressEvent("progress", {
    lengthComputable: true,
    loaded,
    total,
  });

  document.dispatchEvent(progressEvent);
}

document.addEventListener("progress", (event) => {
  console.log(`Progress: ${event.loaded}/${event.total}`);
});

updateProgress(0.123456, 1);

規範

瀏覽器相容性

另見

• Event 基介面。