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 --- .../api/xmlhttprequest/loadend_event/index.html | 89 +++++++++++++ .../api/xmlhttprequest/loadstart_event/index.html | 91 +++++++++++++ .../api/xmlhttprequest/progress_event/index.html | 146 +++++++++++++++++++++ 3 files changed, 326 insertions(+) create mode 100644 files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html create mode 100644 files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html create mode 100644 files/zh-cn/web/api/xmlhttprequest/progress_event/index.html (limited to 'files/zh-cn/web/api/xmlhttprequest') diff --git a/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html new file mode 100644 index 0000000000..529a0b1673 --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/loadend_event/index.html @@ -0,0 +1,89 @@ +--- +title: loadend +slug: Web/Events/loadend +translation_of: Web/API/XMLHttpRequest/loadend_event +--- +

loadend事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。这适用于 {{domxref("XMLHttpRequest")}}调用, 以及{{htmlelement("img")}}或{{htmlelement("video")}}之类元素的内容。

+ +

General info

+ +
+
规范
+
Progress
+
接口
+
ProgressEvent
+
可冒泡
+
否
+
可取消
+
否
+
触发对象
+
例如{{domxref("HTMLImageElement")}}
+
默认行为
+
无
+
+ +

Properties

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
+ + + + + +

See also

+ + diff --git a/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html new file mode 100644 index 0000000000..60362dd94a --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/loadstart_event/index.html @@ -0,0 +1,91 @@ +--- +title: loadstart +slug: Web/Events/loadstart +tags: + - 事件 +translation_of: Web/API/XMLHttpRequest/loadstart_event +--- +

当程序开始加载时，loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用, 也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素.

+ +

基本信息

+ +
+
规范文档
+
Progress
+
接口
+
ProgressEvent
+
冒泡
+
No
+
可取消
+
No
+
目标
+
Element
+
默认动作
+
None
+
+ +

属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
lengthComputable {{readonlyInline}}{{jsxref("Boolean")}}Specifies whether or not the total size of the transfer is known. Read only.
loaded {{readonlyInline}}unsigned long (long)The number of bytes transferred since the beginning of the operation. This doesn't include headers and other overhead, but only the content itself. Read only.
total {{readonlyInline}}unsigned long (long)The total number of bytes of content that will be transferred during the operation. If the total size is unknown, this value is zero. Read only.
+ +

相关事件

+ + + +

了解更多

+ + diff --git a/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html new file mode 100644 index 0000000000..6a63ab9d5e --- /dev/null +++ b/files/zh-cn/web/api/xmlhttprequest/progress_event/index.html @@ -0,0 +1,146 @@ +--- +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