diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:56:40 +0100 |
| commit | 310fd066e91f454b990372ffa30e803cc8120975 (patch) | |
| tree | d5d900deb656a5da18e0b60d00f0db73f3a2e88e /files/zh-cn/web/events | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.gz translated-content-310fd066e91f454b990372ffa30e803cc8120975.tar.bz2 translated-content-310fd066e91f454b990372ffa30e803cc8120975.zip | |
unslug zh-cn: move
Diffstat (limited to 'files/zh-cn/web/events')
33 files changed, 0 insertions, 4137 deletions
diff --git a/files/zh-cn/web/events/abort/index.html b/files/zh-cn/web/events/abort/index.html deleted file mode 100644 index 9a233b4d80..0000000000 --- a/files/zh-cn/web/events/abort/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -tags: - - abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -<p>当一个资源的加载已中止时，将触发 <strong>abort</strong>事件。</p> - -<div class="note"> -<p>译者注：这个事件只在 IE 支持，试了最新的 Chrome、FireFox、Safari 都不支持。</p> -</div> - -<h2 id="常规信息">常规信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">从UI组件产生为UIEvent , 否则为Event .</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> - <dd style="margin: 0 0 0 120px;">元素（Element）</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<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><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否冒泡.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否可取消默认行为.</td> - </tr> - <tr> - <td><code>view</code> {{readonlyInline}}</td> - <td><a class="new" href="/zh-CN/docs/Web/API/WindowProxy" rel="nofollow" title="The documentation about this has not yet been written; please consider contributing!"><code>WindowProxy</code></a></td> - <td><a href="/zh-CN/docs/Web/API/Document/defaultView" title="In browsers, document.defaultView returns the window object associated with a document, or null if none is available."><code>document.defaultView</code></a> (该文档的<code>window</code>对象 )</td> - </tr> - <tr> - <td><code>detail</code> {{readonlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - </tbody> -</table> diff --git a/files/zh-cn/web/events/afterprint/index.html b/files/zh-cn/web/events/afterprint/index.html deleted file mode 100644 index 3ee72441cd..0000000000 --- a/files/zh-cn/web/events/afterprint/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: afterprint -slug: Web/Events/afterprint -translation_of: Web/API/Window/afterprint_event ---- -<p>在相关联的文档已开始打印或打印预览已关闭之后, 触发 <code>afterprint</code>事件。</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="例子">例子</h2> - -<p>使用 <code>addEventListener()</code>:</p> - -<pre class="brush: js notranslate">window.addEventListener('afterprint', (event) => { - console.log('After print'); -});</pre> - -<p>使用 <code>onafterprint</code> 时间监听属性：</p> - -<pre class="brush: js notranslate">window.onafterprint = (event) => { - console.log('After print'); -};</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - </thead> - <tbody> - <tr> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#event-afterprint')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Window.afterprint_event")}}</p> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/beforeprint">beforeprint</a></li> -</ul> diff --git a/files/zh-cn/web/events/afterscriptexecute/index.html b/files/zh-cn/web/events/afterscriptexecute/index.html deleted file mode 100644 index b2f4f0d980..0000000000 --- a/files/zh-cn/web/events/afterscriptexecute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Element：afterscriptexecute 事件 -slug: Web/Events/afterscriptexecute -tags: - - 事件 - - 参考 - - 非标准 -translation_of: Web/API/Element/afterscriptexecute_event ---- -<div>{{APIRef}}</div> - -<div>{{Non-standard_header}}</div> - -<div class="warning"> -<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> -</div> - -<p><strong><code>afterscriptexecute</code></strong> 事件在一个脚本执行完毕后触发。</p> - -<p>这是一个 Gecko（Firefox）特有的私有事件。</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">事件处理器属性</th> - <td>无</td> - </tr> - </tbody> -</table> - -<h2 id="规范">规范</h2> - -<p>不属于任何规范。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Element.afterscriptexecute_event")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li><code><a href="/zh-CN/docs/Web/API/Element/beforescriptexecute_event">beforescriptexecute</a></code> 事件</li> -</ul> diff --git a/files/zh-cn/web/events/animationend/index.html b/files/zh-cn/web/events/animationend/index.html deleted file mode 100644 index cb701ac392..0000000000 --- a/files/zh-cn/web/events/animationend/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -tags: - - Animation - - AnimationEvent - - CSS Animations - - CSS3 Animations - - Event - - Reference - - animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -<p><code>animationend</code> 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。</p> - -<h2 id="常规信息">常规信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;">{{SpecName("CSS3 Animations")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("AnimationEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">是</dd> - <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">目标</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Window")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<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><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>事件目标（DOM 顶层目标）。</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>事件是否正常冒泡？</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>可否取消该事件？</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>与该动画相关的 CSS 属性值。</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td><code>Float</code></td> - <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。应等于 {{cssxref("animation-iteration-count")}} 乘以 {{cssxref("animation-duration")}} 的积，动画总活动的时长。</td> - </tr> - </tbody> -</table> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationiteration")}}</li> - <li>{{Event("animationcancel")}}</li> -</ul> - -<h2 id="参见">参见</h2> - -<ul> - <li><a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a></li> - <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> - <li>{{domxref("AnimationEvent")}}</li> - <li>{{domxref("GlobalEventHandlers.onanimationstart")}}</li> -</ul> diff --git a/files/zh-cn/web/events/animationstart/index.html b/files/zh-cn/web/events/animationstart/index.html deleted file mode 100644 index 53929bfb0d..0000000000 --- a/files/zh-cn/web/events/animationstart/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: animationstart -slug: Web/Events/animationstart -tags: - - Animation - - AnimationEvent - - CSS Animations - - CSS3 Animations - - Event - - Reference - - animationstart -translation_of: Web/API/HTMLElement/animationstart_event ---- -<p><code>animationstart</code> 事件会在 CSS 动画开始时触发。 如果有 <code>animation-delay</code> 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 <code>elapsedTime</code> 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规格</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/css3-animations/#animation-events">CSS Animations</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">AnimationEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">是</dd> - <dt style="float: left; text-align: right; width: 120px;">事件可取消</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">目标</dt> - <dd style="margin: 0 0 0 120px;">Document, Element</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<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><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>事件来源（DOM 顶层目标）。</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>事件是否正常冒泡？</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>可否取消该事件？</td> - </tr> - <tr> - <td><code>animationName</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>与该动画相关的 CSS 属性值。</td> - </tr> - <tr> - <td><code>elapsedTime</code> {{ReadOnlyInline}}</td> - <td><code>Float</code></td> - <td>动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 <code>animation-delay</code> 是一个负值，这种情况下此值为 (-1 * {{cssxref("animation-delay")}})，并且动画将直接从此值后的序列开始播放。</td> - </tr> - </tbody> -</table> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{Event("animationstart")}}</li> - <li>{{Event("animationend")}}</li> - <li>{{Event("animationiteration")}}</li> -</ul> - -<h2 id="另请参阅">另请参阅</h2> - -<ul> - <li><a href="/en-US/docs/CSS/Using_CSS_animations" title="/en-US/docs/CSS/Using_CSS_animations">Using CSS Animations</a></li> -</ul> diff --git a/files/zh-cn/web/events/beforeprint/index.html b/files/zh-cn/web/events/beforeprint/index.html deleted file mode 100644 index fe9480238a..0000000000 --- a/files/zh-cn/web/events/beforeprint/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: beforeprint -slug: Web/Events/beforeprint -translation_of: Web/API/Window/beforeprint_event ---- -<p>当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://html.spec.whatwg.org/multipage/webappapis.html#printing">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">DefaultView (<code><window></code>)</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<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><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>事件目标 (DOM 树中的最顶层目标)</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>时间类型</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>事件是否冒泡</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>事件是否可取消</td> - </tr> - </tbody> -</table> - -<h2 id="样例">样例</h2> - -<p>使用 <code>addEventListener()</code>：</p> - -<pre class="brush: js notranslate">window.addEventListener('beforeprint', (event) => { - console.log('Before print'); -});</pre> - -<p>使用 <code>onbeforeprint</code> 事件监听属性：</p> - -<pre class="brush: js notranslate">window.onbeforeprint = (event) => { - console.log('Before print'); -};</pre> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', '#event-beforeprint')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Window.beforeprint_event")}}</p> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/afterprint">afterprint</a></li> -</ul> diff --git a/files/zh-cn/web/events/beforescriptexecute/index.html b/files/zh-cn/web/events/beforescriptexecute/index.html deleted file mode 100644 index 00aa4120c1..0000000000 --- a/files/zh-cn/web/events/beforescriptexecute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Element：beforescriptexecute 事件 -slug: Web/Events/beforescriptexecute -tags: - - DOM - - 参考 - - 非标准 -translation_of: Web/API/Element/beforescriptexecute_event ---- -<div>{{APIRef}}</div> - -<div>{{Non-standard_header}}</div> - -<div class="warning"> -<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> -</div> - -<p><strong><code>beforescriptexecute</code></strong> 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。</p> - -<p>这是一个 Gecko（Firefox）特有的私有事件。</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">事件处理器属性</th> - <td>无</td> - </tr> - </tbody> -</table> - -<h2 id="规范">规范</h2> - -<p>不属于任何规范。</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Element.beforescriptexecute_event")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li><code><a href="/zh-CN/docs/Web/API/Element/afterscriptexecute_event">afterscriptexecute</a></code> 事件</li> -</ul> diff --git a/files/zh-cn/web/events/beforeunload/index.html b/files/zh-cn/web/events/beforeunload/index.html deleted file mode 100644 index 9cef2f2cfc..0000000000 --- a/files/zh-cn/web/events/beforeunload/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'Window: beforeunload event' -slug: Web/Events/beforeunload -tags: - - Event - - Window - - beforeunload - - 事件 - - 参考 -translation_of: Web/API/Window/beforeunload_event ---- -<p><span style="font-family: consolas,monaco,andale mono,monospace;">当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。</span></p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Bubbles</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Cancelable</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{domxref("Event")}}</td> - </tr> - <tr> - <th scope="row">Event handler property</th> - <td>{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}</td> - </tr> - </tbody> -</table> - -<p>事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。</p> - -<p>根据规范，要显示确认对话框，事件处理程序需要在事件上调用{{domxref("Event.preventDefault()", "preventDefault()")}}。</p> - -<p>但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：</p> - -<ul> - <li>将字符串分配给事件的<code>returnValue</code>属性</li> - <li> - <p>从事件处理程序返回一个字符串。</p> - </li> -</ul> - -<p><span>某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。</span></p> - -<p>为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在<code>beforeunload</code>事件中创建的提示，甚至根本不会显示它们。</p> - -<p>将事件处理程序/监听器加到<code>window</code>或 <code>document</code>的<code>beforeunload</code>事件后，将阻止浏览器使用内存中的页面导航缓存，例如<a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching">Firefox的Back-Forward缓存</a>或<a href="https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/">WebKit的Page Cache</a>。</p> - -<p>HTML规范指出在此事件中调用{{domxref("window.alert()")}}，{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法，可能会失效。更多详细信息，请参见<a href="https://html.spec.whatwg.org/multipage/timers-and-user-prompts.html#user-prompts">HTML规范</a>。</p> - -<h2 id="示例">示例</h2> - -<p>HTML规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}}，然而，不是所有浏览器都支持这么做。</p> - -<pre class="brush: js notranslate">window.addEventListener('beforeunload', (event) => { - // Cancel the event as stated by the standard. - event.preventDefault(); - // Chrome requires returnValue to be set. - event.returnValue = ''; -}); -</pre> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col"><strong>规范</strong></th> - <th scope="col"><strong>状态</strong></th> - <th scope="col">注释</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}</td> - <td>{{Spec2("HTML WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}</td> - <td>{{Spec2("HTML5 W3C")}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</div> - -<p>{{Compat("api.Window.beforeunload_event")}}</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>相关事件：{{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}, {{domxref("Window/unload_event", "unload")}}</li> - <li><a href="https://html.spec.whatwg.org/#prompt-to-unload-a-document">Unloading Documents — Prompt to unload a document</a></li> - <li><a href="https://developers.google.com/web/updates/2016/04/chrome-51-deprecations?hl=en#remove_custom_messages_in_onbeforeunload_dialogs">Remove Custom Messages in onbeforeload Dialogs after Chrome 51</a></li> -</ul> diff --git a/files/zh-cn/web/events/blur/index.html b/files/zh-cn/web/events/blur/index.html deleted file mode 100644 index a57cc5b995..0000000000 --- a/files/zh-cn/web/events/blur/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: blur (event) -slug: Web/Events/blur -translation_of: Web/API/Element/blur_event ---- -<p>当一个元素失去焦点的时候 blur 事件被触发。它和 <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> 事件的主要区别是 focusout 支持冒泡。</p> - -<h2 id="常规信息">常规信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> - <dd style="margin: 0 0 0 120px;">元素（Element）</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<p>{{NoteStart}}{{domxref("Document.activeElement")}} 的值随浏览器的不同而不同 ({{bug(452307)}}): IE10把值设为焦点将要移向的对象 , 而Firefox和Chrome 往往把值设为<code>body</code> .{{NoteEnd}}</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><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否冒泡.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否可取消默认行为.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM 元素)</td> - <td>无</td> - </tr> - </tbody> -</table> - -<h2 id="事件代理">事件代理</h2> - -<p>有两种方法来为这个事件实现事件代理：在支持 <code>focusout</code> 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 方法的第三个参数 "useCapture" 为 <code>true：</code></p> - -<h3 id="HTML_Content">HTML Content</h3> - -<pre class="brush:html;"><form id="form"> - <input type="text" placeholder="text input"> - <input type="password" placeholder="password"> -</form></pre> - -<h3 id="JavaScript_Content">JavaScript Content</h3> - -<pre class="brush: js">var form = document.getElementById("form"); -form.addEventListener("focus", function( event ) { - event.target.style.background = "pink"; -}, true); -form.addEventListener("blur", function( event ) { - event.target.style.background = ""; -}, true);</pre> - -<p>{{EmbedLiveSample('Event_delegation')}}</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>5</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>6</td> - <td>12.1</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>4.0</td> - <td>53</td> - <td>{{CompatUnknown}}</td> - <td>10.0</td> - <td>12.1</td> - <td>5.1</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 在 Gecko 24 {{geckoRelease(24)}} 之前，事件的接口为 {{domxref("Event")}}，而不是 {{domxref("FocusEvent")}}。参考 ({{bug(855741)}}).</p> - -<h2 id="相关的事件">相关的事件</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> diff --git a/files/zh-cn/web/events/change/index.html b/files/zh-cn/web/events/change/index.html deleted file mode 100644 index 6a997fc430..0000000000 --- a/files/zh-cn/web/events/change/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: change -slug: Web/Events/change -tags: - - Change - - HTML - - HTML DOM - - HTMLElement - - change vs. input - - 事件 - - 参考 -translation_of: Web/API/HTMLElement/change_event ---- -<p>{{APIRef}}</p> - -<p>当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，<code>change</code> 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，<code>change</code> 事件并不是每次元素的 <code>value</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">事件处理程序属性</th> - <td>{{domxref("GlobalEventHandlers/onchange", "onchange")}}</td> - </tr> - </tbody> -</table> - -<p>基于表单元素的类型和用户对标签的操作的不同，<code>change</code> 事件触发的时机也不同：</p> - -<ul> - <li>当元素是 <code>:checked</code> 状态时（通过点击或者使用键盘），见于 <code>{{HTMLElement('input/radio', '<input type="radio">')}}</code> 和 <code>{{HTMLElement('input/checkbox', '<input type="checkbox">')}}</code>；</li> - <li>当用户显式提交改变时（例如：点击了 {{HTMLElement("select")}}中的一个选项，从 <code>{{HTMLElement('input/date', '<input type="date">')}}</code> 标签选择了一个日期，通过 <code>{{HTMLElement('input/file', '<input type="file">')}}</code> 标签上传了一个文件等）；</li> - <li>当标签的值被修改并且失去焦点后，但未提交时（例如：对{{HTMLElement("textarea")}} 或者 <code>{{HTMLElement('input/text', '<input type="text">')}}</code>的值进行编辑后）。</li> -</ul> - -<h2 id="示例">示例</h2> - -<h3 id="<select>_元素"><select> 元素</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="notranslate"><label>Choose an ice cream flavor: - <select class="ice-cream" name="ice-cream"> - <option value="">Select One …</option> - <option value="chocolate">Chocolate</option> - <option value="sardine">Sardine</option> - <option value="vanilla">Vanilla</option> - </select> -</label> - -<div class="result"></div></pre> - -<pre class="notranslate">body { - display: grid; - grid-template-areas: "select result"; -} - -select { - grid-area: select; -} - -.result { - grid-area: result; -} -</pre> - -<h4 id="JavaScript">JavaScript</h4> - -<pre class="notranslate">const selectElement = document.querySelector('.ice-cream'); - -selectElement.addEventListener('change', (event) => { - const result = document.querySelector('.result'); - result.textContent = `You like ${event.target.value}`; -}); -</pre> - -<h4 id="结果">结果</h4> - - - -<h3 id="文本输入元素">文本输入元素</h3> - -<p>对于一些元素，包括 <code><input type="text"></code>，<code>change</code> 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。</p> - -<h4 id="HTML_2">HTML</h4> - -<pre class="notranslate"><input placeholder="Enter some text" name="name"/> -<p id="log"></p></pre> - -<h4 id="JavaScript_2">JavaScript</h4> - -<pre class="notranslate">const input = document.querySelector('input'); -const log = document.getElementById('log'); - -input.addEventListener('change', updateValue); - -function updateValue(e) { - log.textContent = e.target.value; -}</pre> - -<h4 id="结果_2">结果</h4> - - - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> - -<p>对于一些特定类型的交互是否要触发 <code>change</code> 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 <code>change</code> 事件，直到用户按下 Enter 键或将焦点从 <code><select></code> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。</p> - -<h2 id="参见">参见</h2> - -<p>{{domxref("NetworkInformation.connection")}} fires the <code>change</code> event when the connection information changes.</p> diff --git a/files/zh-cn/web/events/compositionend/index.html b/files/zh-cn/web/events/compositionend/index.html deleted file mode 100644 index 4a023fc0e5..0000000000 --- a/files/zh-cn/web/events/compositionend/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: compositionend -slug: Web/Events/compositionend -tags: - - 事件 -translation_of: Web/API/Element/compositionend_event ---- -<p>当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。</p> - -<table class="properties"> - <tbody> - <tr> - <td>Bubbles</td> - <td>Yes</td> - </tr> - <tr> - <td>Cancelable</td> - <td>Yes</td> - </tr> - <tr> - <td>Target objects</td> - <td>{{domxref("Element")}}</td> - </tr> - <tr> - <td>Interface</td> - <td>{{domxref("TouchEvent")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>聚焦元素处理成分</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>事件是否冒泡</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>是否可以取消该事件</td> - </tr> - <tr> - <td><code>view</code> {{ReadOnlyInline}}</td> - <td>{{domxref("WindowProxy")}}</td> - <td>{{domxref("Document.defaultView")}} (<code>window</code> of the document)</td> - </tr> - <tr> - <td><code>detail</code> {{ReadOnlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>data </code>{{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}} (string)</td> - <td>正在编辑的原始字符串, 否则为空字符串。只读。</td> - </tr> - <tr> - <td><code>locale</code></td> - <td>{{domxref("DOMString")}} (string)</td> - <td>组合事件的语言代码 (如果可用);否则, 为空字符串。只读。</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 该事件是在9.0 之前的Gecko版本中已经可以使用, 但没有 DOM 级3属性和方法。Gecko还不支持给受信任事件的locale属性设置值。但是, 当创建不受信任的事件时，此值可以通过<code>initCompositionEvent()</code> 设置。</p> - -<h2 id="Related_events">Related events</h2> - -<ul> - <li>{{Event("compositionstart")}}</li> - <li>{{Event("compositionupdate")}}</li> -</ul> diff --git a/files/zh-cn/web/events/compositionstart/index.html b/files/zh-cn/web/events/compositionstart/index.html deleted file mode 100644 index 71aa9f1f0d..0000000000 --- a/files/zh-cn/web/events/compositionstart/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: compositionstart -slug: Web/Events/compositionstart -tags: - - Element - - Event - - Input method - - compositionstart - - 事件 - - 参考 -translation_of: Web/API/Element/compositionstart_event ---- -<p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> - -<p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>Bubbles</strong></td> - <td>Yes</td> - </tr> - <tr> - <td><strong>Cancelable</strong></td> - <td>Yes</td> - </tr> - <tr> - <td><strong>Interface</strong></td> - <td>{{domxref("CompositionEvent")}}</td> - </tr> - <tr> - <td><strong>Event handler property</strong></td> - <td> - <table> - <tbody> - <tr> - <td>None</td> - </tr> - </tbody> - </table> - </td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<pre>const inputElement = document.querySelector('input[type="text"]'); - -inputElement.addEventListener('compositionstart', (event) => { - console.log(`generated characters were: ${event.data}`); -});</pre> - -<h3 id="动态演示">动态演示</h3> - -<h4 id="HTML">HTML</h4> - -<pre><div class="control"> - <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> - <input type="text" id="example" name="example"> -</div> - -<div class="event-log"> - <label>Event log:</label> - <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> - <button class="clear-log">Clear</button> -</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre>body { - padding: .2rem; - display: grid; - grid-template-areas: "control log"; -} - -.control { - grid-area: control; -} - -.event-log { - grid-area: log; -} - -.event-log-contents { - resize: none; -} - -label, button { - display: block; -} - -input[type="text"] { - margin: .5rem 0; -} - -kbd { - border-radius: 3px; - padding: 1px 2px 0; - border: 1px solid black; -} -</pre> - -<h4 id="JS">JS</h4> - -<pre>const inputElement = document.querySelector('input[type="text"]'); -const log = document.querySelector('.event-log-contents'); -const clearLog = document.querySelector('.clear-log'); - -clearLog.addEventListener('click', () => { - log.textContent = ''; -}); - -function handleEvent(event) { - log.textContent = log.textContent + `${event.type}: ${event.data}\n`; -} - -inputElement.addEventListener('compositionstart', handleEvent); -inputElement.addEventListener('compositionupdate', handleEvent); -inputElement.addEventListener('compositionend', handleEvent); -</pre> - -<h4 id="结果">结果</h4> - -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="180px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/compositionstart_event$samples/Live_example?revision=1606277" width="100%"></iframe></p> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.Element.compositionstart_event")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>相关事件：{{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> -</ul> diff --git a/files/zh-cn/web/events/compositionupdate/index.html b/files/zh-cn/web/events/compositionupdate/index.html deleted file mode 100644 index 11952af506..0000000000 --- a/files/zh-cn/web/events/compositionupdate/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: compositionupdate -slug: Web/Events/compositionupdate -translation_of: Web/API/Element/compositionupdate_event ---- -<p><strong><code>compositionupdate</code></strong> 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）</p> - -<table class="properties"> - <tbody> - <tr> - <td>Bubbles</td> - <td>Yes</td> - </tr> - <tr> - <td>Cancelable</td> - <td>No</td> - </tr> - <tr> - <td>Target objects</td> - <td>{{domxref("Element")}}</td> - </tr> - <tr> - <td>Interface</td> - <td>{{domxref("TouchEvent")}}</td> - </tr> - </tbody> -</table> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{ReadOnlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>焦点所在的，处理文字输入的元素。</td> - </tr> - <tr> - <td><code>type</code> {{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Does the event normally bubble?</td> - </tr> - <tr> - <td><code>cancelable</code> {{ReadOnlyInline}}</td> - <td><code>boolean</code></td> - <td>Is it possible to cancel the event?</td> - </tr> - <tr> - <td><code>view</code> {{ReadOnlyInline}}</td> - <td>{{domxref("WindowProxy")}}</td> - <td>{{domxref("Document.defaultView")}} (the <code>window</code> of the document).</td> - </tr> - <tr> - <td><code>detail</code> {{ReadOnlyInline}}</td> - <td><code>long</code> (<code>float</code>)</td> - <td>0.</td> - </tr> - <tr> - <td><code>data </code>{{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}} (string)</td> - <td>要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。</td> - </tr> - <tr> - <td><code>locale </code>{{ReadOnlyInline}}</td> - <td>{{domxref("DOMString")}} (string)</td> - <td>输入事件的语言代号，或者空字符串。只读。</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> - <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 在 <code>compositionstart</code> 事件之后不会立即执行。</p> - -<p>[2] <code>compositionupdate</code> 事件在编辑器里的内容改变之前就会触发。自从 Gecko 12.0 {{geckoRelease("12.0")}} 开始 <code>input</code> 事件在输入过程中、内容变化后就触发。使用它可以在输入过程中就获得新的内容。</p> - -<p>Gecko 在可信事件（trusted events）中还不支持 <code>locale</code> 属性。但是开发者可以在使用 <code>initCompositionEvent()</code> 创建不可信事件时指定一个值。</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>{{Event("compositionstart")}}</li> - <li>{{Event("compositionupdate")}}</li> - <li>{{Event("compositionend")}}</li> -</ul> diff --git a/files/zh-cn/web/events/copy/index.html b/files/zh-cn/web/events/copy/index.html deleted file mode 100644 index ac249f5055..0000000000 --- a/files/zh-cn/web/events/copy/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: copy -slug: Web/Events/copy -tags: - - Clipboard API - - Event - - Reference -translation_of: Web/API/Element/copy_event ---- -<p>当用户通过浏览器UI（例如，使用 <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>C</kbd> 键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发<code>copy</code>事件。</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}：获得焦点的元素（如{{domxref("HTMLElement.contentEditable","contentEditable")}}内容能编辑或者可以选中的元素），或{{HTMLElement("body")}}。</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">见下文。</dd> -</dl> - -<p>调用{{domxref("DataTransfer.setData","setData(format, data)")}}可以修改{{domxref("ClipboardEvent.clipboardData")}}事件的默认行为：</p> - -<pre class="brush: js">document.addEventListener('copy', function(e){ - e.clipboardData.setData('text/plain', 'Hello, world!'); - e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); - e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard -});</pre> - -<p>不能使用{{domxref("DataTransfer.getData", "clipboardData.getData()")}}在事件处理函数中获取剪切板数据。</p> - -<p>事件的默认行为与事件的来源和事件处理函数相关：</p> - -<ul> - <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">synthetic</a> copy事件没有默认行为，除非：</li> - <li>如果默认事件没有取消，就复制到选区（如果有选中内容）到剪切板；</li> - <li>如果取消了默认事件，但是调用了<code>setData()</code>方法：就复制<code>clipboardData</code>的内容到到剪切板；</li> - <li>如果取消了默认行为，而且没有调用<code>setData()</code>方法，就没有任何行为。</li> -</ul> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>clipboardData</code></td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(22) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>clipboardData</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(22) }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{domxref("HTMLElement.oncopy")}}</li> - <li>Related events - <ul> - <li>{{event("cut")}}</li> - <li>{{event("paste")}}</li> - </ul> - </li> -</ul> diff --git a/files/zh-cn/web/events/cut/index.html b/files/zh-cn/web/events/cut/index.html deleted file mode 100644 index 48c024451a..0000000000 --- a/files/zh-cn/web/events/cut/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: cut -slug: Web/Events/cut -tags: - - 事件 - - 剪贴板API - - 参考 -translation_of: Web/API/Element/cut_event ---- -<div class="warning"> -<p>This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: <a href="https://www.w3.org/TR/clipboard-apis/#the-paste-action">https://www.w3.org/TR/clipboard-apis/#the-cut-action</a></p> -</div> - -<p><span class="seoSummary"><strong><code>cut</code></strong> 事件在将选中内容从文档中删除并将其添加到剪贴板后触发。</span></p> - -<p><font><font>如果用户尝试对不可编辑内容执行剪切操作，则</font></font><code>cut</code><font><font>事件仍会触发，但事件对象不包含任何数据。</font></font></p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("DefaultView")}}, {{domxref("Document")}}, {{domxref("Element")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>事件对象（DOM树的顶层对象）。</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件的类型。</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>事件是否冒泡。</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>事件是否可以取消。</td> - </tr> - <tr> - <td>clipboardData {{readonlyInline}}</td> - <td>{{domxref("DataTransfer")}}</td> - <td><font>剪贴板的内容。</font><font>不仅仅是文本，还有文件和图片。</font></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{compatChrome(58)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatOpera(45)}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>clipboardData</code></td> - <td>{{compatChrome(58)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoDesktop(22) }}</td> - <td>{{ CompatNo() }}</td> - <td>{{CompatOpera(45)}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android Webview</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{compatChrome(58)}}</td> - <td>{{compatChrome(58)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatOperaMobile(45)}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>clipboardData</code></td> - <td>{{compatChrome(58)}}</td> - <td>{{compatChrome(58)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatGeckoMobile(22) }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatOperaMobile(45)}}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关">相关</h2> - -<ul> - <li>{{domxref("HTMLElement.oncut")}}</li> - <li>Related events - <ul> - <li>{{event("copy")}}</li> - <li>{{event("paste")}}</li> - </ul> - </li> -</ul> diff --git a/files/zh-cn/web/events/domcontentloaded/index.html b/files/zh-cn/web/events/domcontentloaded/index.html deleted file mode 100644 index 67c6a44253..0000000000 --- a/files/zh-cn/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -tags: - - DOMContentLoaded - - Window.open() - - load - - window.onload -translation_of: Web/API/Window/DOMContentLoaded_event ---- -<p>当初始的 <strong>HTML </strong>文档被完全加载和解析完成之后，<strong><code>DOMContentLoaded</code> </strong>事件被触发，而无需等待样式表、图像和子框架的完全加载。</p> - -<p>模拟的css文件：CSS.php</p> - -<pre class="notranslate"><?php -sleep(3);</pre> - -<p>测试代码：</p> - -<pre class="notranslate"><link rel="stylesheet" href="css.php"> -<script> -document.addEventListener('DOMContentLoaded',function(){ - console.log('3 seconds passed'); -}); -</script></pre> - -<p>如果将link置于script之后，就会立即打印。</p> - -<p>{{Note("同步 JavaScript 会暂停 DOM 的解析。")}}</p> - -<p>{{Note("还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪")}}</p> - -<h2 id="加速中">加速中</h2> - -<p>如果您希望 DOM 在用户请求页面后尽可能快地解析，你可以做的一些事情是把你的 <a href="https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests">JavaScript 异步化</a> 以及 <a href="https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery">优化样式表的加载</a>, 由于被并行加载而减慢页面加载，从主 html 文档“窃取”流量。</p> - -<h2 id="常规信息">常规信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0pt 0pt 0pt 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0pt 0pt 0pt 120px;">Event</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0pt 0pt 0pt 120px;">是</dd> - <dt style="float: left; text-align: right; width: 120px;">能否取消</dt> - <dd style="margin: 0pt 0pt 0pt 120px;">能 (尽管一个简单的事件被指定为不可取消)</dd> - <dt style="float: left; text-align: right; width: 120px;">目标</dt> - <dd style="margin: 0pt 0pt 0pt 120px;">Document</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0pt 0pt 0pt 120px;">无.</dd> -</dl> - -<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><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>事件类型.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否冒泡.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>该事件是否可取消默认行为.</td> - </tr> - </tbody> -</table> - -<h2 id="示例" style="margin-bottom: 20px; font-size: 28px; line-height: 28px;">示例</h2> - -<pre class="notranslate"><code><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); -</script></code></pre> - -<pre class="notranslate"><code><script> - document.addEventListener("DOMContentLoaded", function(event) { - console.log("DOM fully loaded and parsed"); - }); - - for(var i=0; i<1000000000; i++){ - // </code>这个同步脚本将延迟DOM的解析。 - // 所以DOMContentLoaded事件稍后将启动。 -<code> } </code><code> -</script></code></pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.Window.DOMContentLoaded_event")}}</p> - -<p><span>至少从Gecko 1.9.2,Chrome 6,以及Safari 4开始,就已经实现了</span><span>该事件的</span><span>冒泡行为.</span></p> - -<h3 id="兼容不支持该事件的浏览器">兼容不支持该事件的浏览器</h3> - -<p>在IE8中,可以使用<code>readystatechange</code>事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次<code>document.documentElement.doScroll("left")来检测这一状态，</code>因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。</p> - -<p>诸如jQuery这样的通用JS库，会提供跨浏览器的方法来检测DOM是否加载完成。也有其他专门实现该功能的脚本:<a href="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js" title="https://github.com/dperini/ContentLoaded/blob/master/src/contentloaded.js">contentloaded.js</a> (只能添一个时间监听函数)以及<a href="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js" title="https://github.com/addyosmani/jquery.parts/blob/master/jquery.documentReady.js">jquery.documentReady.js</a> (并不依赖jQuery,虽然名字中有jquery).</p> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{event("DOMContentLoaded")}}</li> - <li>{{event("readystatechange")}}</li> - <li>{{event("load")}}</li> - <li>{{event("beforeunload")}}</li> - <li>{{event("unload")}}</li> - <li><a href="https://codepen.io/gildata/pen/VrzXOb">DOMContentLoaded demo</a></li> -</ul> diff --git a/files/zh-cn/web/events/error/index.html b/files/zh-cn/web/events/error/index.html deleted file mode 100644 index 913caf76bf..0000000000 --- a/files/zh-cn/web/events/error/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: error -slug: Web/Events/error -translation_of: Web/API/Element/error_event ---- -<div>{{APIRef}}</div> - -<p>当一个资源加载失败或无法使用时，会在{{domxref("Element")}}对象上触发<code>error</code>事件。例如当脚本执行错误、或图片无法找到或图片无效时。</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("Event")}} 或{{domxref("UIEvent")}}</td> - </tr> - <tr> - <th scope="row">Event handler property（事件处理程序属性）</th> - <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> - </tr> - </tbody> -</table> - -<p>如果事件对象是从用户界面元素生成的，则它是一个{{domxref("UIEvent")}}实例;反之，它是一个{{domxref("Event")}}实例。</p> - -<h2 id="示例">示例</h2> - -<h3 id="在线示例"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/blur_event#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B">在线示例</a></h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html notranslate"><div class="controls"> - <button id="img-error" type="button">生成图像error</button> - <img class="bad-img" /> -</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 notranslate">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; -} - -button { - height: 2rem; - margin: .5rem; -} - -img { - width: 0; - height: 0; -} -</pre> -</div> - -<h4 id="JS">JS</h4> - -<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); - -const badImg = document.querySelector('.bad-img'); -badImg.addEventListener('error', (event) => { - log.textContent = log.textContent + `${event.type}: Loading image\n`; - console.log(event) -}); - -const imgError = document.querySelector('#img-error'); -imgError.addEventListener('click', () => { - badImg.setAttribute('src', 'i-dont-exist'); -}); -</pre> - -<h4 id="结果">结果</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> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-error')}}</td> - <td>{{Spec2('UI Events')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送请求请求。</div> - -<p>{{Compat("api.Element.error_event")}}</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>This event on <code>Window</code> targets: {{domxref("Window/error_event", "error")}} event</li> -</ul> diff --git a/files/zh-cn/web/events/focus/index.html b/files/zh-cn/web/events/focus/index.html deleted file mode 100644 index 4a93ee7726..0000000000 --- a/files/zh-cn/web/events/focus/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: focus -slug: Web/Events/focus -translation_of: Web/API/Element/focus_event ---- -<p>focus事件在元素获取焦点时触发. 这个事件和 <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a> 最大的区别仅仅在于后者会事件冒泡.</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd> - <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无.</dd> -</dl> - -<div class="note">注释: 这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Event target (DOM element)</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM element)</td> - <td>null</td> - </tr> - </tbody> -</table> - -<h2 id="事件委托">事件委托</h2> - -<p>此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 <code>focusin</code> 事件 (除了Firefox之外的所有浏览器), 或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 的参数"useCapture" 值为true:</p> - -<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p> - -<p>(Sample code from <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div>{{CompatibilityTable}}</div> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Featrue</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - <td>{{CompatVersionUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - <td>{{CompatUnknown()}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> diff --git a/files/zh-cn/web/events/focusout/index.html b/files/zh-cn/web/events/focusout/index.html deleted file mode 100644 index 87a8a9bd48..0000000000 --- a/files/zh-cn/web/events/focusout/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusout -slug: Web/Events/focusout -translation_of: Web/API/Element/focusout_event ---- -<p>当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/blur">blur</a> 事件之间的主要区别在于后者不会冒泡。</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">Specification</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> - <dt style="float: left; text-align: right; width: 120px;">Interface</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> - <dd style="margin: 0 0 0 120px;">Yes</dd> - <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">Target</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> - <dd style="margin: 0 0 0 120px;">None.</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>Event target losing focus.</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>relatedTarget</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}} (DOM element)</td> - <td>Event target receiving focus.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop(52)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile(52)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{event("focus")}}</li> - <li>{{event("blur")}}</li> - <li>{{event("focusin")}}</li> - <li>{{event("focusout")}}</li> -</ul> diff --git a/files/zh-cn/web/events/icecandidate/index.html b/files/zh-cn/web/events/icecandidate/index.html deleted file mode 100644 index 38fc5c1920..0000000000 --- a/files/zh-cn/web/events/icecandidate/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 'RTCPeerConnection: icecandidate event' -slug: Web/Events/icecandidate -translation_of: Web/API/RTCPeerConnection/icecandidate_event ---- -<p>{{SeeCompatTable}}</p> - -<p>当 {{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.setLocalDescription()")}}方法更改本地描述之后，该{{domxref("RTCPeerConnection")}}会抛出<strong><code>icecandidate</code></strong>事件。该事件的监听器需要将更改后的描述信息传送给远端{{domxref("RTCPeerConnection")}}，以更新远端的备选源。</p> - -<h2 id="使用指南">使用指南</h2> - -<p><code>icecandidate</code> 的类型为 {{domxref("RTCPeerIceCandidateEvent")}}, 在以下三种情况下会触发该事件：</p> - -<h3 id="分享新的源">分享新的源</h3> - -<p><code>触发icecandidate</code>事件的首要原因：当获得新的源之后，需要将该源的信息发送给远端信号服务器，并分发至其他端的{{domxref("RTCPeerConnection")}}。其他{{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}方法将新{{domxref("RTCPeerCandidateIceEvent.candidate", "candidate")}} 中携带的信息，将新的源描述信息添加进它的备选池中；</p> - -<pre>rtcPeerConnection.onicecandidate = (event) => { - if (event.candidate) { - sendCandidateToRemotePeer(event.candidate) - } -} -</pre> - - - -<h2 id="概述">概述</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;">{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}</dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("RTCPeerConnectionIceEvent")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">事件冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> - <dd style="margin: 0 0 0 120px;">{{domxref("RTCPeerConnection")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<h2 id="属性">属性</h2> - -<p><em>属性继承自{{domxref("RTCPeerConnectionIceEvent")}}.</em></p> - -<h2 id="方法">方法</h2> - -<p><em>方法继承自 {{domxref("RTCPeerConnectionIceEvent")}}.</em></p> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li><em>无</em></li> -</ul> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">注释</th> - </tr> - <tr> - <td>{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}</td> - <td>{{Spec2('WebRTC 1.0')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="兼容性">兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatVersionUnknown }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatVersionUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>特性</th> - <th>Android</th> - <th>Chrome for Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="参阅">参阅</h2> - -<ul> - <li><a href="/en-US/docs/Web/Guide/API/WebRTC" title="/en-US/docs/CSS/Using_CSS_animations">WebRTC</a></li> -</ul> diff --git a/files/zh-cn/web/events/input/index.html b/files/zh-cn/web/events/input/index.html deleted file mode 100644 index 7ee1b98ad5..0000000000 --- a/files/zh-cn/web/events/input/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: input -slug: Web/Events/input -tags: - - HTML DOM - - HTMLElement - - Input - - 事件 - - 参考 - - 表单 - - 输入 -translation_of: Web/API/HTMLElement/input_event ---- -<p>{{APIRef}}</p> - -<p>当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 <code>value</code> 被修改时，会触发 <strong><code>input</code></strong> 事件。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">Bubbles</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">Cancelable</th> - <td>No</td> - </tr> - <tr> - <th scope="row">Interface</th> - <td>{{DOMxRef("InputEvent")}}</td> - </tr> - <tr> - <th scope="row">Event handler property</th> - <td>{{domxref("GlobalEventHandlers.oninput")}}</td> - </tr> - </tbody> -</table> - -<p><strong><code>input</code></strong> 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在<code>contenteditable</code> 和 <code>designMode</code> 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。</p> - -<p>对于 <code>type=checkbox</code> 或 <code>type=radio</code> 的 <code>input</code> 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（<a href="https://html.spec.whatwg.org/multipage/input.html#the-input-element:event-input-2">HTML5规范</a>），<code>input</code> 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。</p> - -<div class="blockIndicator note"> -<p><strong>注意：</strong> 每当元素的 <code>value</code> 改变，<code>input</code> 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。</p> -</div> - -<h2 id="示例">示例</h2> - -<p>每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。</p> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html"><code><input placeholder="Enter some text" name="name"/> -<p id="values"></p></code></pre> - -<h3 id="JavaScript">JavaScript</h3> - -<pre class="brush: js"><code>const input = document.querySelector('input'); -const log = document.getElementById('values'); - -input.addEventListener('input', updateValue); - -function updateValue(e) { - log.textContent = e.srcElement.value; -}</code> -</pre> - -<h3 id="结果">结果</h3> - -<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" id="frame_Examples" src="https://mdn.mozillademos.org/en-US/docs/Web/API/HTMLElement/input_event$samples/Examples?revision=1609143"></iframe></p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('DOM3 Events', "#event-type-input", "input event")}}</td> - <td>{{Spec2('DOM3 Events')}}</td> - </tr> - </tbody> -</table> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{Compat("api.HTMLElement.input_event")}}</p> - -<div id="compat-desktop"></div> - -<p>[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。</p> - -<p>[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).</p> - -<p>[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。</p> - -<p>[4] 事件 target 是光标所在的最内侧的元素。</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>{{event("keydown")}}</li> - <li>{{event("keyup")}}</li> - <li>{{event("keypress")}}</li> - <li>{{event("input")}}</li> - <li>{{domxref("HTMLElement/beforeinput_event", "beforeinput")}}</li> - <li>{{domxref("HTMLElement/change_event", "change")}}</li> - <li>{{domxref("HTMLInputElement/invalid_event", "invalid")}}</li> -</ul> - -<p>此外，还有一个类似的 <code><a href="https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change">change</a></code> 事件。change 触发的频率低于 <code>input</code> - 它只会在用户提交更改时触发。</p> - -<p> - <audio style="display: none;"></audio> -</p> diff --git a/files/zh-cn/web/events/load/index.html b/files/zh-cn/web/events/load/index.html deleted file mode 100644 index 5cfb7b075f..0000000000 --- a/files/zh-cn/web/events/load/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - load -translation_of: Web/API/Window/load_event ---- -<p>{{APIRef}}</p> - -<p>当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发<code>load</code>事件。</p> - -<p>它与{{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。</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 property</th> - <td>{{domxref("GlobalEventHandlers/onload", "onload")}}</td> - </tr> - </tbody> -</table> - -<h2 id="用法">用法</h2> - -<p>当页面及资源完全加载后在控制台打印一段信息：</p> - -<pre class="brush: js notranslate">window.addEventListener('load', (event) => { - console.log('page is fully loaded'); -});</pre> - -<p>也可以使用<code>onload</code>实现：</p> - -<pre class="brush: js notranslate">window.onload = (event) => { - console.log('page is fully loaded'); -};</pre> - -<h2 id="示例">示例</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><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"> -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">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> - -<h3 id="JS">JS</h3> - -<pre class="brush: js notranslate">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>{{ EmbedLiveSample('Live_example', '100%', '160px') }}</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('UI Events', '#event-type-load', 'load')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', '#delay-the-load-event', 'load event')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>此链接指向加载文档结束时执行步骤中的部分。“load”事件也会在许多元素上触发。 请注意，规范中有很多地方涉及到可以"<a href="https://html.spec.whatwg.org/multipage/parsing.html#delay-the-load-event">延迟加载事件</a>"的内容。</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden"> -<p>此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并向我们发送请求请求。</p> -</div> - -<p>{{Compat("api.Window.load_event")}}</p> - -<h2 id="参阅">参阅</h2> - -<ul> - <li>相关事件: {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/beforeunload_event", "beforeunload")}}, {{domxref("Window/unload_event", "unload")}}</li> -</ul> diff --git a/files/zh-cn/web/events/loadend/index.html b/files/zh-cn/web/events/loadend/index.html deleted file mode 100644 index 529a0b1673..0000000000 --- a/files/zh-cn/web/events/loadend/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: loadend -slug: Web/Events/loadend -translation_of: Web/API/XMLHttpRequest/loadend_event ---- -<p>loadend事件总是在一个资源的加载进度停止之后被触发 (例如，在已经触发“error”，“abort”或“load”事件之后)。这适用于 {{domxref("XMLHttpRequest")}}调用, 以及{{htmlelement("img")}}或{{htmlelement("video")}}之类元素的内容。</p> - -<h2 id="General_info">General info</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">可冒泡</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消</dt> - <dd style="margin: 0 0 0 120px;">否</dd> - <dt style="float: left; text-align: right; width: 120px;">触发对象</dt> - <dd style="margin: 0 0 0 120px;">例如{{domxref("HTMLImageElement")}}</dd> - <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> - <dd style="margin: 0 0 0 120px;">无</dd> -</dl> - -<h2 id="Properties">Properties</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>lengthComputable </code>{{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Specifies whether or not the total size of the transfer is known. Read only.</td> - </tr> - <tr> - <td><code>loaded</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>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.</td> - </tr> - <tr> - <td><code>total</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>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.</td> - </tr> - </tbody> -</table> - -<h2 id="Related_Events">Related Events</h2> - -<ul> - <li>{{event("loadstart")}}</li> - <li>{{event("progress")}}</li> - <li>{{event("error")}}</li> - <li>{{event("abort")}}</li> - <li>{{event("load")}}</li> - <li>{{event("loadend")}}</li> -</ul> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoring progress</a></li> -</ul> diff --git a/files/zh-cn/web/events/loadstart/index.html b/files/zh-cn/web/events/loadstart/index.html deleted file mode 100644 index 60362dd94a..0000000000 --- a/files/zh-cn/web/events/loadstart/index.html +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: loadstart -slug: Web/Events/loadstart -tags: - - 事件 -translation_of: Web/API/XMLHttpRequest/loadstart_event ---- -<p>当程序开始加载时，loadstart 事件将被触发。这个事件可以被 {{domxref("XMLHttpRequest")}} 调用, 也适用于 {{htmlelement("img")}} 和 {{htmlelement("video")}} 元素.</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范文档</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/progress-events/">Progress</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;">ProgressEvent</dd> - <dt style="float: left; text-align: right; width: 120px;">冒泡</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">可取消</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">目标</dt> - <dd style="margin: 0 0 0 120px;">Element</dd> - <dt style="float: left; text-align: right; width: 120px;">默认动作</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>lengthComputable </code>{{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Specifies whether or not the total size of the transfer is known. Read only.</td> - </tr> - <tr> - <td><code>loaded</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>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.</td> - </tr> - <tr> - <td><code>total</code> {{readonlyInline}}</td> - <td>unsigned long (long)</td> - <td>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.</td> - </tr> - </tbody> -</table> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li>{{event("loadstart")}}</li> - <li>{{event("progress")}}</li> - <li>{{event("error")}}</li> - <li>{{event("abort")}}</li> - <li>{{event("load")}}</li> - <li>{{event("loadend")}}</li> -</ul> - -<h2 id="了解更多">了解更多</h2> - -<ul> - <li><a href="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress" title="/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest">Monitoring progress</a></li> -</ul> diff --git a/files/zh-cn/web/events/message/index.html b/files/zh-cn/web/events/message/index.html deleted file mode 100644 index ccbd2d9859..0000000000 --- a/files/zh-cn/web/events/message/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 'BroadcastChannel: message event' -slug: Web/Events/message -tags: - - 事件 - - 消息 - - 通信 -translation_of: Web/API/BroadcastChannel/message_event ---- -<div>{{APIRef}}</div> - -<p>当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 <code>message</code> 事件。</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("MessageEvent")}}</td> - </tr> - <tr> - <th scope="row">Event handler property</th> - <td><code><a href="/zh-CN/docs/Web/API/BroadcastChannel/onmessage">onmessage</a></code></td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<h3 id="实时示例">实时示例</h3> - -<p>在这个例子中，有一个 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 作为发送者，当用户点击按钮之后，会广播 <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> 中的内容。同时，有两个 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 作为接收者，会监听广播的消息，并将结果写入 <code><a href="/en-US/docs/Web/HTML/Element/div"><div></a></code> 元素。</p> - -<h4 id="发送者">发送者</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>发送者</h1> -<label for="message">输入要广播的信息：</label><br/> -<textarea id="message" name="message" rows="1" cols="40">Hello</textarea> -<button id="broadcast-message" type="button">开始广播</button></pre> - -<pre class="brush: css">body { - border: 1px solid black; - padding: .5rem; - height: 150px; - font-family: "Fira Sans", sans-serif; -} - -h1 { - font: 1.6em "Fira Sans", sans-serif; - margin-bottom: 1rem; -} - -textarea { - padding: .2rem; -} - -label, br { - margin: .5rem 0; -} - -button { - vertical-align: top; - height: 1.5rem; -}</pre> -</div> - -<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); -const messageControl = document.querySelector('#message'); -const broadcastMessageButton = document.querySelector('#broadcast-message'); - -broadcastMessageButton.addEventListener('click', () => { - channel.postMessage(messageControl.value); -}) -</pre> - -<h4 id="接收者_1">接收者 1</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>接收者 1</h1> -<div id="received"></div></pre> - -<pre class="brush: css">body { - border: 1px solid black; - padding: .5rem; - height: 100px; - font-family: "Fira Sans", sans-serif; -} - -h1 { - font: 1.6em "Fira Sans", - sans-serif; margin-bottom: 1rem; -} -</pre> -</div> - -<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); -channel.addEventListener('message', (event) => { - received.textContent = event.data; -});</pre> - -<h4 id="接收者_2">接收者 2</h4> - -<div class="hidden"> -<pre class="brush: html"><h1>接收者 2</h1> -<div id="received"></div></pre> - -<pre class="brush: css">body { - border: 1px solid black; - padding: .5rem; - height: 100px; - font-family: "Fira Sans", sans-serif; -} - -h1 { - font: 1.6em "Fira Sans", sans-serif; - margin-bottom: 1rem; -} -</pre> -</div> - -<pre class="brush: js">const channel = new BroadcastChannel('example-channel'); -channel.addEventListener('message', (event) => { - received.textContent = event.data; -});</pre> - -<h3 id="结果">结果</h3> - -<p>{{ EmbedLiveSample('发送者', '100%', '170px','' ,'' , 'dummy') }}</p> - -<p>{{ EmbedLiveSample('接收者_1', '100%', '150px','' ,'' , 'dummy') }}</p> - -<p>{{ EmbedLiveSample('接收者_2', '100%', '150px','' ,'' , 'dummy') }}</p> - -<h2 id="规范">规范</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'indices.html#event-message')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.BroadcastChannel.message_event")}}</p> - -<h2 id="相关信息">相关信息</h2> - -<ul> - <li>相关事件：<code><a href="/docs/Web/API/BroadcastChannel/messageerror_event">messageerror</a></code></li> -</ul> diff --git a/files/zh-cn/web/events/mousewheel/index.html b/files/zh-cn/web/events/mousewheel/index.html deleted file mode 100644 index 599f17edbb..0000000000 --- a/files/zh-cn/web/events/mousewheel/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: mousewheel -slug: Web/Events/mousewheel -translation_of: Web/API/Element/mousewheel_event ---- -<p>{{ Non-standard_header() }}</p> - -<p>The <code>mousewheel</code> event is fired asynchronously when a mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.</p> - -<div class="note"> -<p><strong>Do not use this wheel event.</strong></p> - -<p>This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard <em>{{event("wheel")}} event.</em></p> -</div> - -<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Interface :</dfn>{{ domxref('MouseWheelEvent') }}</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Synchronicity :</dfn>asynchronous</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Bubbles :</dfn> yes (Though, MSDN documents "No")</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Cancelable :</dfn> yes (Though, MSDN documents "No")</li> - <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Default action :</dfn> Scroll, moving history, or zooming in/out</li> -</ul> - -<h2 id="Specification">Specification</h2> - -<p>The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}</p> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatChrome("1.0") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatIE("6.0") }}</td> - <td>{{ CompatOpera("10.00") }}</td> - <td>{{ CompatSafari("3.0") }}</td> - </tr> - <tr> - <td><code>wheelDeltaX</code></td> - <td>{{ CompatChrome("1.0") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatSafari("3.0") }}</td> - </tr> - <tr> - <td><code>wheelDeltaY</code></td> - <td>{{ CompatChrome("1.0") }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatSafari("3.0") }}</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Edge</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>wheelDeltaX</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - <tr> - <td><code>wheelDeltaY</code></td> - <td>{{ CompatUnknown() }}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{ CompatNo() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - <td>{{ CompatUnknown() }}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="detail_value">detail value</h2> - -<p>The <code>detail</code> attribute value is always 0 except Opera (Presto).</p> - -<p>Opera (Presto) sets almost the same value as Firefox (Gecko)'s <code>DOMMouseScroll</code> event's detail value which indicates the scroll amount by line. Negative value indicates to scroll to bottom or right. Positive value indicates to scroll to top or left.</p> - -<p>On Mac, the value is computed from accelerated scroll amount.</p> - -<p>On Linux, <code>2</code> or <code>-2</code> is set per native wheel event.</p> - -<h2 id="wheelDelta_wheelDeltaX_and_wheelDeltaY_value">wheelDelta, wheelDeltaX and wheelDeltaY value</h2> - -<p>The <code>wheelDelta</code> attribute value is an abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive, otherwise negative. This means that the delta value sign is different from DOM Level 3 Event's <code>wheel</code>. However, the meaning of the amount of these values is not the same between browsers. See following explanation for the detail.</p> - -<p>IE and Opera (Presto) only support <code>wheelDelta</code> attribute and do <strong>not</strong> support horizontal scroll.</p> - -<p>The <code>wheelDeltaX</code> attribute value indicates the <code>wheelDelta</code> attribute value along the horizontal axis. When a user operates the device for scrolling to right, the value is negative. Otherwise, i.e., if it's to left, the value is positive.</p> - -<p>The <code>wheelDeltaY</code> attribute value indicates the <code>wheelDelta</code> attribute value along the vertical axis. The sign of the value is the same as the <code>wheelDelta</code> attribute value.</p> - -<h3 id="IE">IE</h3> - -<p>The value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. It means that if the mouse wheel doesn't support high resolution scroll, the value is 120 per notch. The value isn't changed even if the scroll amount of system settings is page scroll.</p> - -<h3 id="Chrome">Chrome</h3> - -<p>On Windows, the value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. And also, the value isn't changed even if the scroll amount of system settings is page scroll, i.e., the value is the same as IE on Windows.</p> - -<p>On Linux, the value is <code>120</code> or <code>-120</code> per native wheel event. This makes the same behavior as IE and Chrome for Windows.</p> - -<p>On Mac, the value is complicated. The value is changed if the <strong>device</strong> that causes the native wheel event supports continuous scroll.</p> - -<p>If the device supports continuous scroll (e.g., trackpad of MacBook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. In this case, the value is the same as Safari.</p> - -<p>If the device does <strong>not</strong> support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is computed from non-accelerated scroll amount (120 per notch). In this case, the value is different from Safari.</p> - -<p>This difference makes a serious issue for web application developers. That is, web developers cannot know if <code>mousewheel</code> event is caused by which device.</p> - -<p>See <code>WebInputEventFactory::mouseWheelEvent</code> of the <a href="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/WebInputEventFactoryMac.mm" title="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/mac/WebInputEventFactory.mm">Chromium's source code</a> for the detail.</p> - -<h3 id="Safari">Safari</h3> - -<p>The value is always computed from accelerated scroll amount. This is really different from other browsers except Chrome with continuous scroll supported device.</p> - -<p>Note: tested with the Windows package, the earliest available version was Safari 3.0 from 2007. It could be that earlier versions (on Mac) support the properties too.</p> - -<h3 id="Opera_(Presto)">Opera (Presto)</h3> - -<p>The value is always the <code>detail</code> attribute value ✕ <code>40</code>.</p> - -<p>On Windows, since the <code>detail</code> attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page.</p> - -<p>On Linux, the value is <code>80</code> or <code>-80</code> per native wheel event. This is different from other browsers.</p> - -<p>On Mac, the <code>detail</code> attribute value is computed from accelerated scroll amout of native event. The value is usually much bigger than Safari's or Chrome's value.</p> - -<h2 id="See_also">See also</h2> - -<ul> - <li>{{ domxref("MouseWheelEvent") }}</li> - <li>Gecko's legacy mouse wheel events: <code>DOMMouseScroll</code>, <code>MozMousePixelScroll</code></li> - <li>Standardized wheel event: <code>wheel</code></li> -</ul> diff --git a/files/zh-cn/web/events/pageshow/index.html b/files/zh-cn/web/events/pageshow/index.html deleted file mode 100644 index d0aec41716..0000000000 --- a/files/zh-cn/web/events/pageshow/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: pageshow -slug: Web/Events/pageshow -translation_of: Web/API/Window/pageshow_event ---- -<p>当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)</p> - -<h2 id="基本信息">基本信息</h2> - -<dl> - <dt style="float: left; text-align: right; width: 120px;">规范</dt> - <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></dd> - <dt style="float: left; text-align: right; width: 120px;">接口</dt> - <dd style="margin: 0 0 0 120px;"><a href="/en-US/docs/Web/API/PageTransitionEvent">PageTransitionEvent</a></dd> - <dt style="float: left; text-align: right; width: 120px;">事件冒泡</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">事件取消</dt> - <dd style="margin: 0 0 0 120px;">No</dd> - <dt style="float: left; text-align: right; width: 120px;">事件源</dt> - <dd style="margin: 0 0 0 120px;">Document (dispatched on Window)</dd> - <dt style="float: left; text-align: right; width: 120px;">默认操作</dt> - <dd style="margin: 0 0 0 120px;">None</dd> -</dl> - -<h2 id="属性">属性</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Property</th> - <th scope="col">Type</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>target</code> {{readonlyInline}}</td> - <td>{{domxref("EventTarget")}}</td> - <td>The event target (the topmost target in the DOM tree).</td> - </tr> - <tr> - <td><code>type</code> {{readonlyInline}}</td> - <td>{{domxref("DOMString")}}</td> - <td>The type of event.</td> - </tr> - <tr> - <td><code>bubbles</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event normally bubbles or not.</td> - </tr> - <tr> - <td><code>cancelable</code> {{readonlyInline}}</td> - <td>{{jsxref("Boolean")}}</td> - <td>Whether the event is cancellable or not.</td> - </tr> - <tr> - <td><code>persisted</code> {{readonlyInline}}</td> - <td>{{jsxref("boolean")}}</td> - <td>表示网页是否是来自缓存.</td> - </tr> - </tbody> -</table> - -<h2 id="示例">示例</h2> - -<p>以下示例将会在控制台打印由前进/后退按钮以及load事件触发后引起的pageshow事件：</p> - -<pre>window.addEventListener('pageshow', function(event) { - console.log('after , pageshow :',event); -}); - - -window.addEventListener('load', function() { - console.log('before'); -}); -</pre> - - - - - -<p>不规范的写法，你同样可以将这个事件当做一个属性添加到body标签，类似于onload</p> - -<pre><body onload="myonload()" onpageshow="mypageshowcode()"></pre> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{CompatibilityTable()}}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome("4")}}</td> - <td>{{CompatGeckoDesktop("1.8")}}</td> - <td>11</td> - <td>15</td> - <td>5</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Mobile</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.3</td> - <td>{{CompatUnknown()}}</td> - <td>11</td> - <td>35</td> - <td>5.1</td> - </tr> - </tbody> -</table> - - -</div> - -<h2 id="相关事件">相关事件</h2> - -<ul> - <li><a href="/en-US/docs/Mozilla_event_reference/pagehide"><code>pagehide</code></a></li> - <li><a href="/en-US/docs/Using_Firefox_1.5_caching#pageshow_event">Using Firefox 1.5 caching — pageshow event</a></li> -</ul> diff --git a/files/zh-cn/web/events/paste/index.html b/files/zh-cn/web/events/paste/index.html deleted file mode 100644 index 1fb088eddf..0000000000 --- a/files/zh-cn/web/events/paste/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'Element: paste事件' -slug: Web/Events/paste -tags: - - Clipboard API - - Event - - Reference -translation_of: Web/API/Element/paste_event ---- -<p> {{APIRef}}</p> - -<p>当用户在浏览器用户界面发起“粘贴”操作时，会触发<strong><code>paste</code></strong>事件。</p> - -<pre class="syntaxbox"><strong>冒泡</strong> 是 - -<strong>可取消</strong> 是 - -<strong>接口</strong> {{domxref("ClipboardEvent")}} - -<strong>事件处理属性</strong> {{domxref("HTMLElement/onpaste", "onpaste")}} -</pre> - -<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">如果光标位于可编辑的上下文中（例如，在 {{HTMLElement("textarea")}} 或者 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 属性设置为 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;">true的元素</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">），则默认操作是将剪贴板的内容插入光标所在位置的文档中。</span></p> - -<p>事件处理程序可以通过调用事件的 <code>clipboardData</code> 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。</p> - -<p>要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），事件处理程序必须使用 {{domxref("Event/preventDefault", "event.preventDefault()")}}，取消默认操作，然后手动插入想要的数据。</p> - -<p>可以构造和分派<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events">合成的</a><code>paste</code>事件，但这不会影响文档内容。</p> - -<h2 id="举例">举例</h2> - -<h3 id="Live_example">Live example</h3> - -<h4 id="HTML">HTML</h4> - -<pre class="brush: html"><div class="source" contenteditable="true">Try copying text from this box...</div> -<div class="target" contenteditable="true">...and pasting it into this one</div></pre> - -<h4 id="CSS">CSS</h4> - -<pre class="brush: css">div.source, div.target { - border: 1px solid gray; - margin: .5rem; - padding: .5rem; - height: 1rem; - background-color: #e9eef1; -} -</pre> - -<h4 id="JS">JS</h4> - -<pre class="brush: js">const target = document.querySelector('div.target'); - -target.addEventListener('paste', (event) => { - let paste = (event.clipboardData || window.clipboardData).getData('text'); - paste = paste.toUpperCase(); - - const selection = window.getSelection(); - if (!selection.rangeCount) return false; - selection.deleteFromDocument(); - selection.getRangeAt(0).insertNode(document.createTextNode(paste)); - - event.preventDefault(); -}); -</pre> - -<h4 id="Result">Result</h4> - -<p> {{EmbedLiveSample('Live_example', '100%', '100px')}}</p> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> - <td>{{Spec2('Clipboard API')}}</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden"> -<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> -</div> - -<p>{{Compat("api.Element.paste_event")}}</p> - -<h2 id="另见">另见</h2> - -<ul> - <li>Related events: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}</li> - <li>This event on {{domxref("Document")}} targets: {{domxref("Document/paste_event", "paste")}}</li> - <li>This event on {{domxref("Window")}} targets: {{domxref("Window/paste_event", "paste")}}</li> -</ul> 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> diff --git a/files/zh-cn/web/events/transitionend/index.html b/files/zh-cn/web/events/transitionend/index.html deleted file mode 100644 index f79db8503a..0000000000 --- a/files/zh-cn/web/events/transitionend/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -<div>{{APIRef}}</div> - -<p><code>transitionend</code> 事件会在 <a href="/en-US/docs/CSS/Using_CSS_transitions">CSS transition</a> 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置 {{cssxref("display")}} 为"<code>none"</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("TransitionEvent")}}</td> - </tr> - <tr> - <th scope="row">事件处理器属性</th> - <td>{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}</td> - </tr> - </tbody> -</table> - -<p><code>transitionend</code> 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 <code>transitioncancel</code> 事件，则<code>transitionend</code> 事件不会触发。</p> - -<h2 id="例">例</h2> - -<pre class="brush: js">/* - * 在指定的元素上监听transitionend事件, 例如#slidingMenu - * 然后指定一个函数, 例如 showMessage() - */ -function showMessage() { - console.log('Transition 已完成'); -} - -var element = document.getElementById("slidingMenu"); -element.addEventListener("transitionend", showMessage, false); -</pre> - -<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("CSS3 Transitions", "#transition-events", "transitionend")}}</td> - <td>{{ Spec2('CSS3 Transitions') }}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<p>{{ CompatibilityTable() }}</p> - -<div id="compat-desktop"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Chrome</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari (WebKit)</th> - </tr> - <tr> - <td>Basic support</td> - <td>1.0<sup>[1]</sup><br> - 36</td> - <td>{{CompatGeckoDesktop("2.0")}}</td> - <td>10</td> - <td>10.5<sup>[2]</sup><br> - 12<br> - 12.10<br> - 23</td> - <td>3.2<sup>[1]</sup><br> - 7.0.6</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</th> - <th>Android</th> - <th>Firefox Mobile (Gecko)</th> - <th>IE Phone</th> - <th>Opera Mobile</th> - <th>Safari Mobile</th> - </tr> - <tr> - <td>Basic support</td> - <td>2.1</td> - <td>{{CompatGeckoMobile("2.0")}}</td> - <td>{{CompatUnknown}}</td> - <td>10<sup>[2]</sup><br> - 12<br> - 12.10</td> - <td>3.2<sup>[1]</sup></td> - </tr> - </tbody> -</table> -</div> - -<p>[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 <code>webkitTransitionEnd</code>. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 <code>transitionend</code>.</p> - -<p>[2] 在 Opera 10.5 上实现<code>oTransitionEnd</code>，从版本12开始实现 <code>otransitionend，</code> 从版本12.10开始实现 <code>transitionend.</code></p> - -<h2 id="参考">参考</h2> - -<ul> - <li>The {{ domxref("TransitionEvent") }} interface and the <a href="/en-US/docs/Mozilla_event_reference/transitionend" title="The 'transitionend' event"><code>transitionend</code></a> event.</li> - <li>{{cssxref("transition")}}, {{cssxref("transition-delay")}}, {{cssxref("transition-duration")}}, {{cssxref("transition-property")}}, {{cssxref("transition-timing-function")}}.</li> -</ul> diff --git a/files/zh-cn/web/events/unhandledrejection/index.html b/files/zh-cn/web/events/unhandledrejection/index.html deleted file mode 100644 index 9c3286aa44..0000000000 --- a/files/zh-cn/web/events/unhandledrejection/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: unhandledrejection -slug: Web/Events/unhandledrejection -tags: - - API - - JavaScript - - Promise - - unhandledrejection - - 事件 - - 参考 -translation_of: Web/API/Window/unhandledrejection_event ---- -<div>{{APIRef("HTML DOM")}}</div> - -<p><span class="seoSummary">当{{jsxref("Promise")}} 被 reject 且没有 reject 处理器的时候，会触发 <strong><code>unhandledrejection</code></strong> 事件；这可能发生在 {{domxref("window")}} 下，但也可能发生在 {{domxref("Worker")}} 中。</span> 这对于调试回退错误处理非常有用。</p> - -<table class="properties"> - <tbody> - <tr> - <th scope="row">是否冒泡</th> - <td>No</td> - </tr> - <tr> - <th scope="row">是否可取消</th> - <td>Yes</td> - </tr> - <tr> - <th scope="row">接口</th> - <td>{{domxref("PromiseRejectionEvent")}}</td> - </tr> - <tr> - <th scope="row">事件处理器属性</th> - <td>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}</td> - </tr> - </tbody> -</table> - -<h2 id="使用备注">使用备注</h2> - -<p><code>unhandledrejection</code> 继承自 {{domxref("PromiseRejectionEvent")}}，而 {{domxref("PromiseRejectionEvent")}} 又继承自 {{domxref("Event")}}。因此<code>unhandledrejection</code> 含有 <code>PromiseRejectionEvent</code> 和 <code>Event</code> 的属性和方法。</p> - -<h2 id="例子">例子</h2> - -<p>Here we have a few examples showing ways you can make use of the <code>unhandledrejection</code> event. The event includes two useful pieces of information:</p> - -<p>我们将通过几个例子来展示 <code>unhandledrejection</code> 事件的使用方式。该事件主要包含两部分有用的信息：</p> - -<dl> - <dt><code>promise</code></dt> - <dd>The actual {{jsxref("Promise")}} which was rejected with no handler available to deal with the rejection.</dd> - <dd>特定的 {{jsxref("Promise")}} 被 reject 而没有被相应的异常处理方法所处理时</dd> - <dt><code>reason</code></dt> - <dd>The reason that would have been passed into the rejection handler if one had existed. See {{jsxref("Promise.catch", "catch()")}} for details.</dd> - <dd>将会传入异常处理方法中的错误原因（如果存在），查看 {{jsxref("Promise.catch", "catch()")}} 相关以获取更多细节。</dd> -</dl> - -<h3 id="基本的异常上报">基本的异常上报</h3> - -<p>此示例只是将有关未处理的 Promise rejection 信息打印到控制台。</p> - -<pre class="brush:js; notranslate">window.addEventListener("unhandledrejection", event => { - console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); -}); -</pre> - -<p>您还可以使用 {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} 事件处理程序属性来设置事件侦听器:</p> - -<pre class="brush: js notranslate">window.onunhandledrejection = event => { - console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`); -}; -</pre> - -<h3 id="防止默认处理">防止默认处理</h3> - -<p>许多环境(例如 {{Glossary("Node.js")}} ) 默认情况下会向控制台打印未处理的 Promise rejections。您可以通过添加一个处理程序来防止 <code>unhandledrejection</code> 这种情况的发生，该处理程序除了您希望执行的任何其他任务之外，还可以调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 来取消该事件，从而防止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 <code>unhandledrejection</code> 是可以取消的。</p> - -<pre class="brush:js; notranslate">window.addEventListener('unhandledrejection', function (event) { - // ...您的代码可以处理未处理的拒绝... - - // 防止默认处理（例如将错误输出到控制台） - - event.preventDefault(); -}); -</pre> - -<h2 id="说明">说明</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Initial definition.</td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - -<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想提供数据，请查看https://github.com/mdn/browser-compat-data 并向我们发送请求请求。</div> - -<p>{{Compat("api.Window.unhandledrejection_event")}}</p> - -<h2 id="参考">参考</h2> - -<ul> - <li>{{SectionOnPage("/en-US/docs/Web/JavaScript/Guide/Using_promises", "Promise rejection events")}}</li> - <li>{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} event handler property<sup><a href="#seealso-footnote-1">1</a></sup></li> - <li>{{Event("rejectionhandled")}}</li> - <li>{{domxref("Promise")}}</li> -</ul> - -<p><a id="seealso-footnote-1" name="seealso-footnote-1">[1]</a> The corresponding event handler property is defined on the {{domxref("WindowEventHandlers")}} mixin, which is available on both the {{domxref("Window")}} interface and all types of {{domxref("Worker")}} interfaces.</p> diff --git a/files/zh-cn/web/events/unload/index.html b/files/zh-cn/web/events/unload/index.html deleted file mode 100644 index 2510b1f651..0000000000 --- a/files/zh-cn/web/events/unload/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: unload -slug: Web/Events/unload -tags: - - Window - - events - - unload -translation_of: Web/API/Window/unload_event ---- -<p>{{APIRef}}</p> - -<p>当文档或一个子资源正在被卸载时, 触发 <strong>unload</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("Event")}}</td> - </tr> - <tr> - <th scope="row">事件处理程序属性（Event handler property）</th> - <td>{{domxref("WindowEventHandlers/onunload", "onunload")}}</td> - </tr> - </tbody> -</table> - -<p>它在下面两个事件后被触发:</p> - -<ol> - <li><a href="/en-US/docs/Mozilla_event_reference/beforeunload" title="/en-US/docs/Mozilla_event_reference/beforeunload">beforeunload</a> (可取消默认行为的事件)</li> - <li><a href="/en-US/docs/Mozilla_event_reference/pagehide" title="/en-US/docs/Mozilla_event_reference/pagehide">pagehide</a></li> -</ol> - -<p>文档处于以下状态：</p> - -<ul> - <li>所有资源仍存在 (图片, iframe 等.)</li> - <li>对于终端用户所有资源均不可见</li> - <li>界面交互无效 (<code>window.open</code>, <code>alert</code>, <code>confirm</code> 等.)</li> - <li>错误不会停止卸载文档的过程</li> -</ul> - -<p>请注意<code>unload</code>事件也遵循文档树:父iframe会在子iframe卸载前卸载(参考下面的例子).</p> - -<h2 id="示例">示例</h2> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <title>Parent Frame</title> - <script> - window.addEventListener('beforeunload', function(event) { - console.log('I am the 1st one.'); - }); - window.addEventListener('unload', function(event) { - console.log('I am the 3rd one.'); - }); - </script> - </head> - <body> - <iframe src="child-frame.html"></iframe> - </body> -</html></pre> - -<p>下面是 <code>child-frame.html的内容</code>:</p> - -<pre class="brush: html notranslate"><!DOCTYPE html> -<html> - <head> - <title>Child Frame</title> - <script> - window.addEventListener('beforeunload', function(event) { - console.log('I am the 2nd one.'); - }); - window.addEventListener('unload', function(event) { - console.log('I am the 4th and last one…'); - }); - </script> - </head> - <body> - ☻ - </body> -</html></pre> - -<p>当父iframe被卸载，事件将按<code>console.log()</code> 消息描述的顺序触发。</p> - -<h2 id="规范">规范</h2> - -<table> - <thead> - <tr> - <th scope="col">规范</th> - <th scope="col">状态</th> - <th scope="col">描述</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('UI Events', '#event-type-unload', 'unload')}}</td> - <td>{{Spec2('UI Events')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="浏览器兼容性">浏览器兼容性</h2> - - - -<p>{{Compat("api.Window.unload_event")}}</p> - -<h2 id="参见">参见</h2> - -<ul> - <li>相关事件： {{domxref("Window/DOMContentLoaded_event", "DOMContentLoaded")}}, {{domxref("Document/readystatechange_event", "readystatechange")}}, {{domxref("Window/load_event", "load")}}</li> - <li><a href="https://html.spec.whatwg.org/multipage/browsers.html#unloading-documents">Unloading Documents — unload a document</a></li> -</ul> 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> |