diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/events | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/events')
37 files changed, 7384 insertions, 0 deletions
diff --git a/files/zh-cn/web/events/abort/index.html b/files/zh-cn/web/events/abort/index.html new file mode 100644 index 0000000000..74bcf9f740 --- /dev/null +++ b/files/zh-cn/web/events/abort/index.html @@ -0,0 +1,73 @@ +--- +title: abort +slug: Web/Events/abort +tags: + - abort +translation_of: Web/API/HTMLMediaElement/abort_event +--- +<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 new file mode 100644 index 0000000000..3ee72441cd --- /dev/null +++ b/files/zh-cn/web/events/afterprint/index.html @@ -0,0 +1,102 @@ +--- +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 new file mode 100644 index 0000000000..b2f4f0d980 --- /dev/null +++ b/files/zh-cn/web/events/afterscriptexecute/index.html @@ -0,0 +1,57 @@ +--- +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 new file mode 100644 index 0000000000..cb701ac392 --- /dev/null +++ b/files/zh-cn/web/events/animationend/index.html @@ -0,0 +1,92 @@ +--- +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 new file mode 100644 index 0000000000..53929bfb0d --- /dev/null +++ b/files/zh-cn/web/events/animationstart/index.html @@ -0,0 +1,89 @@ +--- +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 new file mode 100644 index 0000000000..fe9480238a --- /dev/null +++ b/files/zh-cn/web/events/beforeprint/index.html @@ -0,0 +1,100 @@ +--- +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 new file mode 100644 index 0000000000..00aa4120c1 --- /dev/null +++ b/files/zh-cn/web/events/beforescriptexecute/index.html @@ -0,0 +1,57 @@ +--- +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 new file mode 100644 index 0000000000..9cef2f2cfc --- /dev/null +++ b/files/zh-cn/web/events/beforeunload/index.html @@ -0,0 +1,104 @@ +--- +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 new file mode 100644 index 0000000000..a57cc5b995 --- /dev/null +++ b/files/zh-cn/web/events/blur/index.html @@ -0,0 +1,150 @@ +--- +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 new file mode 100644 index 0000000000..6a997fc430 --- /dev/null +++ b/files/zh-cn/web/events/change/index.html @@ -0,0 +1,124 @@ +--- +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 new file mode 100644 index 0000000000..4a023fc0e5 --- /dev/null +++ b/files/zh-cn/web/events/compositionend/index.html @@ -0,0 +1,146 @@ +--- +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 new file mode 100644 index 0000000000..71aa9f1f0d --- /dev/null +++ b/files/zh-cn/web/events/compositionstart/index.html @@ -0,0 +1,152 @@ +--- +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 new file mode 100644 index 0000000000..11952af506 --- /dev/null +++ b/files/zh-cn/web/events/compositionupdate/index.html @@ -0,0 +1,145 @@ +--- +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 new file mode 100644 index 0000000000..ac249f5055 --- /dev/null +++ b/files/zh-cn/web/events/copy/index.html @@ -0,0 +1,164 @@ +--- +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 new file mode 100644 index 0000000000..48c024451a --- /dev/null +++ b/files/zh-cn/web/events/cut/index.html @@ -0,0 +1,159 @@ +--- +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 new file mode 100644 index 0000000000..67c6a44253 --- /dev/null +++ b/files/zh-cn/web/events/domcontentloaded/index.html @@ -0,0 +1,128 @@ +--- +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/domlinkadded/index.html b/files/zh-cn/web/events/domlinkadded/index.html new file mode 100644 index 0000000000..d066512013 --- /dev/null +++ b/files/zh-cn/web/events/domlinkadded/index.html @@ -0,0 +1,57 @@ +--- +title: DOMLinkAdded +slug: Web/Events/DOMLinkAdded +translation_of: Archive/Add-ons/Events/DOMLinkAdded +--- +<p>当把一个<a href="/en-US/docs/HTML/Element/link"><code><link></code></a>元素插入到文档中的时候,会触发<code>DOMLinkAdded</code>事件.</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <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;">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;">window, <a href="/en-US/docs/XUL/browser">browser</a></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">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> diff --git a/files/zh-cn/web/events/error/index.html b/files/zh-cn/web/events/error/index.html new file mode 100644 index 0000000000..913caf76bf --- /dev/null +++ b/files/zh-cn/web/events/error/index.html @@ -0,0 +1,135 @@ +--- +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 new file mode 100644 index 0000000000..4a93ee7726 --- /dev/null +++ b/files/zh-cn/web/events/focus/index.html @@ -0,0 +1,137 @@ +--- +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 new file mode 100644 index 0000000000..87a8a9bd48 --- /dev/null +++ b/files/zh-cn/web/events/focusout/index.html @@ -0,0 +1,125 @@ +--- +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 new file mode 100644 index 0000000000..38fc5c1920 --- /dev/null +++ b/files/zh-cn/web/events/icecandidate/index.html @@ -0,0 +1,135 @@ +--- +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/index.html b/files/zh-cn/web/events/index.html new file mode 100644 index 0000000000..6d3ca13b79 --- /dev/null +++ b/files/zh-cn/web/events/index.html @@ -0,0 +1,2955 @@ +--- +title: 事件参考 +slug: Web/Events +tags: + - Event + - Web + - 事件 + - 参考 + - 总览 +translation_of: Web/Events +--- +<p>发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自{{DOMxRef("Event")}} 接口的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。</p> + +<p>本文提供了一个可以发送的事件的列表；一些是官方标准中的标准事件，另一些则是在特定浏览器内部使用的事件；例如，列出的 Mozilla 特定事件，使<a href="/zh-CN/docs/Mozilla/Add-ons">附加组件</a>可以借助它们与浏览器进行交互。</p> + +<h2 id="最常见的类别">最常见的类别</h2> + +<table class="standard-table"> + <caption> + <h3 id="资源事件">资源事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("error")}}</td> + <td>资源加载失败时。</td> + </tr> + <tr> + <td>{{Event("abort")}}</td> + <td>正在加载资源已经被中止时。</td> + </tr> + <tr> + <td>{{Event("load")}}</td> + <td>资源及其相关资源已完成加载。</td> + </tr> + <tr> + <td>{{Event("beforeunload")}}</td> + <td>window，document 及其资源即将被卸载。</td> + </tr> + <tr> + <td>{{Event("unload")}}</td> + <td>文档或一个依赖资源正在被卸载。</td> + </tr> + </tbody> +</table> + +<h3 id="网络事件">网络事件</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("online")}}</td> + <td>浏览器已获得网络访问。</td> + </tr> + <tr> + <td>{{Event("offline")}}</td> + <td>浏览器已失去网络访问。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="焦点事件">焦点事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("focus")}}</td> + <td>元素获得焦点（不会冒泡）。</td> + </tr> + <tr> + <td>{{Event("blur")}}</td> + <td>元素失去焦点（不会冒泡）。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="WebSocket_事件">WebSocket 事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>WebSocket 连接已建立。</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>通过 WebSocket 接收到一条消息。</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>WebSocket 连接异常被关闭（比如有些数据无法发送）。</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>WebSocket 连接已关闭。</td> + </tr> + </tbody> +</table> + +<table> + <caption> + <h3 id="会话历史事件">会话历史事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("pagehide")}}</td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{Event("pageshow")}}</td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{Event("popstate")}}</td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="CSS_动画事件">CSS 动画事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("animationstart")}}</td> + <td>某个 CSS 动画开始时触发。</td> + </tr> + <tr> + <td>{{Event("animationend")}}</td> + <td>某个 CSS 动画完成时触发。</td> + </tr> + <tr> + <td>{{Event("animationiteration")}}</td> + <td>某个 CSS 动画完成后重新开始时触发。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="CSS_过渡事件">CSS 过渡事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("transitionstart")}}</td> + <td>A <a href="/zh-CN/docs/Web/CSS/CSS_Transitions">CSS transition</a> has actually started (fired after any delay).</td> + </tr> + <tr> + <td>{{Event("transitioncancel")}}</td> + <td>CSS过渡被取消</td> + </tr> + <tr> + <td>{{Event("transitionend")}}</td> + <td>CSS过渡已经完成</td> + </tr> + <tr> + <td>{{Event("transitionrun")}}</td> + <td>A <a href="/zh-CN/docs/Web/CSS/CSS_Transitions">CSS transition</a> has begun running (fired before any delay starts).</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="表单事件">表单事件</h3> + </caption> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("reset")}}</td> + <td>点击重置按钮时</td> + </tr> + <tr> + <td>{{Event("submit")}}</td> + <td>点击提交按钮</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="打印事件">打印事件</h3> + </caption> + <thead> + <tr> + <th scope="col">时间名称</th> + <th scope="col">何时触发</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("beforeprint")}}</td> + <td>打印机已经就绪时触发</td> + </tr> + <tr> + <td>{{Event("afterprint")}}</td> + <td>打印机关闭时触发</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="文本写作事件">文本写作事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("compositionstart")}}</td> + <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td> + </tr> + <tr> + <td>{{Event("compositionupdate")}}</td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{Event("compositionend")}}</td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="视图事件">视图事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("fullscreenchange")}}</td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{Event("fullscreenerror")}}</td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{Event("resize")}}</td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{Event("scroll")}}</td> + <td>The document view or an element has been scrolled.</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="剪贴板事件">剪贴板事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("cut")}}</td> + <td>已经剪贴选中的文本内容并且复制到了剪贴板。</td> + </tr> + <tr> + <td>{{Event("copy")}}</td> + <td>已经把选中的文本内容复制到了剪贴板。</td> + </tr> + <tr> + <td>{{Event("paste")}}</td> + <td>从剪贴板复制的文本内容被粘贴。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="键盘事件">键盘事件</h3> + </caption> + <tbody> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + <tr> + <td>{{Event("keydown")}}</td> + <td>按下任意按键。</td> + </tr> + <tr> + <td>{{Event("keypress")}}</td> + <td>除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。）</td> + </tr> + <tr> + <td>{{Event("keyup")}}</td> + <td>释放任意按键。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="鼠标事件">鼠标事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("auxclick")}}</td> + <td>A pointing device button (ANY non-primary button) has been pressed and released on an element.</td> + </tr> + <tr> + <td>{{Event("click")}}</td> + <td>在元素上按下并释放任意鼠标按键。</td> + </tr> + <tr> + <td>{{Event("contextmenu")}}</td> + <td>右键点击（在右键菜单显示前触发）。</td> + </tr> + <tr> + <td>{{Event("dblclick")}}</td> + <td>在元素上双击鼠标按钮。</td> + </tr> + <tr> + <td>{{Event("mousedown")}}</td> + <td>在元素上按下任意鼠标按钮。</td> + </tr> + <tr> + <td>{{Event("mouseenter")}}</td> + <td>指针移到有事件监听的元素内。</td> + </tr> + <tr> + <td>{{Event("mouseleave")}}</td> + <td>指针移出元素范围外（不冒泡）。</td> + </tr> + <tr> + <td>{{Event("mousemove")}}</td> + <td>指针在元素内移动时持续触发。</td> + </tr> + <tr> + <td>{{Event("mouseover")}}</td> + <td>指针移到有事件监听的元素或者它的子元素内。</td> + </tr> + <tr> + <td>{{Event("mouseout")}}</td> + <td>指针移出元素，或者移到它的子元素上。</td> + </tr> + <tr> + <td>{{Event("mouseup")}}</td> + <td>在元素上释放任意鼠标按键。</td> + </tr> + <tr> + <td>{{Event("pointerlockchange")}}</td> + <td>鼠标被锁定或者解除锁定发生时。</td> + </tr> + <tr> + <td>{{Event("pointerlockerror")}}</td> + <td>可能因为一些技术的原因鼠标锁定被禁止时。</td> + </tr> + <tr> + <td>{{Event("select")}}</td> + <td>有文本被选中。</td> + </tr> + <tr> + <td>{{Event("wheel")}}</td> + <td>滚轮向任意方向滚动。</td> + </tr> + </tbody> +</table> + +<table class="standard-table"> + <caption> + <h3 id="拖放事件">拖放事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("drag")}}</td> + <td>正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次）</td> + </tr> + <tr> + <td>{{Event("dragend")}}</td> + <td>拖放操作结束。（松开鼠标按钮或按下 Esc 键）</td> + </tr> + <tr> + <td>{{Event("dragenter")}}</td> + <td>被拖动的元素或文本选区移入有效释放目标区</td> + </tr> + <tr> + <td>{{Event("dragstart")}}</td> + <td>用户开始拖动HTML元素或选中的文本</td> + </tr> + <tr> + <td>{{Event("dragleave")}}</td> + <td>被拖动的元素或文本选区移出有效释放目标区</td> + </tr> + <tr> + <td>{{Event("dragover")}}</td> + <td>被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）</td> + </tr> + <tr> + <td>{{Event("drop")}}</td> + <td>元素在有效释放目标区上释放</td> + </tr> + </tbody> +</table> + +<div style="overflow: auto;"> +<table class="standard-table"> + <caption> + <h3 id="媒体事件">媒体事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.</td> + </tr> + <tr> + <td>{{Event("canplay")}}</td> + <td>The browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{Event("canplaythrough")}}</td> + <td>The browser estimates it can play the media up to its end without stopping for content buffering.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{Event("durationchange")}}</td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("emptied")}}</td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{Event("ended")}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{Event("loadeddata")}}</td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{Event("loadedmetadata")}}</td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{Event("pause")}}</td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{Event("play")}}</td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{Event("playing")}}</td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{Event("ratechange")}}</td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{Event("seeked")}}</td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{Event("seeking")}}</td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{Event("stalled")}}</td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{Event("suspend")}}</td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{Event("timeupdate")}}</td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("volumechange")}}</td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{Event("waiting")}}</td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + </tbody> +</table> +</div> + +<table class="standard-table"> + <caption> + <h3 id="进度事件">进度事件</h3> + </caption> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Fired When</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/zh-CN/docs/Web/API/XMLHttpRequest/abort_event">abort</a></code></td> + <td>Progression has been terminated (not due to an error).</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>Progression has failed.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/API/XMLHttpRequest/load_event">load</a></code></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{Event("loadend")}}</td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + <tr> + <td>{{Event("loadstart")}}</td> + <td>Progress has begun.</td> + </tr> + <tr> + <td>{{Event("progress")}}</td> + <td>In progress.</td> + </tr> + <tr> + <td>{{Event("timeout")}}</td> + <td>Progression is terminated due to preset time expiring.</td> + </tr> + </tbody> +</table> + +<h3 id="存储事件">存储事件</h3> + +<p>{{Event("change")}} (see {{anch("Non-standard events")}})<br> + {{Event("storage")}}</p> + +<h3 id="更新事件">更新事件</h3> + +<p>{{Event("checking")}}<br> + {{Event("downloading")}}<br> + {{Event("error")}}<br> + {{Event("noupdate")}}<br> + {{Event("obsolete")}}<br> + {{Event("updateready")}}</p> + +<h3 id="值变化事件">值变化事件</h3> + +<p>{{Event("broadcast")}}<br> + {{Event("CheckboxStateChange")}}<br> + {{Event("hashchange")}}<br> + {{Event("input")}}<br> + {{Event("RadioStateChange")}}<br> + {{Event("readystatechange")}}<br> + {{Event("ValueChange")}}</p> + +<h3 id="未分类的事件">未分类的事件</h3> + +<p>{{Event("invalid")}}<br> + <code><a href="/zh-CN/docs/Web/API/DedicatedWorkerGlobalScope/message_event">message</a></code><br> + <code><a href="/zh-CN/docs/Web/API/EventSource/message_event">message</a></code><br> + <code><a href="/zh-CN/docs/Web/API/EventSource/open_event">open</a></code><br> + <code><a href="/zh-CN/docs/Web/API/Element/show_event">show</a></code></p> + +<h2 id="不常见和非标准事件">不常见和非标准事件</h2> + +<h3 id="Abortable_Fetch_events">Abortable Fetch events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event name</th> + <th scope="col">Fired when</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/zh-CN/docs/Web/API/AbortSignal/abort_event">abort</a></code></td> + <td>A DOM request is aborted, i.e. using {{DOMxRef("AbortController.abort()")}}.</td> + </tr> + </tbody> +</table> + +<h3 id="WebVR_events">WebVR events</h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event name</th> + <th scope="col">Fired when</th> + </tr> + <tr> + <td>{{Event("vrdisplayactivate")}}</td> + <td>When a VR display is able to be presented to, for example if an HMD has been moved to bring it out of standby, or woken up by being put on.</td> + </tr> + <tr> + <td>{{Event("vrdisplayblur")}}</td> + <td>when presentation to a {{DOMxRef("VRDisplay")}} has been paused for some reason by the browser, OS, or VR hardware — for example, while the user is interacting with a system menu or browser, to prevent tracking or loss of experience.</td> + </tr> + <tr> + <td>{{Event("vrdisplayconnect")}}</td> + <td>when a compatible {{DOMxRef("VRDisplay")}} is connected to the computer.</td> + </tr> + <tr> + <td>{{Event("vrdisplaydeactivate")}}</td> + <td>When a {{DOMxRef("VRDisplay")}} can no longer be presented to, for example if an HMD has gone into standby or sleep mode due to a period of inactivity.</td> + </tr> + <tr> + <td>{{Event("vrdisplaydisconnect")}}</td> + <td>When a compatible {{DOMxRef("VRDisplay")}} is disconnected from the computer.</td> + </tr> + <tr> + <td>{{Event("vrdisplayfocus")}}</td> + <td>When presentation to a {{DOMxRef("VRDisplay")}} has resumed after being blurred.</td> + </tr> + <tr> + <td>{{Event("vrdisplaypresentchange")}}</td> + <td>The presenting state of a {{DOMxRef("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.</td> + </tr> + </thead> +</table> + +<h3 id="SVG_事件">SVG 事件</h3> + +<p>{{Event("SVGAbort")}}<br> + {{Event("SVGError")}}<br> + {{Event("SVGLoad")}}<br> + {{Event("SVGResize")}}<br> + {{Event("SVGScroll")}}<br> + {{Event("SVGUnload")}}<br> + {{Event("SVGZoom")}}</p> + +<h3 id="数据库事件">数据库事件</h3> + +<p><code><a href="/zh-CN/docs/Web/Reference/Events/abort_indexedDB">abort</a></code><br> + <code><a href="/zh-CN/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code><br> + <code><a href="/zh-CN/docs/Web/Reference/Events/complete_indexedDB">complete</a></code><br> + {{Event("error")}}<br> + <code><a href="/zh-CN/docs/Web/Reference/Events/success_indexedDB">success</a></code><br> + <code><a href="/zh-CN/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code><br> + <code><a href="/zh-CN/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></p> + +<h3 id="脚本事件">脚本事件</h3> + +<p>{{Event("afterscriptexecute")}}<br> + {{Event("beforescriptexecute")}}</p> + +<h3 id="菜单事件">菜单事件</h3> + +<p>{{Event("DOMMenuItemActive")}}<br> + {{Event("DOMMenuItemInactive")}}</p> + +<h3 id="窗口事件">窗口事件</h3> + +<p><code><a href="/zh-CN/docs/Mozilla/Tech/XUL/Events/close_event">close</a></code></p> + +<h3 id="弹出事件">弹出事件</h3> + +<p>{{Event("popuphidden")}}<br> + {{Event("popuphiding")}}<br> + {{Event("popupshowing")}}<br> + {{Event("popupshown")}}</p> + +<h3 id="Tab_事件">Tab 事件</h3> + +<p>{{Event("visibilitychange")}}</p> + +<ul> +</ul> + +<h3 id="电池事件">电池事件</h3> + +<p>{{Event("chargingchange")}}<br> + {{Event("chargingtimechange")}}<br> + {{Event("dischargingtimechange")}}<br> + {{Event("levelchange")}}</p> + +<h3 id="呼叫事件">呼叫事件</h3> + +<p>{{Event("alerting")}}<br> + {{Event("busy")}}<br> + {{Event("callschanged")}}<br> + {{Event("cfstatechange")}}<br> + {{Event("connected")}}<br> + {{Event("connecting")}}<br> + {{Event("dialing")}}<br> + {{Event("disconnected")}}<br> + {{Event("disconnecting")}}<br> + {{Event("error_(Telephony)","error")}}<br> + {{Event("held")}}, {{Event("holding")}}<br> + {{Event("incoming")}}<br> + {{Event("resuming")}}<br> + {{Event("statechange")}}<br> + {{Event("voicechange")}}</p> + +<h3 id="传感器事件">传感器事件</h3> + +<p>{{Event("compassneedscalibration")}}<br> + {{Event("devicemotion")}}<br> + {{Event("deviceorientation")}}<br> + {{Event("orientationchange")}}</p> + +<h3 id="智能卡事件">智能卡事件</h3> + +<p>{{Event("icccardlockerror")}}<br> + {{Event("iccinfochange")}}<br> + {{Event("smartcard-insert")}}<br> + {{Event("smartcard-remove")}}<br> + {{Event("stkcommand")}}<br> + {{Event("stksessionend")}}<br> + {{Event("cardstatechange")}}</p> + +<h3 id="短信和USSD事件">短信和USSD事件</h3> + +<p>{{Event("delivered")}}<br> + {{Event("received")}}<br> + {{Event("sent")}}<br> + {{Event("ussdreceived")}}</p> + +<h3 id="帧事件">帧事件</h3> + +<p>{{Event("mozbrowserclose")}}<br> + {{Event("mozbrowsercontextmenu")}}<br> + {{Event("mozbrowsererror")}}<br> + {{Event("mozbrowsericonchange")}}<br> + {{Event("mozbrowserlocationchange")}}<br> + {{Event("mozbrowserloadend")}}<br> + {{Event("mozbrowserloadstart")}}<br> + {{Event("mozbrowseropenwindow")}}<br> + {{Event("mozbrowsersecuritychange")}}<br> + {{Event("mozbrowsershowmodalprompt")}}<br> + {{Event("mozbrowsertitlechange")}}</p> + +<h3 id="DOM变异事件">DOM变异事件</h3> + +<p><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttrModified</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code><br> + {{Event("DOMContentLoaded")}}<br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMElementNameChanged</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeInserted</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeRemoved</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code><br> + <code><a href="/zh-CN/docs/DOM/Mutation_events">DOMSubtreeModified</a></code></p> + +<h3 id="触摸事件">触摸事件</h3> + +<p>{{Event("touchcancel")}}<br> + {{Event("touchend")}}<br> + {{Event("touchmove")}}<br> + {{Event("touchstart")}}</p> + +<h3 id="指针事件">指针事件</h3> + +<p>{{Event("pointerover")}}<br> + {{Event("pointerenter")}}<br> + {{Event("pointerdown")}}<br> + {{Event("pointermove")}}<br> + {{Event("pointerup")}}<br> + {{Event("pointercancel")}}<br> + {{Event("pointerout")}}<br> + {{Event("pointerleave")}}<br> + {{Event("gotpointercapture")}}<br> + {{Event("lostpointercapture")}}</p> + +<h2 id="标准事件">标准事件</h2> + +<p>这些事件在官方Web规范中定义，并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象（由此您可以查到每个事件提供的数据），定义这个事件的标准或标准链接会一起列出。</p> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">事件名称</th> + <th scope="col">事件类型</th> + <th scope="col">规范</th> + <th scope="col">触发时机...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("abort")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort" style="white-space: nowrap;">DOM L3</a></td> + <td>资源载入已被中止</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/abort_(ProgressEvent)">abort</a></code></td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a>and<a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-abort">XMLHttpRequest</a></td> + <td>Progress被终止(不是error造成的)</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/abort_indexedDB">abort</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>事务已被中止</td> + </tr> + <tr> + <td>{{Event("afterprint")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>相关文档已开始打印或打印预览已被关闭</td> + </tr> + <tr> + <td>{{Event("animationcancel")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td>A <a href="/zh-CN/docs/CSS/CSS_animations">CSS animation</a> has aborted.</td> + </tr> + <tr> + <td>{{Event("animationend")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td>完成一个<a href="/zh-CN/docs/CSS/CSS_animations">CSS 动画</a></td> + </tr> + <tr> + <td>{{Event("animationiteration")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td>重复播放一个<a href="/zh-CN/docs/CSS/CSS_animations">CSS 动画</a></td> + </tr> + <tr> + <td>{{Event("animationstart")}}</td> + <td>{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-animations/#animation-events" style="white-space: nowrap;">CSS Animations</a></td> + <td>一个 <a href="/zh-CN/docs/CSS/CSS_animations">CSS 动画</a>已开始</td> + </tr> + <tr> + <td>{{Event("appinstalled")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="/zh-CN/docs/Web/Manifest" style="white-space: nowrap;">Web App Manifest</a></td> + <td>A web application is successfully installed as a <a href="/en-US/Apps/Progressive">progressive web app</a>.</td> + </tr> + <tr> + <td>{{Event("audioprocess")}}</td> + <td>{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}</td> + <td>{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}</td> + <td>一个{{DOMxRef("ScriptProcessorNode")}} 的输入缓冲区可处理</td> + </tr> + <tr> + <td>{{Event("audioend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>用户代理捕捉到用以语音识别的音频</td> + </tr> + <tr> + <td>{{Event("audiostart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>用户代理开始捕捉用以语音识别的音频</td> + </tr> + <tr> + <td>{{Event("beforeprint")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/webappapis.html#printing">HTML5</a></td> + <td>相关文档将要开始打印或准备打印预览</td> + </tr> + <tr> + <td>{{Event("beforeunload")}}</td> + <td>{{DOMxRef("BeforeUnloadEvent")}}</td> + <td><a href="http://www.w3.org/TR/html5/browsers.html#unloading-documents">HTML5</a></td> + <td>即将卸载 window，document 及其资源</td> + </tr> + <tr> + <td>{{Event("beginEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/zh-CN/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element begins.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/blocked_indexedDB">blocked</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An open connection to a database is blocking a <code>versionchange</code> transaction on the same database.</td> + </tr> + <tr> + <td>{{Event("blur")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur" style="white-space: nowrap;">DOM L3</a></td> + <td>An element has lost focus (does not bubble).</td> + </tr> + <tr> + <td>{{Event("boundary")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a word or sentence boundary</td> + </tr> + <tr> + <td>{{Event("canplay")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay" style="white-space: nowrap;">HTML5 media</a></td> + <td>The user agent can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{Event("canplaythrough")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough" style="white-space: nowrap;">HTML5 media</a></td> + <td>The user agent can play the media up to its end without having to stop for further buffering of content.</td> + </tr> + <tr> + <td>{{Event("change")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#event-input-change">HTML5</a></td> + <td>The <code>change</code> event is fired for {{HTMLElement("input")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}} elements when a change to the element's value is committed by the user.</td> + </tr> + <tr> + <td>{{Event("chargingchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td> + <td>The battery begins or stops charging.</td> + </tr> + <tr> + <td>{{Event("chargingtimechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html" style="white-space: nowrap;">Battery status</a></td> + <td>The <code>chargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("click")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device button has been pressed and released on an element.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/close_websocket">close</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/complete_indexedDB">complete</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#transaction">IndexedDB</a></td> + <td>A transaction successfully completed.</td> + </tr> + <tr> + <td>{{Event("complete")}}</td> + <td>{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}</td> + <td>{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}</td> + <td>The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.</td> + </tr> + <tr> + <td>{{Event("compositionend")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionend" style="white-space: nowrap;">DOM L3</a></td> + <td>The composition of a passage of text has been completed or canceled.</td> + </tr> + <tr> + <td>{{Event("compositionstart")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionstart" style="white-space: nowrap;">DOM L3</a></td> + <td>The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).</td> + </tr> + <tr> + <td>{{Event("compositionupdate")}}</td> + <td>{{DOMxRef("CompositionEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-compositionupdate" style="white-space: nowrap;">DOM L3</a></td> + <td>A character is added to a passage of text being composed.</td> + </tr> + <tr> + <td>{{Event("contextmenu")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="https://html.spec.whatwg.org/multipage/forms.html#context-menus">HTML5</a></td> + <td>The right button of the mouse is clicked (before the context menu is displayed).</td> + </tr> + <tr> + <td>{{Event("copy")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#copy-event">Clipboard</a></td> + <td>The text selection has been added to the clipboard.</td> + </tr> + <tr> + <td>{{Event("cut")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></td> + <td>The text selection has been removed from the document and added to the clipboard.</td> + </tr> + <tr> + <td>{{Event("dblclick")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device button is clicked twice on an element.</td> + </tr> + <tr> + <td>{{Event("devicechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName("Media Capture")}}</td> + <td>A media device such as a camera, microphone, or speaker is connected or removed from the system.</td> + </tr> + <tr> + <td>{{Event("devicemotion")}}</td> + <td>{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}</td> + <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from a motion sensor.</td> + </tr> + <tr> + <td>{{Event("deviceorientation")}}</td> + <td>{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}</td> + <td><a class="external" href="http://dev.w3.org/geo/api/spec-source-orientation.html" lang="en" title="The 'Device Orientation Events' specification">Device Orientation Events</a></td> + <td>Fresh data is available from an orientation sensor.</td> + </tr> + <tr> + <td>{{Event("dischargingtimechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>dischargingTime</code> attribute has been updated.</td> + </tr> + <tr> + <td><code>DOMActivate</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate" style="white-space: nowrap;">DOM L3</a></td> + <td>A button, link or state changing element is activated (use {{Event("click")}} instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttributeNameChanged</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationNameEvent")}}</td> + <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMAttributeNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td> + <td>The name of an attribute changed (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMAttrModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified" style="white-space: nowrap;">DOM L3</a></td> + <td>The value of an attribute has been modified (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMCharacterDataModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified" style="white-space: nowrap;">DOM L3</a></td> + <td>A text or another <a href="/zh-CN/docs/DOM/CharacterData">CharacterData</a> has changed (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{Event("DOMContentLoaded")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> + <td>The document has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMElementNameChanged</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationNameEvent")}}</td> + <td><a href="http://www.w3.org/TR/2011/WD-DOM-Level-3-Events-20110531/#event-type-DOMElementNameChanged" style="white-space: nowrap;">DOM L3</a> Removed</td> + <td>The name of an element changed (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code>DOMFocusIn</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn" style="white-space: nowrap;">DOM L3</a></td> + <td>An element has received focus (use {{Event("focus")}} or {{Event("focusin")}} instead).</td> + </tr> + <tr> + <td><code>DOMFocusOut</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut" style="white-space: nowrap;">DOM L3</a></td> + <td>An element has lost focus (use {{Event("blur")}} or {{Event("focusout")}} instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeInserted</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted" style="white-space: nowrap;">DOM L3</a></td> + <td>A node has been added as a child of another node (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeInsertedIntoDocument</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument" style="white-space: nowrap;">DOM L3</a></td> + <td>A node has been inserted into the document (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeRemoved</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved" style="white-space: nowrap;">DOM L3</a></td> + <td>A node has been removed from its parent node (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMNodeRemovedFromDocument</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument" style="white-space: nowrap;">DOM L3</a></td> + <td>A node has been removed from the document (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/DOM/Mutation_events">DOMSubtreeModified</a></code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("MutationEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified" style="white-space: nowrap;">DOM L3</a></td> + <td>A change happened in the document (use <a href="/zh-CN/docs/DOM/MutationObserver">mutation observers</a> instead).</td> + </tr> + <tr> + <td>{{Event("drag")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drag">HTML5</a></td> + <td>An element or text selection is being dragged (every 350ms).</td> + </tr> + <tr> + <td>{{Event("dragend")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragend">HTML5</a></td> + <td>A drag operation is being ended (by releasing a mouse button or hitting the escape key).</td> + </tr> + <tr> + <td>{{Event("dragenter")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragenter">HTML5</a></td> + <td>A dragged element or text selection enters a valid drop target.</td> + </tr> + <tr> + <td>{{Event("dragleave")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragleave">HTML5</a></td> + <td>A dragged element or text selection leaves a valid drop target.</td> + </tr> + <tr> + <td>{{Event("dragover")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragover">HTML5</a></td> + <td>An element or text selection is being dragged over a valid drop target (every 350ms).</td> + </tr> + <tr> + <td>{{Event("dragstart")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-dragstart">HTML5</a></td> + <td>The user starts dragging an element or text selection.</td> + </tr> + <tr> + <td>{{Event("drop")}}</td> + <td>{{DOMxRef("DragEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#event-drop">HTML5</a></td> + <td>An element is dropped on a valid drop target.</td> + </tr> + <tr> + <td>{{Event("durationchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-durationchange">HTML5 media</a></td> + <td>The <code>duration</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("emptied")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-emptied">HTML5 media</a></td> + <td>The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the <a href="/zh-CN/docs/XPCOM_Interface_Reference/NsIDOMHTMLMediaElement" rel="internal"><code>load()</code></a> method is called to reload it.</td> + </tr> + <tr> + <td>{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has disconnected.</td> + </tr> + <tr> + <td>{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName("Web Speech API")}}</td> + <td>The utterance has finished being spoken.</td> + </tr> + <tr> + <td>{{Event("ended")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ended">HTML5 media</a></td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{Event("ended_(Web_Audio)", "ended")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName("Web Audio API")}}</td> + <td>Playback has stopped because the end of the media was reached.</td> + </tr> + <tr> + <td>{{Event("endEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/zh-CN/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element ends.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error" style="white-space: nowrap;">DOM L3</a></td> + <td>A resource failed to load.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-error">XMLHttpRequest</a></td> + <td>Progression has failed.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been closed with prejudice (some data couldn't be sent for example).</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been failed.</td> + </tr> + <tr> + <td>{{Event("error")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request caused an error and failed.</td> + </tr> + <tr> + <td>{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>A speech recognition error occurs.</td> + </tr> + <tr> + <td>{{Event("error_(SpeechSynthesisError)","error")}}</td> + <td>{{DOMxRef("SpeechSynthesisErrorEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>An error occurs that prevents the utterance from being successfully spoken.</td> + </tr> + <tr> + <td>{{Event("focus")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus" style="white-space: nowrap;">DOM L3</a></td> + <td>An element has received focus (does not bubble).</td> + </tr> + <tr> + <td>{{Event("focusin")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusIn" style="white-space: nowrap;">DOM L3</a></td> + <td>An element is about to receive focus (bubbles).</td> + </tr> + <tr> + <td>{{Event("focusout")}}</td> + <td>{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout" style="white-space: nowrap;">DOM L3</a></td> + <td>An element is about to lose focus (bubbles).</td> + </tr> + <tr> + <td>{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>An element was turned to fullscreen mode or back to normal mode.</td> + </tr> + <tr> + <td>{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html#api">Full Screen</a></td> + <td>It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{Event("gamepadconnected")}}</td> + <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/gamepad/#the-gamepadconnected-event">Gamepad</a></td> + <td>A gamepad has been connected.</td> + </tr> + <tr> + <td>{{Event("gamepaddisconnected")}}</td> + <td>{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/gamepad/#the-gamepaddisconnected-event">Gamepad</a></td> + <td>A gamepad has been disconnected.</td> + </tr> + <tr> + <td>{{Event("gotpointercapture")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-gotpointercapture-event">Pointer Events</a></td> + <td>Element receives pointer capture.</td> + </tr> + <tr> + <td>{{Event("hashchange")}}</td> + <td>{{DOMxRef("HashChangeEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-hashchange">HTML5</a></td> + <td>The fragment identifier of the URL has changed (the part of the URL after the #).</td> + </tr> + <tr> + <td>{{Event("lostpointercapture")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-lostpointercapture-event">Pointer Events</a></td> + <td>Element lost pointer capture.</td> + </tr> + <tr> + <td>{{Event("input")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/html5/forms.html#common-event-behaviors">HTML5</a></td> + <td>The value of an element changes or the content of an element with the attribute <a href="/zh-CN/docs/DOM/Element.contentEditable">contenteditable</a> is modified.</td> + </tr> + <tr> + <td>{{Event("invalid")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#constraint-validation">HTML5</a></td> + <td>A submittable element has been checked and doesn't satisfy its constraints.</td> + </tr> + <tr> + <td>{{Event("keydown")}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown" style="white-space: nowrap;">DOM L3</a></td> + <td>A key is pressed down.</td> + </tr> + <tr> + <td>{{Event("keypress")}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress" style="white-space: nowrap;">DOM L3</a></td> + <td>A key is pressed down and that key normally produces a character value (use input instead).</td> + </tr> + <tr> + <td>{{Event("keyup")}}</td> + <td>{{DOMxRef("KeyboardEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup" style="white-space: nowrap;">DOM L3</a></td> + <td>A key is released.</td> + </tr> + <tr> + <td>{{Event("languagechange")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}</td> + <td>The user's preferred languages have changed.</td> + </tr> + <tr> + <td>{{Event("levelchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html">Battery status</a></td> + <td>The <code>level</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("load")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load" style="white-space: nowrap;">DOM L3</a></td> + <td>A resource and its dependent resources have finished loading.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/load_(ProgressEvent)">load</a></code></td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-load">XMLHttpRequest</a></td> + <td>Progression has been successful.</td> + </tr> + <tr> + <td>{{Event("loadeddata")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5 media</a></td> + <td>The first frame of the media has finished loading.</td> + </tr> + <tr> + <td>{{Event("loadedmetadata")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5 media</a></td> + <td>The metadata has been loaded.</td> + </tr> + <tr> + <td>{{Event("loadend")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadend">XMLHttpRequest</a></td> + <td>Progress has stopped (after "error", "abort" or "load" have been dispatched).</td> + </tr> + <tr> + <td>{{Event("loadstart")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress </a><span>and </span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-loadstart">XMLHttpRequest</a></td> + <td>Progress has begun.</td> + </tr> + <tr> + <td>{{Event("mark")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The spoken utterance reaches a named SSML "mark" tag.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/message_websocket">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A message is received through a WebSocket.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/message_webworker">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/workers/#communicating-with-a-dedicated-worker">Web Workers</a></td> + <td>A message is received from a Web Worker.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/message_webmessaging">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://www.w3.org/TR/webmessaging/">Web Messaging</a></td> + <td>A message is received from a child (i)frame or a parent window.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/message_serversentevents">message</a></code></td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>A message is received through an event source.</td> + </tr> + <tr> + <td>{{Event("messageerror")}}</td> + <td>{{DOMxRef("MessageEvent")}}</td> + <td>{{DOMxRef("MessagePort")}}, <a href="/zh-CN/docs/Web/API/Web_Workers_API">Web Workers</a>, <a href="/zh-CN/docs/Web/API/Broadcast_Channel_API">Broadcast Channel</a>, {{DOMxRef("Window")}}</td> + <td>A message error is raised when a message is received by an object.</td> + </tr> + <tr> + <td>{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.</td> + <td><a href="/zh-CN/docs/Web/API/Service_Worker_API">Service Workers</a></td> + <td>A message is received from a service worker, or a message is received in a service worker from another context.</td> + </tr> + <tr> + <td>{{Event("mousedown")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device button (usually a mouse) is pressed on an element.</td> + </tr> + <tr> + <td>{{Event("mouseenter")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached.</td> + </tr> + <tr> + <td>{{Event("mouseleave")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached.</td> + </tr> + <tr> + <td>{{Event("mousemove")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device is moved over an element.</td> + </tr> + <tr> + <td>{{Event("mouseout")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device is moved off the element that has the listener attached or off one of its children.</td> + </tr> + <tr> + <td>{{Event("mouseover")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device is moved onto the element that has the listener attached or onto one of its children.</td> + </tr> + <tr> + <td>{{Event("mouseup")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup" style="white-space: nowrap;">DOM L3</a></td> + <td>A pointing device button is released over an element.</td> + </tr> + <tr> + <td>{{Event("nomatch")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechRecognitionEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a final result with no significant recognition.</td> + </tr> + <tr> + <td>{{Event("notificationclick")}}</td> + <td>{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}</td> + <td>A system notification<span style="line-height: 19.0909080505371px;"> spawned by {{DOMxRef("ServiceWorkerRegistration.showNotification()")}} has been clicked.</span></td> + </tr> + <tr> + <td>{{Event("offline")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5 offline</a></td> + <td>The browser has lost access to the network.</td> + </tr> + <tr> + <td>{{Event("online")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5 offline</a></td> + <td>The browser has gained access to the network (but particular websites might be unreachable).</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/open_websocket">open</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/websockets/">WebSocket</a></td> + <td>A WebSocket connection has been established.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/open_serversentevents">open</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://dev.w3.org/html5/eventsource/">Server Sent Events</a></td> + <td>An event source connection has been established.</td> + </tr> + <tr> + <td>{{Event("orientationchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/screen-orientation/">Screen Orientation</a></td> + <td>The orientation of the device (portrait/landscape) has changed</td> + </tr> + <tr> + <td>{{Event("pagehide")}}</td> + <td>{{DOMxRef("PageTransitionEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pagehide">HTML5</a></td> + <td>A session history entry is being traversed from.</td> + </tr> + <tr> + <td>{{Event("pageshow")}}</td> + <td>{{DOMxRef("PageTransitionEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-pageshow">HTML5</a></td> + <td>A session history entry is being traversed to.</td> + </tr> + <tr> + <td>{{Event("paste")}}</td> + <td>{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/clipboard-apis/#paste-event">Clipboard</a></td> + <td>Data has been transferred from the system clipboard to the document.</td> + </tr> + <tr> + <td>{{Event("pause")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5 media</a></td> + <td>Playback has been paused.</td> + </tr> + <tr> + <td>{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The utterance is paused part way through.</td> + </tr> + <tr> + <td>{{Event("pointercancel")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointercancel-event">Pointer Events</a></td> + <td>The pointer is unlikely to produce any more events.</td> + </tr> + <tr> + <td>{{Event("pointerdown")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerdown-event">Pointer Events</a></td> + <td>The pointer enters the active buttons state.</td> + </tr> + <tr> + <td>{{Event("pointerenter")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerenter-event">Pointer Events</a></td> + <td>Pointing device is moved inside the hit-testing boundary.</td> + </tr> + <tr> + <td>{{Event("pointerleave")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerleave-event">Pointer Events</a></td> + <td>Pointing device is moved out of the hit-testing boundary.</td> + </tr> + <tr> + <td>{{Event("pointerlockchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>The pointer was locked or released.</td> + </tr> + <tr> + <td>{{Event("pointerlockerror")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/pointerlock/#pointerlockchange-and-pointerlockerror-events">Pointer Lock</a></td> + <td>It was impossible to lock the pointer for technical reasons or because the permission was denied.</td> + </tr> + <tr> + <td>{{Event("pointermove")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointermove-event">Pointer Events</a></td> + <td>The pointer changed coordinates.</td> + </tr> + <tr> + <td>{{Event("pointerout")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerout-event">Pointer Events</a></td> + <td>The pointing device moved out of hit-testing boundary or leaves detectable hover range.</td> + </tr> + <tr> + <td>{{Event("pointerover")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerover-event">Pointer Events</a></td> + <td>The pointing device is moved into the hit-testing boundary.</td> + </tr> + <tr> + <td>{{Event("pointerup")}}</td> + <td>{{DOMxRef("PointerEvent")}}</td> + <td><a href="http://www.w3.org/TR/pointerevents/#the-pointerup-event">Pointer Events</a></td> + <td>The pointer leaves the active buttons state.</td> + </tr> + <tr> + <td>{{Event("play")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5 media</a></td> + <td>Playback has begun.</td> + </tr> + <tr> + <td>{{Event("playing")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5 media</a></td> + <td>Playback is ready to start after having been paused or delayed due to lack of data.</td> + </tr> + <tr> + <td>{{Event("popstate")}}</td> + <td>{{DOMxRef("PopStateEvent")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#event-popstate">HTML5</a></td> + <td>A session history entry is being navigated to (in certain cases).</td> + </tr> + <tr> + <td>{{Event("progress")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/progress-events/">Progress</a><span> <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-progress">XMLHttpRequest</a></td> + <td>In progress.</td> + </tr> + <tr> + <td>{{Event("push")}}</td> + <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Push API")}}</td> + <td>A <a href="/zh-CN/docs/Web/API/Service_Worker_API">Service Worker</a> has received a push message.</td> + </tr> + <tr> + <td>{{Event("pushsubscriptionchange")}}</td> + <td>{{DOMxRef("PushEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Push API")}}</td> + <td>A <a href="/zh-CN/docs/Web/API/PushSubscription">PushSubscription</a> has expired.</td> + </tr> + <tr> + <td>{{Event("ratechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5 media</a></td> + <td>The playback rate has changed.</td> + </tr> + <tr> + <td>{{Event("readystatechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><span>HTML5 <span>and </span></span><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-readystatechange">XMLHttpRequest</a></td> + <td>The readyState attribute of a document has changed.</td> + </tr> + <tr> + <td>{{Event("repeatEvent")}}</td> + <td>{{DOMxRef("TimeEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>A <a href="/zh-CN/docs/SVG/SVG_animation_with_SMIL">SMIL</a> animation element is repeated.</td> + </tr> + <tr> + <td>{{Event("reset")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-0#resetting-a-form">HTML5</a></td> + <td>A form is reset.</td> + </tr> + <tr> + <td>{{Event("resize")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize" style="white-space: nowrap;">DOM L3</a></td> + <td>The document view has been resized.</td> + </tr> + <tr> + <td>{{Event("resourcetimingbufferfull")}}</td> + <td>{{DOMxRef("Performance")}}</td> + <td><a href="https://w3c.github.io/resource-timing/#dom-performance-onresourcetimingbufferfull">Resource Timing</a></td> + <td>The browser's resource timing buffer is full.</td> + </tr> + <tr> + <td>{{Event("result")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.</td> + </tr> + <tr> + <td>{{Event("resume")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>A paused utterance is resumed.</td> + </tr> + <tr> + <td>{{Event("scroll")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll" style="white-space: nowrap;">DOM L3</a></td> + <td>The document view or an element has been scrolled.</td> + </tr> + <tr> + <td>{{Event("seeked")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5 media</a></td> + <td>A <em>seek</em> operation completed.</td> + </tr> + <tr> + <td>{{Event("seeking")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5 media</a></td> + <td>A <em>seek</em> operation began.</td> + </tr> + <tr> + <td>{{Event("select")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select" style="white-space: nowrap;">DOM L3</a></td> + <td>Some text is being selected.</td> + </tr> + <tr> + <td>{{Event("selectstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('Selection API')}}</td> + <td>A selection just started.</td> + </tr> + <tr> + <td>{{Event("selectionchange")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('Selection API')}}</td> + <td>The selection in the document has been changed.</td> + </tr> + <tr> + <td>{{Event("show")}}</td> + <td>{{DOMxRef("MouseEvent")}}</td> + <td><a href="http://www.w3.org/TR/html5/interactive-elements.html#context-menus">HTML5</a></td> + <td>A contextmenu event was fired on/bubbled to an element that has a <a href="/zh-CN/docs/DOM/element.contextmenu">contextmenu</a> attribute</td> + </tr> + <tr> + <td>{{Event("slotchange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{ SpecName('DOM WHATWG')}}</td> + <td>The node contents of a {{DOMxRef("HTMLSlotElement")}} ({{htmlelement("slot")}}) have changed.</td> + </tr> + <tr> + <td>{{Event("soundend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has stopped being detected.</td> + </tr> + <tr> + <td>{{Event("soundstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>Any sound — recognisable speech or not — has been detected.</td> + </tr> + <tr> + <td>{{Event("speechend")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>Speech recognised by the speech recognition service has stopped being detected.</td> + </tr> + <tr> + <td>{{Event("speechstart")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>Sound that is recognised by the speech recognition service as speech has been detected.</td> + </tr> + <tr> + <td>{{Event("stalled")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-stalled">HTML5 media</a></td> + <td>The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.</td> + </tr> + <tr> + <td>{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current <code>SpeechRecognition</code>.</td> + </tr> + <tr> + <td>{{Event("start_(SpeechSynthesis)","start")}}</td> + <td>{{DOMxRef("SpeechSynthesisEvent")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The utterance has begun to be spoken.</td> + </tr> + <tr> + <td>{{Event("storage")}}</td> + <td>{{DOMxRef("StorageEvent")}}</td> + <td><a href="http://www.w3.org/TR/webstorage/#the-storage-event">Web Storage</a></td> + <td>A storage area (<a href="/zh-CN/docs/DOM/Storage#localStorage">localStorage</a> or <a href="/zh-CN/docs/DOM/Storage#sessionStorage">sessionStorage</a>) has changed.</td> + </tr> + <tr> + <td>{{Event("submit")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">DOM L2</a>, <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#form-submission-algorithm">HTML5</a></td> + <td>A form is submitted.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/success_indexedDB">success</a></code></td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>A request successfully completed.</td> + </tr> + <tr> + <td>{{Event("suspend")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5 media</a></td> + <td>Media data loading has been suspended.</td> + </tr> + <tr> + <td>{{Event("SVGAbort")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>Page loading has been stopped before the <a href="/zh-CN/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{Event("SVGError")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An error has occurred before the <a href="/zh-CN/docs/SVG">SVG</a> was loaded.</td> + </tr> + <tr> + <td>{{Event("SVGLoad")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/zh-CN/docs/SVG">SVG</a> document has been loaded and parsed.</td> + </tr> + <tr> + <td>{{Event("SVGResize")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/zh-CN/docs/SVG">SVG</a> document is being resized.</td> + </tr> + <tr> + <td>{{Event("SVGScroll")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/zh-CN/docs/SVG">SVG</a> document is being scrolled.</td> + </tr> + <tr> + <td>{{Event("SVGUnload")}}</td> + <td>{{DOMxRef("SVGEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/zh-CN/docs/SVG">SVG</a> document has been removed from a window or frame.</td> + </tr> + <tr> + <td>{{Event("SVGZoom")}}</td> + <td>{{DOMxRef("SVGZoomEvent")}}</td> + <td><a href="http://www.w3.org/TR/SVG/interact.html#SVGEvents">SVG</a></td> + <td>An <a href="/zh-CN/docs/SVG">SVG</a> document is being zoomed.</td> + </tr> + <tr> + <td>{{Event("timeout")}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><a href="http://www.w3.org/TR/XMLHttpRequest/#event-xhr-timeout">XMLHttpRequest</a></td> + <td></td> + </tr> + <tr> + <td>{{Event("timeupdate")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-timeupdate">HTML5 media</a></td> + <td>The time indicated by the <code>currentTime</code> attribute has been updated.</td> + </tr> + <tr> + <td>{{Event("touchcancel")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/">Touch Events</a></td> + <td>A touch point has been disrupted in an implementation-specific manners (too many touch points for example).</td> + </tr> + <tr> + <td>{{Event("touchend")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchend-event">Touch Events</a></td> + <td>A touch point is removed from the touch surface.</td> + </tr> + <tr> + <td>{{Event("touchmove")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchmove-event">Touch Events</a></td> + <td>A touch point is moved along the touch surface.</td> + </tr> + <tr> + <td>{{Event("touchstart")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a></td> + <td>A touch point is placed on the touch surface.</td> + </tr> + <tr> + <td>{{Event("transitionend")}}</td> + <td>{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}</td> + <td><a href="http://www.w3.org/TR/css3-transitions/#transition-events">CSS Transitions</a></td> + <td>A <a href="/zh-CN/docs/CSS/CSS_transitions">CSS transition</a> has completed.</td> + </tr> + <tr> + <td>{{Event("unload")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload" style="white-space: nowrap;">DOM L3</a></td> + <td>The document or a dependent resource is being unloaded.</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/upgradeneeded_indexedDB">upgradeneeded</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#request-api">IndexedDB</a></td> + <td>An attempt was made to open a database with a version number higher than its current version. A <code>versionchange</code> transaction has been created.</td> + </tr> + <tr> + <td>{{Event("userproximity")}}</td> + <td>{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}</td> + <td>{{SpecName("Proximity Events")}}</td> + <td>Fresh data is available from a proximity sensor (indicates whether the nearby object is <code>near</code> the device or not).</td> + </tr> + <tr> + <td>{{Event("voiceschanged")}} {{Experimental_Inline}}</td> + <td>{{DOMxRef("Event")}}</td> + <td>{{SpecName('Web Speech API')}}</td> + <td>The list of {{DOMxRef("SpeechSynthesisVoice")}} objects that would be returned by the {{DOMxRef("SpeechSynthesis.getVoices()")}} method has changed (when the {{Event("voiceschanged")}} event fires.)</td> + </tr> + <tr> + <td><code><a href="/zh-CN/docs/Web/Reference/Events/versionchange_indexedDB">versionchange</a></code></td> + <td></td> + <td><a href="http://www.w3.org/TR/IndexedDB/#database-interface">IndexedDB</a></td> + <td>A <code>versionchange</code> transaction completed.</td> + </tr> + <tr> + <td>{{Event("visibilitychange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.w3.org/TR/page-visibility/#sec-visibilitychange-event">Page visibility</a></td> + <td>The content of a tab has become visible or has been hidden.</td> + </tr> + <tr> + <td>{{Event("volumechange")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-volumechange">HTML5 media</a></td> + <td>The volume has changed.</td> + </tr> + <tr> + <td>{{Event("waiting")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-waiting">HTML5 media</a></td> + <td>Playback has stopped because of a temporary lack of data.</td> + </tr> + <tr> + <td>{{Event("wheel")}}</td> + <td>{{DOMxRef("WheelEvent")}}</td> + <td><a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-wheel" style="white-space: nowrap;">DOM L3</a></td> + <td>A wheel button of a pointing device is rotated in any direction.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="非标准事件">非标准事件</h2> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Event Type</th> + <th scope="col">Specification</th> + <th scope="col">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("afterscriptexecute")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script has been executed.</td> + </tr> + <tr> + <td>{{Event("beforescriptexecute")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla Specific</em></td> + <td>A script is about to be executed.</td> + </tr> + <tr> + <td>{{Event("beforeinstallprompt")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Chrome specific</em></td> + <td>A user is prompted to save a web site to a home screen on mobile.</td> + </tr> + <tr> + <td>{{Event("cardstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{DOMxRef("MozMobileConnection.cardState")}} property changes value.</td> + </tr> + <tr> + <td>{{Event("change")}}</td> + <td>{{DOMxRef("DeviceStorageChangeEvent")}}</td> + <td><em>Firefox OS specific</em></td> + <td>This event is triggered each time a file is created, modified or deleted on a given storage area.</td> + </tr> + <tr> + <td>{{Event("connectionInfoUpdate")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The informations about the signal strength and the link speed have been updated.</td> + </tr> + <tr> + <td>{{Event("cfstatechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The call forwarding state changes.</td> + </tr> + <tr> + <td>{{Event("datachange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{DOMxRef("MozMobileConnection.data")}} object changes values.</td> + </tr> + <tr> + <td>{{Event("dataerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{DOMxRef("MozMobileConnection.data")}} object receive an error from the <abbr title="Radio Interface Layer">RIL</abbr>.</td> + </tr> + <tr> + <td>{{Event("DOMMouseScroll")}}{{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{Event("wheel")}} instead)</td> + </tr> + <tr> + <td><code>dragdrop</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>An element is dropped (use {{Event("drop")}} instead).</td> + </tr> + <tr> + <td><code>dragexit</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>A drag operation is being ended(use {{Event("dragend")}} instead).</td> + </tr> + <tr> + <td><code>draggesture</code> {{Deprecated_Inline}}</td> + <td><code>DragEvent</code></td> + <td><em>Mozilla specific</em></td> + <td>The user starts dragging an element or text selection (use {{Event("dragstart")}} instead).</td> + </tr> + <tr> + <td>{{Event("icccardlockerror")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>the {{DOMxRef("MozMobileConnection.unlockCardLock()")}} or {{DOMxRef("MozMobileConnection.setCardLock()")}} methods fails.</td> + </tr> + <tr> + <td>{{Event("iccinfochange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{DOMxRef("MozMobileConnection.iccInfo")}} object changes.</td> + </tr> + <tr> + <td>{{Event("localized")}}</td> + <td></td> + <td><em><a href="https://github.com/fabi1cazenave/webL10n">Mozilla Specific</a></em></td> + <td>The page has been localized using data-l10n-* attributes.</td> + </tr> + <tr> + <td>{{Event("mousewheel")}} {{Deprecated_Inline}}</td> + <td></td> + <td><a href="http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx"><em>IE invented</em></a></td> + <td>The wheel button of a pointing device is rotated.</td> + </tr> + <tr> + <td>{{Event("MozAudioAvailable")}}</td> + <td>{{DOMxRef("Event")}}</td> + <td><em>Mozilla specific</em></td> + <td>The audio buffer is full and the corresponding raw samples are available.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozBeforeResize"><code>MozBeforeResize</code></a> {{Obsolete_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A window is about to be resized.</td> + </tr> + <tr> + <td>{{Event("mozbrowseractivitydone")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when some activity has been completed (complete description TBD.)</td> + </tr> + <tr> + <td>{{Event("mozbrowserasyncscroll")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the scroll position within a browser<code> </code>{{HTMLElement("iframe")}} changes.</td> + </tr> + <tr> + <td>{{Event("mozbrowseraudioplaybackchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.</td> + </tr> + <tr> + <td>{{Event("mozbrowsercaretstatechanged")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.</td> + </tr> + <tr> + <td>{{Event("mozbrowserclose")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when window.close() is called within a browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowsercontextmenu")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a browser {{HTMLElement("iframe")}} try to open a context menu.</td> + </tr> + <tr> + <td>{{Event("mozbrowserdocumentfirstpaint")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.</td> + </tr> + <tr> + <td>{{Event("mozbrowsererror")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an error occured while trying to load a content within a browser iframe</td> + </tr> + <tr> + <td>{{Event("mozbrowserfindchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see <a href="/zh-CN/docs/Web/API/HTMLIFrameElement#Search_methods">HTMLIFrameElement search methods</a>.)</td> + </tr> + <tr> + <td>{{Event("mozbrowserfirstpaint")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from <em>about:blank</em>.)</td> + </tr> + <tr> + <td>{{Event("mozbrowsericonchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the favicon of a browser iframe changes.</td> + </tr> + <tr> + <td>{{Event("mozbrowserlocationchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an browser iframe's location changes.</td> + </tr> + <tr> + <td>{{Event("mozbrowserloadend")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe has finished loading all its assets.</td> + </tr> + <tr> + <td>{{Event("mozbrowserloadstart")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser iframe starts to load a new page.</td> + </tr> + <tr> + <td>{{Event("mozbrowsermanifestchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a the path to the app manifest changes, in the case of a browser {{HTMLElement("iframe")}} with an open web app embedded in it.</td> + </tr> + <tr> + <td>{{Event("mozbrowsermetachange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.</td> + </tr> + <tr> + <td>{{Event("mozbrowseropensearch")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a link to a search engine is found.</td> + </tr> + <tr> + <td>{{Event("mozbrowseropentab")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when a new tab is opened within a browser {{HTMLElement("iframe")}} as a result of the user issuing a command to open a link target in a new tab (for example <kbd>ctrl</kbd>/<kbd>cmd</kbd> + click.)</td> + </tr> + <tr> + <td>{{Event("mozbrowseropenwindow")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{DOMxRef("window.open()")}} is called within a browser iframe.</td> + </tr> + <tr> + <td>{{Event("mozbrowserresize")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}}'s window size has changed.</td> + </tr> + <tr> + <td>{{Event("mozbrowserscroll")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the browser {{HTMLElement("iframe")}} content scrolls.</td> + </tr> + <tr> + <td>{{Event("mozbrowserscrollareachanged")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the available scrolling area in the browser {{HTMLElement("iframe")}} changes. This can occur on resize and when the page size changes (while loading for example.)</td> + </tr> + <tr> + <td>{{Event("mozbrowserscrollviewchange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when asynchronous scrolling (i.e. APCZ) starts or stops.</td> + </tr> + <tr> + <td>{{Event("mozbrowsersecuritychange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the SSL state changes within a browser iframe.</td> + </tr> + <tr> + <td>{{Event("mozbrowserselectionstatechanged")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{Event("mozbrowsercaretstatechanged")}} instead.</td> + </tr> + <tr> + <td>{{Event("mozbrowsershowmodalprompt")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser iframe</td> + </tr> + <tr> + <td>{{Event("mozbrowsertitlechange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the document.title changes within a browser iframe.</td> + </tr> + <tr> + <td>{{Event("mozbrowserusernameandpasswordrequired")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when an HTTP authentification is requested.</td> + </tr> + <tr> + <td>{{Event("mozbrowservisibilitychange")}}</td> + <td></td> + <td><em>Firefox OS <a href="/zh-CN/docs/Web/API/Browser_API">Browser API</a>-specific</em></td> + <td>Sent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.</td> + </tr> + <tr> + <td>{{Event("MozGamepadButtonDown")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td>A gamepad button is pressed down.</td> + </tr> + <tr> + <td>{{Event("MozGamepadButtonUp")}}</td> + <td></td> + <td><em>To be specified</em></td> + <td>A gamepad button is released.</td> + </tr> + <tr> + <td>{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)</td> + </tr> + <tr> + <td>{{Event("MozOrientation")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>Fresh data is available from an orientation sensor (see deviceorientation).</td> + </tr> + <tr> + <td>{{Event("MozScrolledAreaChanged")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>The document view has been scrolled or resized.</td> + </tr> + <tr> + <td>{{Event("moztimechange")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>The time of the device has been changed.</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchDown</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is placed on the touch surface (use touchstart instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchMove</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is moved along the touch surface (use touchmove instead).</td> + </tr> + <tr> + <td><a href="/en-US/DOM/Touch_events_(Mozilla_experimental)">MozTouchUp</a> {{Deprecated_Inline}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A touch point is removed from the touch surface (use touchend instead).</td> + </tr> + <tr> + <td>{{Event("alerting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The correspondent is being alerted (his/her phone is ringing).</td> + </tr> + <tr> + <td>{{Event("busy")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The line of the correspondent is busy.</td> + </tr> + <tr> + <td>{{Event("callschanged")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been added or removed from the list of current calls.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/DOM/onconnected">onconnected</a> {{Event("connected")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been connected.</td> + </tr> + <tr> + <td>{{Event("connecting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to connect.</td> + </tr> + <tr> + <td>{{Event("delivered")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been successfully delivered.</td> + </tr> + <tr> + <td>{{Event("dialing")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The number of a correspondent has been dialed.</td> + </tr> + <tr> + <td>{{Event("disabled")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Wifi has been disabled on the device.</td> + </tr> + <tr> + <td>{{Event("disconnected")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been disconnected.</td> + </tr> + <tr> + <td>{{Event("disconnecting")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to disconnect.</td> + </tr> + <tr> + <td>{{Event("enabled")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>Wifi has been enabled on the device.</td> + </tr> + <tr> + <td>{{Event("error_(Telephony)","error")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>An error occurred.</td> + </tr> + <tr> + <td>{{Event("held")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call has been held.</td> + </tr> + <tr> + <td>{{Event("holding")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to be held.</td> + </tr> + <tr> + <td>{{Event("incoming")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is being received.</td> + </tr> + <tr> + <td>{{Event("received")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been received.</td> + </tr> + <tr> + <td>{{Event("resuming")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>A call is about to resume.</td> + </tr> + <tr> + <td>{{Event("sent")}}</td> + <td>{{DOMxRef("SMSEvent")}}</td> + <td><em>To be specified</em></td> + <td>An SMS has been sent.</td> + </tr> + <tr> + <td>{{Event("statechange")}}</td> + <td>{{DOMxRef("CallEvent")}}</td> + <td><em>To be specified</em></td> + <td>The state of a call has changed.</td> + </tr> + <tr> + <td>{{Event("statuschange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The status of the Wifi connection changed.</td> + </tr> + <tr> + <td>{{Event("overflow")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td>{{Event("smartcard-insert")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/zh-CN/docs/JavaScript_crypto">smartcard</a> has been inserted.</td> + </tr> + <tr> + <td>{{Event("smartcard-remove")}}</td> + <td></td> + <td><em>Mozilla specific</em></td> + <td>A <a href="/zh-CN/docs/JavaScript_crypto">smartcard</a> has been removed.</td> + </tr> + <tr> + <td>{{Event("stkcommand")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Proactive Command is issued from <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{Event("stksessionend")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The <abbr title="SIM Application Toolkit">STK</abbr> Session is terminated by <abbr title="Integrated Circuit Card">ICC</abbr>.</td> + </tr> + <tr> + <td>{{Event("touchenter")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td></td> + </tr> + <tr> + <td>{{Event("touchleave")}}</td> + <td>{{DOMxRef("TouchEvent")}}</td> + <td><a href="http://www.w3.org/TR/touch-events/#the-touchstart---------event">Touch Events</a> Removed</td> + <td></td> + </tr> + <tr> + <td>{{Event("underflow")}}</td> + <td>{{DOMxRef("UIEvent")}}</td> + <td><em>Mozilla specific</em></td> + <td>An element is no longer overflowed by its content (only works for elements styled with <code>overflow</code> != <code>visible</code>).</td> + </tr> + <tr> + <td><code>uploadprogress</code> {{Deprecated_Inline}}</td> + <td>{{DOMxRef("ProgressEvent")}}</td> + <td><em>Mozilla Specific</em></td> + <td>Upload is in progress (see {{Event("progress")}}).</td> + </tr> + <tr> + <td> + <p>{{Event("ussdreceived")}}</p> + </td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>A new <abbr title="Unstructured Supplementary Service Data">USSD</abbr> message is received</td> + </tr> + <tr> + <td>{{Event("voicechange")}}</td> + <td></td> + <td><em>Firefox OS specific</em></td> + <td>The {{DOMxRef("MozMobileConnection.voice")}} object changes values.</td> + </tr> + <tr> + <td>{{Event("msContentZoom")}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + <tr> + <td>{{Event("MSManipulationStateChanged")}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + <tr> + <td>{{Event("MSPointerHover")}} {{Deprecated_Inline}}</td> + <td></td> + <td><em>Microsoft specific</em></td> + <td></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Mozilla_特定事件">Mozilla 特定事件</h2> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>这些事件不会暴露给 Web 内容使用，只能在 chrome 内容的上下文中使用。</p> +</div> + +<h3 id="XUL_事件">XUL 事件</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th>Event Name</th> + <th>Event Type</th> + <th>Specification</th> + <th>Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{Event("broadcast")}}</td> + <td></td> + <td><a href="/zh-CN/docs/XUL/Tutorial/Broadcasters_and_Observers#Broadcast_event">XUL</a></td> + <td>An <code>observer</code> noticed a change to the attributes of a watched broadcaster.</td> + </tr> + <tr> + <td>{{Event("CheckboxStateChange")}}</td> + <td></td> + <td>XUL</td> + <td>The state of a <code>checkbox</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/close_event">close</a></td> + <td></td> + <td>XUL</td> + <td>The close button of the window has been clicked.</td> + </tr> + <tr> + <td>{{Event("command")}}</td> + <td></td> + <td>XUL</td> + <td>An element has been activated.</td> + </tr> + <tr> + <td>{{Event("commandupdate")}}</td> + <td></td> + <td>XUL</td> + <td>A command update occurred on a <code>commandset</code> element.</td> + </tr> + <tr> + <td>{{Event("DOMMenuItemActive")}}</td> + <td></td> + <td>XUL</td> + <td>A menu or menuitem has been hovered or highlighted.</td> + </tr> + <tr> + <td>{{Event("DOMMenuItemInactive")}}</td> + <td></td> + <td><em>XUL</em></td> + <td>A menu or menuitem is no longer hovered or highlighted.</td> + </tr> + <tr> + <td>{{Event("popuphidden")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/zh-CN/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has been hidden.</td> + </tr> + <tr> + <td>{{Event("popuphiding")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/zh-CN/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to be hidden.</td> + </tr> + <tr> + <td>{{Event("popupshowing")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/zh-CN/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip is about to become visible.</td> + </tr> + <tr> + <td>{{Event("popupshown")}}</td> + <td><code>PopupEvent</code></td> + <td><a href="/zh-CN/docs/XUL/PopupGuide/PopupEvents"><em>XUL</em></a></td> + <td>A menupopup, panel or tooltip has become visible.</td> + </tr> + <tr> + <td>{{Event("RadioStateChange")}}</td> + <td></td> + <td>XUL</td> + <td>The state of a <code>radio</code> has been changed either by a user action or by a script (useful for accessibility).</td> + </tr> + <tr> + <td>{{Event("ValueChange")}}</td> + <td></td> + <td>XUL</td> + <td>The value of an element has changed (a progress bar for example, useful for accessibility).</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="附加组件特定事件">附加组件特定事件</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Event Type</th> + <th scope="col">Specification</th> + <th scope="col">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozSwipeGesture">MozSwipeGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozMagnifyGestureStart">MozMagnifyGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points start to move away from each other.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozMagnifyGestureUpdate">MozMagnifyGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points move away from each other (after a MozMagnifyGestureStart).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozMagnifyGesture">MozMagnifyGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozRotateGestureStart">MozRotateGestureStart</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points start to rotate around a point.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozRotateGestureUpdate">MozRotateGestureUpdate</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a MozRotateGestureStart).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozRotateGesture">MozRotateGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points rotate around a point (after a sequence of MozRotateGestureUpdate).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozTapGesture">MozTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Two touch points are tapped on the touch surface.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozPressTapGesture">MozPressTapGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozEdgeUIGesture">MozEdgeUIGesture</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A touch point is swiped across the touch surface to invoke the edge UI (Win8 only).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozAfterPaint">MozAfterPaint</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Content has been repainted.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMPopupBlocked">DOMPopupBlocked</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A popup has been blocked</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMWindowCreated">DOMWindowCreated</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window has been created.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMWindowClose">DOMWindowClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window is about to be closed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMTitleChanged">DOMTitleChanged</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>The title of a window has changed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMLinkAdded">DOMLinkAdded</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>A link has been added a document.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMLinkRemoved">DOMLinkRemoved</a></td> + <td></td> + <td><em>Addons specifc</em></td> + <td>A link has been removed inside from a document.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMMetaAdded">DOMMetaAdded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been added to a document.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMMetaRemoved">DOMMetaRemoved</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code>meta</code> element has been removed from a document.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMWillOpenModalDialog">DOMWillOpenModalDialog</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A modal dialog is about to open.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMModalDialogClosed">DOMModalDialogClosed</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A modal dialog has been closed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMAutoComplete">DOMAutoComplete</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The content of an element has been auto-completed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/DOMFrameContentLoaded">DOMFrameContentLoaded</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The frame has finished loading (but not its dependent resources).</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/AlertActive">AlertActive</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/zh-CN/docs/XUL/notification">notification</a></code> element is shown.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/AlertClose">AlertClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A <code><a href="/zh-CN/docs/XUL/notification">notification</a></code> element is closed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/fullscreen">fullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Browser fullscreen mode has been entered or left.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/sizemodechange">sizemodechange</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>Window has entered/left fullscreen mode, or has been minimized/unminimized.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/MozEnteredDomFullscreen">MozEnteredDomFullscreen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td><a href="/zh-CN/docs/DOM/Using_full-screen_mode">DOM fullscreen</a> mode has been entered.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSWindowClosing">SSWindowClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this window.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSTabClosing">SSTabClosing</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>The session store will stop tracking this tab.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSTabRestoring">SSTabRestoring</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab is about to be restored.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSTabRestored">SSTabRestored</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been restored.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSWindowStateReady">SSWindowStateReady</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "ready".</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/SSWindowStateBusy">SSWindowStateBusy</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A window state has switched to "busy".</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabOpen">TabOpen</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been opened.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabClose">TabClose</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been closed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabSelect">TabSelect</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been selected.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabShow">TabShow</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been shown.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabHide">TabHide</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been hidden.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabPinned">TabPinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been pinned.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/TabUnpinned">TabUnpinned</a></td> + <td></td> + <td><em>Addons specific</em></td> + <td>A tab has been unpinned.</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="开发者工具特定事件">开发者工具特定事件</h3> + +<div style="overflow: auto;"> +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Event Name</th> + <th scope="col">Event Type</th> + <th scope="col">Specification</th> + <th scope="col">Fired when...</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/CssRuleViewRefreshed">CssRuleViewRefreshed</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been updated.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/CssRuleViewChanged">CssRuleViewChanged</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>The "Rules" view of the style inspector has been changed.</td> + </tr> + <tr> + <td><a href="/zh-CN/docs/Web/Reference/Events/CssRuleViewCSSLinkClicked">CssRuleViewCSSLinkClicked</a></td> + <td></td> + <td><em>devtools specific</em></td> + <td>A link to a CSS file has been clicked in the "Rules" view of the style inspector.</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{DOMxRef("Event")}}</li> + <li><a href="/zh-CN/docs/Web/Guide/DOM/Events">事件开发者指南</a></li> +</ul> diff --git a/files/zh-cn/web/events/input/index.html b/files/zh-cn/web/events/input/index.html new file mode 100644 index 0000000000..7ee1b98ad5 --- /dev/null +++ b/files/zh-cn/web/events/input/index.html @@ -0,0 +1,157 @@ +--- +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 new file mode 100644 index 0000000000..5cfb7b075f --- /dev/null +++ b/files/zh-cn/web/events/load/index.html @@ -0,0 +1,161 @@ +--- +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 new file mode 100644 index 0000000000..529a0b1673 --- /dev/null +++ b/files/zh-cn/web/events/loadend/index.html @@ -0,0 +1,89 @@ +--- +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 new file mode 100644 index 0000000000..60362dd94a --- /dev/null +++ b/files/zh-cn/web/events/loadstart/index.html @@ -0,0 +1,91 @@ +--- +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 new file mode 100644 index 0000000000..ccbd2d9859 --- /dev/null +++ b/files/zh-cn/web/events/message/index.html @@ -0,0 +1,167 @@ +--- +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 new file mode 100644 index 0000000000..599f17edbb --- /dev/null +++ b/files/zh-cn/web/events/mousewheel/index.html @@ -0,0 +1,181 @@ +--- +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/mozafterpaint/index.html b/files/zh-cn/web/events/mozafterpaint/index.html new file mode 100644 index 0000000000..fc3b766b45 --- /dev/null +++ b/files/zh-cn/web/events/mozafterpaint/index.html @@ -0,0 +1,179 @@ +--- +title: MozAfterPaint +slug: Web/Events/MozAfterPaint +translation_of: Archive/Add-ons/Events/MozAfterPaint +--- +<p><code>MozAfterPaint事件在页面呈现给用户屏幕时触发，并提供页面重绘的信息，主要应用于页面优化审查。</code></p> + +<p><code>注意</code>MozAfterPaint并非在页面重绘时立即触发，而是在重绘并合成后发生。这意味着有部分内容触发时已经呈现给客户。</p> + +<div class="note"><strong>Note:</strong> + +<ul> + <li>This event is available to add-ons but since Firefox 4 it is <strong>not</strong> available to web pages by default. It can only be made available to web pages by setting the preference <code>dom.send_after_paint_to_content</code> to <code>true</code>. (源于<strong> </strong><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=539356"><strong>Bug 539356</strong></a>, 这个属性设置为<code>true</code>, 所有的<code>MozAfterPaint</code> 时间都被发动到web页面. 更多信息请查看 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=829330"><strong>Bug 829330</strong></a>)</li> + <li>Web pages that want to take an action after a repaint of the page can use <a href="/en-US/docs/Web/API/window/requestAnimationFrame">requestAnimationFrame</a> with a callback that sets a timeout of zero to then call the code that takes the desired post-repaint action.</li> + <li>If the handler for this event does anything that triggers repainting (such as changing the style of an element), an infinite loop will probably be triggered.</li> + <li>Repainting of areas scrolled outside the viewport is reported, but repainting of areas scrolled outside <code>overflow:auto</code> elements and the like is not.</li> + <li>Repainting in windowed plug-ins (which is most plug-ins on Windows and GTK) is not reported.</li> +</ul> +</div> + +<h2 id="General_info">General info</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><em>Add-ons specific</em></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;">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;">window</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="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><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>boundingClientRect</code></td> + <td>clientRect</td> + <td>The equivalent of {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} for the repainted zone. Read only.</td> + </tr> + <tr> + <td><code>clientRects</code></td> + <td>clientRectList</td> + <td>The equivalent of {{domxref("Element.getClientRects", "getClientRects()")}} for the repainted zone. Read only.</td> + </tr> + <tr> + <td><code>transactionId</code></td> + <td><code>uint64_t</code></td> + <td>The transaction id of the composition that just occurred to present something to the user. Read only.</td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<p>This example highlights elements that get repainted while hovering the document with a cursor.</p> + +<pre class="brush: js">(function(){ + var store = []; + + // every repaint will be logged in store + window.addEventListener("MozAfterPaint", log, false); + + if ( document.body ) + bind(); + else + window.addEventListener("load", bind, false); + + function log(e){ + store.push( [(new Date).getTime(), e.clientRects] ); + } + + function bind(){ + // clicking anywhere on the document will prevent other repaint to be logged + // as well as display the visual "repaint heatmap" + document.body.addEventListener("click", function onClick(){ + window.removeEventListener("MozAfterPaint", log, false); + + for ( var pos = 0; pos < store.length; pos++ ) { + var rects = store[pos][1]; + + for ( var i = 0; i < rects.length; i++ ) { + // will simply "draw" semi-transparent red divs where + // repaints where recorded + var rect = rects[i]; + var div = document.createElement("div"); + + with (div.style) { + background = "red"; + opacity = "0.1"; + position = "absolute"; + top = rect.top + "px"; + left = rect.left + "px"; + width = (rect.right - rect.left) + "px"; + height = (rect.bottom - rect.top) + "px"; + } + + document.body.appendChild( div ); + } + } + + document.body.removeEventListener("click", onClick, false); + }, false); + } +})(); +</pre> + +<p>This example is for measuring how long something took to paint to the user.</p> + +<pre class="brush: js">// Suppose we want to measure how long it takes to paint the +// next frame after a click event is fired on element "target". + +let winUtils = window.QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIDOMWindowUtils); + +// The last transaction id is the last id that was sent to the +// compositor before our script started to execute. +let lastTransactionId = winUtils.lastTransactionId; +let start = window.performance.now(); + +// Set up our MozAfterPaint listener, but we only care about +// MozAfterPaint events where the transaction id is GREATER +// than lastTransactionId. This is to account for the possibility +// that a composite is underway at the time this script is running. +addEventListener("MozAfterPaint", function onPaint(event) { + if (event.transactionId > lastTransactionId) { + // Since the transaction id is greater than the last transaction + // id, that means we're safe to assume that whatever effect that + // clicking on the "target" element was supposed to have, if the + // change should have been instantaneous, then it has been presented + // to the user. + let finish = window.performance.now(); + alert(`Time to present: ${finish - start}ms`); + removeEventListener("MozAfterPaint", onPaint); + } +}); + +document.getElementById("target").click(); + +</pre> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMWindowUtils#isMozAfterPaintPendingen-US/docs/Mozilla/Tech/XPCOM/Reference/Interface/nsIDOMWindowUtils#isMozAfterPaintPending">nsIDOMWindowUtils.isMozAfterPaintPending</a></li> +</ul> diff --git a/files/zh-cn/web/events/pageshow/index.html b/files/zh-cn/web/events/pageshow/index.html new file mode 100644 index 0000000000..d0aec41716 --- /dev/null +++ b/files/zh-cn/web/events/pageshow/index.html @@ -0,0 +1,143 @@ +--- +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 new file mode 100644 index 0000000000..1fb088eddf --- /dev/null +++ b/files/zh-cn/web/events/paste/index.html @@ -0,0 +1,103 @@ +--- +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 new file mode 100644 index 0000000000..a4f95498ad --- /dev/null +++ b/files/zh-cn/web/events/readystatechange事件/index.html @@ -0,0 +1,149 @@ +--- +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/tabopen/index.html b/files/zh-cn/web/events/tabopen/index.html new file mode 100644 index 0000000000..7d668792be --- /dev/null +++ b/files/zh-cn/web/events/tabopen/index.html @@ -0,0 +1,57 @@ +--- +title: TabOpen +slug: Web/Events/TabOpen +translation_of: Archive/Add-ons/Events/TabOpen +--- +<p><code>TabOpen</code>事件在一个新的<a href="/en-US/docs/XUL/tab"><code>标签页</code></a>打开时触发.</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0pt 0pt 0pt 120px;"><em>附加组件特有</em></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;"><a href="/en-US/docs/XUL/tab"><code>tab</code></a></dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0pt 0pt 0pt 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> diff --git a/files/zh-cn/web/events/transitionend/index.html b/files/zh-cn/web/events/transitionend/index.html new file mode 100644 index 0000000000..f79db8503a --- /dev/null +++ b/files/zh-cn/web/events/transitionend/index.html @@ -0,0 +1,132 @@ +--- +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 new file mode 100644 index 0000000000..9c3286aa44 --- /dev/null +++ b/files/zh-cn/web/events/unhandledrejection/index.html @@ -0,0 +1,118 @@ +--- +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 new file mode 100644 index 0000000000..2510b1f651 --- /dev/null +++ b/files/zh-cn/web/events/unload/index.html @@ -0,0 +1,125 @@ +--- +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 new file mode 100644 index 0000000000..6a63ab9d5e --- /dev/null +++ b/files/zh-cn/web/events/进度条/index.html @@ -0,0 +1,146 @@ +--- +title: progress event +slug: Web/Events/进度条 +tags: + - API + - Event + - Reference + - Web + - XMLHttpRequest + - progress +translation_of: Web/API/XMLHttpRequest/progress_event +--- +<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> |