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 基接口。