diff options
Diffstat (limited to 'files/zh-cn/web/events/readystatechange事件/index.html')
| -rw-r--r-- | files/zh-cn/web/events/readystatechange事件/index.html | 149 |
1 files changed, 0 insertions, 149 deletions
diff --git a/files/zh-cn/web/events/readystatechange事件/index.html b/files/zh-cn/web/events/readystatechange事件/index.html deleted file mode 100644 index a4f95498ad..0000000000 --- a/files/zh-cn/web/events/readystatechange事件/index.html +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: 'Document: readystatechange 事件' -slug: Web/Events/readystatechange事件 -tags: - - Reference - - XMLHttpRequest - - interactive - - 事件 -translation_of: Web/API/Document/readystatechange_event ---- -<div>{{APIRef}}</div> - -<p>当文档的 {{domxref("Document.readyState", "readyState")}} 属性发生改变时，会触发 <code>readystatechange</code> 事件。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">是否冒泡</th> - <td>否</td> - </tr> - <tr> - <th scope="row">是否可取消</th> - <td>否</td> - </tr> - <tr> - <th scope="row">接口</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Event handler 属性</th> - <td><code>onreadystatechange</code></td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<h3 id="实时演示">实时演示</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="controls"> - <button id="reload" type="button">Reload</button> -</div> - -<div class="event-log"> - <label>Event log:</label> - <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> -</div></pre> - -<div class="hidden"> -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">body { - display: grid; - grid-template-areas: "control log"; -} - -.controls { - grid-area: control; - display: flex; - align-items: center; - justify-content: center; -} - -.event-log { - grid-area: log; -} - -.event-log-contents { - resize: none; -} - -label, button { - display: block; -} - -#reload { - height: 2rem; -} - -</pre> -</div> - -<h4 id="JS">JS</h4> - -<pre class="brush: js">const log = document.querySelector('.event-log-contents'); -const reload = document.querySelector('#reload'); - -reload.addEventListener('click', () => { - log.textContent =''; - window.setTimeout(() => { - window.location.reload(true); - }, 200); -}); - -window.addEventListener('load', (event) => { - log.textContent = log.textContent + 'load\n'; -}); - -document.addEventListener('readystatechange', (event) => { - log.textContent = log.textContent + `readystate: ${document.readyState}\n`; -}); - -document.addEventListener('DOMContentLoaded', (event) => { - log.textContent = log.textContent + `DOMContentLoaded\n`; -}); - -</pre> - -<h4 id="结果">结果</h4> - -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="160px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Document/readystatechange_event$samples/Live_example?revision=1607037" width="100%"></iframe></p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">备注</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Document.readystatechange_event")}}</p> - -<p>IE 浏览器是一直支持 <code>readystatechange</code> 事件的，可作为 <a href="/zh-CN/docs/Mozilla_event_reference/DOMContentLoaded_(event)">DOMContentLoaded </a>事件的替代方法（参见<a href="https://developer.mozilla.org/en-US/docs/Mozilla_event_reference/DOMContentLoaded_%28event%29#Browser_compatibility">Browser compatibility</a>的注释 [2]）。</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> -</ul> |