---
title: ProgressEvent
slug: Web/API/ProgressEvent
tags:
  - API
  - 参考
  - 接口
  - 进度事件
translation_of: Web/API/ProgressEvent
---
<div>{{APIRef("DOM Events")}}</div>

<p><strong><code>ProgressEvent</code></strong> 接口是测量如 HTTP 请求（一个<code>XMLHttpRequest</code>，或者一个 {{HTMLElement("img")}}，{{HTMLElement("audio")}}，{{HTMLElement("video")}}，{{HTMLElement("style")}} 或 {{HTMLElement("link")}} 等底层资源的加载）等底层流程进度的事件。</p>

<p>{{InheritanceDiagram}}</p>

<h2 id="构造方法">构造方法</h2>

<dl>
 <dt>{{domxref("ProgressEvent.ProgressEvent", "ProgressEvent()")}}</dt>
 <dd>用给定的参数创建一个 <code>ProgressEvent</code> 事件。</dd>
</dl>

<h2 id="属性">属性</h2>

<p><em>同时继承它的父元素 {{domxref("Event")}} 的属性。</em></p>

<dl>
 <dt>{{domxref("ProgressEvent.lengthComputable")}} {{readonlyInline}}</dt>
 <dd>是一个 {{domxref("Boolean")}} 标志，表示底层流程将需要完成的总工作量和已经完成的工作量是否可以计算。换句话说，它告诉我们进度是否可以被测量。</dd>
 <dt>{{domxref("ProgressEvent.loaded")}} {{readonlyInline}}</dt>
 <dd>是一个 <code>unsigned long long</code> 类型数据，表示底层流程已经执行的工作总量。可以用这个属性和 <code>ProgressEvent.total</code> 计算工作完成比例。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其它开销。</dd>
 <dt>{{domxref("ProgressEvent.total")}} {{readonlyInline}}</dt>
 <dd>是一个 <code>unsigned long long</code> 类型数据，表示正在执行的底层流程的工作总量。当使用 HTTP 下载资源，它只表示内容本身的部分，不包括首部和其它开销。</dd>
</dl>

<h2 id="方法">方法</h2>

<dl>
</dl>

<p><em>同时继承它的父元素 {{domxref("Event")}} 的方法。</em></p>

<dl>
 <dt>{{domxref("ProgressEvent.initProgressEvent()")}} {{deprecated_inline}}{{non-Standard_inline}}</dt>
 <dd>使用被弃用的 {{domxref("Document.createEvent()", "Document.createEvent(\"ProgressEvent\")")}} 方法，来初始化一个已经创建好的 <code>ProgressEvent</code>。</dd>
</dl>

<h2 id="示例">示例</h2>

<p>下面的示例为一个新建的 {{domxref("XMLHTTPRequest")}} 添加了一个 <code>ProgressEvent</code>，并使用它来显示请求状态。</p>

<pre class="brush: js">var progressBar = document.getElementById("p"),
    client = new XMLHttpRequest()
client.open("GET", "magical-unicorns")
client.onprogress = function(pe) {
  if(pe.lengthComputable) {
    progressBar.max = pe.total
    progressBar.value = pe.loaded
  }
}
client.onloadend = function(pe) {
  progressBar.value = pe.loaded
}
client.send()</pre>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注解</th>
  </tr>
  <tr>
   <td>{{SpecName('XMLHttpRequest', '#interface-progressevent', 'ProgressEvent')}}</td>
   <td>{{Spec2('XMLHttpRequest')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.ProgressEvent")}}</p>

<h2 id="相关链接">相关链接</h2>

<ul>
 <li>The {{domxref("Event")}} base interface.</li>
</ul>