diff options
Diffstat (limited to 'files/zh-cn/web/events/进度条/index.html')
| -rw-r--r-- | files/zh-cn/web/events/进度条/index.html | 146 |
1 files changed, 0 insertions, 146 deletions
diff --git a/files/zh-cn/web/events/进度条/index.html b/files/zh-cn/web/events/进度条/index.html deleted file mode 100644 index 6a63ab9d5e..0000000000 --- a/files/zh-cn/web/events/进度条/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 ---- -<p>{{APIRef}}</p> - -<p><strong><code>progress</code></strong>事件会在请求接收到数据的时候被周期性触发。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Bubbles</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Cancelable</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("ProgressEvent")}}</td> - </tr> - <tr> - <th scope="row">Event handler property</th> - <td>{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}</td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<h3 id="Live_example">Live example</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: 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></pre> - -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">.event-log { - width: 25rem; - height: 4rem; - border: 1px solid black; - margin: .5rem; - padding: .2rem; -} - -input { - width: 11rem; - margin: .5rem; -} -</pre> -</div> - -<h4 id="JS">JS</h4> - -<pre class="brush: 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(); -});</pre> - -<h4 id="Result">Result</h4> - -<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}</td> - <td>{{Spec2('XMLHttpRequest')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.XMLHttpRequest.progress_event")}}</p> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>Related events: {{domxref("XMLHttpRequest/loadstart_event", "loadstart")}}, {{domxref("XMLHttpRequest/load_event", "load")}}, {{domxref("XMLHttpRequest/loadend_event", "loadend")}}, {{domxref("XMLHttpRequest/error_event", "error")}}, {{domxref("XMLHttpRequest/abort_event", "abort")}}</li> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress">Monitoring progress</a></li> -</ul> |