ProgressEvent

ProgressEvent 接口是测量如 HTTP 请求(一个XMLHttpRequest,或者一个 <img><audio><video><style> 或 <link> 等底层资源的加载)等底层流程进度的事件。

构造方法

ProgressEvent()
用给定的参数创建一个 ProgressEvent 事件。

属性

同时继承它的父元素 Event 的属性。

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

方法

同时继承它的父元素 Event 的方法。

ProgressEvent.initProgressEvent()
使用被弃用的 Document.createEvent("ProgressEvent") 方法,来初始化一个已经创建好的 ProgressEvent

示例

下面的示例为一个新建的 XMLHTTPRequest 添加了一个 ProgressEvent,并使用它来显示请求状态。

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()

规范

规范 状态 注解
XMLHttpRequest
ProgressEvent
Living Standard

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
ProgressEventChrome Full support 1Edge Full support 12Firefox Full support 3.5IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
ProgressEvent() constructorChrome Full support YesEdge Full support ≤79Firefox Full support 22IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 22Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
initProgressEvent
DeprecatedNon-standard
Chrome No support 1 — 17Edge No support 12 — 79Firefox No support 3.5 — 22IE Full support 10Opera No support ? — 15Safari No support ? — ?WebView Android No support NoChrome Android No support ? — ?Firefox Android No support 4 — 22Opera Android No support ? — 14Safari iOS No support ? — ?Samsung Internet Android No support No
lengthComputableChrome Full support 50Edge Full support 12Firefox Full support 3.5IE Full support YesOpera Full support 37Safari Full support 3.1WebView Android Full support 50Chrome Android Full support 50Firefox Android Full support 4Opera Android Full support 37Safari iOS Full support 2Samsung Internet Android Full support 5.0
loadedChrome Full support YesEdge Full support 12Firefox Full support 3.5IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
totalChrome Full support YesEdge Full support 12Firefox Full support 3.5IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

相关链接

  • The Event base interface.