From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- .../index.html" | 146 --------------------- 1 file changed, 146 deletions(-) delete mode 100644 "files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" (limited to 'files/zh-cn/web/events/进度条/index.html') diff --git "a/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" "b/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" deleted file mode 100644 index 6a63ab9d5e..0000000000 --- "a/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: progress event -slug: Web/Events/进度条 -tags: - - API - - Event - - Reference - - Web - - XMLHttpRequest - - progress -translation_of: Web/API/XMLHttpRequest/progress_event ---- -

{{APIRef}}

- -

progress事件会在请求接收到数据的时候被周期性触发。

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}
- -

示例

- -

Live example

- -

HTML

- -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
-
-<textarea readonly class="event-log"></textarea>
- - - -

JS

- -
const xhrButtonSuccess = document.querySelector('.xhr.success');
-const xhrButtonError = document.querySelector('.xhr.error');
-const xhrButtonAbort = document.querySelector('.xhr.abort');
-const log = document.querySelector('.event-log');
-
-function handleEvent(e) {
-    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
-}
-
-function addListeners(xhr) {
-    xhr.addEventListener('loadstart', handleEvent);
-    xhr.addEventListener('load', handleEvent);
-    xhr.addEventListener('loadend', handleEvent);
-    xhr.addEventListener('progress', handleEvent);
-    xhr.addEventListener('error', handleEvent);
-    xhr.addEventListener('abort', handleEvent);
-}
-
-function runXHR(url) {
-    log.textContent = '';
-
-    const xhr = new XMLHttpRequest();
-    addListeners(xhr);
-    xhr.open("GET", url);
-    xhr.send();
-    return xhr;
-}
-
-xhrButtonSuccess.addEventListener('click', () => {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
-});
-
-xhrButtonError.addEventListener('click', () => {
-    runXHR('https://somewhere.org/i-dont-exist');
-});
-
-xhrButtonAbort.addEventListener('click', () => {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
- -

Result

- -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}{{Spec2('XMLHttpRequest')}}
- -

浏览器兼容性

- - - -

{{Compat("api.XMLHttpRequest.progress_event")}}

- -

相关链接

- - -- cgit v1.2.3-54-g00ecf