From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/events/abort/index.html | 74 --------- files/zh-cn/web/events/afterprint/index.html | 102 ------------ .../zh-cn/web/events/afterscriptexecute/index.html | 57 ------- files/zh-cn/web/events/animationend/index.html | 92 ----------- files/zh-cn/web/events/animationstart/index.html | 89 ---------- files/zh-cn/web/events/beforeprint/index.html | 100 ------------ .../web/events/beforescriptexecute/index.html | 57 ------- files/zh-cn/web/events/beforeunload/index.html | 104 ------------ files/zh-cn/web/events/blur/index.html | 150 ----------------- files/zh-cn/web/events/change/index.html | 124 -------------- files/zh-cn/web/events/compositionend/index.html | 146 ----------------- files/zh-cn/web/events/compositionstart/index.html | 152 ----------------- .../zh-cn/web/events/compositionupdate/index.html | 145 ----------------- files/zh-cn/web/events/copy/index.html | 164 ------------------- files/zh-cn/web/events/cut/index.html | 159 ------------------ files/zh-cn/web/events/domcontentloaded/index.html | 128 --------------- files/zh-cn/web/events/error/index.html | 135 --------------- files/zh-cn/web/events/focus/index.html | 137 ---------------- files/zh-cn/web/events/focusout/index.html | 125 -------------- files/zh-cn/web/events/icecandidate/index.html | 135 --------------- files/zh-cn/web/events/input/index.html | 157 ------------------ files/zh-cn/web/events/load/index.html | 161 ------------------ files/zh-cn/web/events/loadend/index.html | 89 ---------- files/zh-cn/web/events/loadstart/index.html | 91 ----------- files/zh-cn/web/events/message/index.html | 167 ------------------- files/zh-cn/web/events/mousewheel/index.html | 181 --------------------- files/zh-cn/web/events/pageshow/index.html | 143 ---------------- files/zh-cn/web/events/paste/index.html | 103 ------------ .../index.html" | 149 ----------------- files/zh-cn/web/events/transitionend/index.html | 132 --------------- .../zh-cn/web/events/unhandledrejection/index.html | 118 -------------- files/zh-cn/web/events/unload/index.html | 125 -------------- .../index.html" | 146 ----------------- 33 files changed, 4137 deletions(-) delete mode 100644 files/zh-cn/web/events/abort/index.html delete mode 100644 files/zh-cn/web/events/afterprint/index.html delete mode 100644 files/zh-cn/web/events/afterscriptexecute/index.html delete mode 100644 files/zh-cn/web/events/animationend/index.html delete mode 100644 files/zh-cn/web/events/animationstart/index.html delete mode 100644 files/zh-cn/web/events/beforeprint/index.html delete mode 100644 files/zh-cn/web/events/beforescriptexecute/index.html delete mode 100644 files/zh-cn/web/events/beforeunload/index.html delete mode 100644 files/zh-cn/web/events/blur/index.html delete mode 100644 files/zh-cn/web/events/change/index.html delete mode 100644 files/zh-cn/web/events/compositionend/index.html delete mode 100644 files/zh-cn/web/events/compositionstart/index.html delete mode 100644 files/zh-cn/web/events/compositionupdate/index.html delete mode 100644 files/zh-cn/web/events/copy/index.html delete mode 100644 files/zh-cn/web/events/cut/index.html delete mode 100644 files/zh-cn/web/events/domcontentloaded/index.html delete mode 100644 files/zh-cn/web/events/error/index.html delete mode 100644 files/zh-cn/web/events/focus/index.html delete mode 100644 files/zh-cn/web/events/focusout/index.html delete mode 100644 files/zh-cn/web/events/icecandidate/index.html delete mode 100644 files/zh-cn/web/events/input/index.html delete mode 100644 files/zh-cn/web/events/load/index.html delete mode 100644 files/zh-cn/web/events/loadend/index.html delete mode 100644 files/zh-cn/web/events/loadstart/index.html delete mode 100644 files/zh-cn/web/events/message/index.html delete mode 100644 files/zh-cn/web/events/mousewheel/index.html delete mode 100644 files/zh-cn/web/events/pageshow/index.html delete mode 100644 files/zh-cn/web/events/paste/index.html delete mode 100644 "files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" delete mode 100644 files/zh-cn/web/events/transitionend/index.html delete mode 100644 files/zh-cn/web/events/unhandledrejection/index.html delete mode 100644 files/zh-cn/web/events/unload/index.html delete mode 100644 "files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" (limited to 'files/zh-cn/web/events') diff --git a/files/zh-cn/web/events/abort/index.html b/files/zh-cn/web/events/abort/index.html deleted file mode 100644 index 9a233b4d80..0000000000 --- a/files/zh-cn/web/events/abort/index.html +++ /dev/null @@ -1,74 +0,0 @@ ---- -title: abort -slug: Web/Events/abort -tags: - - abort -translation_of: Web/API/HTMLMediaElement/abort_event -translation_of_original: Web/Events/abort ---- -

当一个资源的加载已中止时，将触发 abort事件。

- -
-

译者注：这个事件只在 IE 支持，试了最新的 Chrome、FireFox、Safari 都不支持。

-
- -

常规信息

- -
-
规范
-
DOM L3
-
接口
-
从UI组件产生为UIEvent , 否则为Event .
-
是否冒泡
-
否
-
可取消默认行为
-
否
-
目标对象
-
元素（Element）
-
默认行为
-
无
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{readonlyInline}}{{domxref("EventTarget")}}产生该事件的对象(DOM树中最顶级的那个对象).
type {{readonlyInline}}{{domxref("DOMString")}}事件类型.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}该事件是否冒泡.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}该事件是否可取消默认行为.
view {{readonlyInline}}WindowProxydocument.defaultView (该文档的window对象 )
detail {{readonlyInline}}long (float)0.
diff --git a/files/zh-cn/web/events/afterprint/index.html b/files/zh-cn/web/events/afterprint/index.html deleted file mode 100644 index 3ee72441cd..0000000000 --- a/files/zh-cn/web/events/afterprint/index.html +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: afterprint -slug: Web/Events/afterprint -translation_of: Web/API/Window/afterprint_event ---- -

在相关联的文档已开始打印或打印预览已关闭之后, 触发 afterprint事件。

- -

基本信息

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
DefaultView (<window>)
-
Default Action
-
None
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

例子

- -

使用 addEventListener():

- -
window.addEventListener('afterprint', (event) => {
-  console.log('After print');
-});
- -

使用 onafterprint 时间监听属性：

- -
window.onafterprint = (event) => {
-  console.log('After print');
-};
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', '#event-afterprint')}}{{Spec2('HTML WHATWG')}}
- -

浏览器兼容性

- - - -

{{Compat("api.Window.afterprint_event")}}

- -

相关事件

- - diff --git a/files/zh-cn/web/events/afterscriptexecute/index.html b/files/zh-cn/web/events/afterscriptexecute/index.html deleted file mode 100644 index b2f4f0d980..0000000000 --- a/files/zh-cn/web/events/afterscriptexecute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Element：afterscriptexecute 事件 -slug: Web/Events/afterscriptexecute -tags: - - 事件 - - 参考 - - 非标准 -translation_of: Web/API/Element/afterscriptexecute_event ---- -
{{APIRef}}
- -
{{Non-standard_header}}
- -
-

此事件是早期版本的规范中的一个提案。不要依赖它。

-
- -

afterscriptexecute 事件在一个脚本执行完毕后触发。

- -

这是一个 Gecko（Firefox）特有的私有事件。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡是
是否可取消是
接口{{domxref("Event")}}
事件处理器属性无
- -

规范

- -

不属于任何规范。

- -

浏览器兼容性

- - - -

{{Compat("api.Element.afterscriptexecute_event")}}

- -

参见

- - diff --git a/files/zh-cn/web/events/animationend/index.html b/files/zh-cn/web/events/animationend/index.html deleted file mode 100644 index cb701ac392..0000000000 --- a/files/zh-cn/web/events/animationend/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: animationend -slug: Web/Events/animationend -tags: - - Animation - - AnimationEvent - - CSS Animations - - CSS3 Animations - - Event - - Reference - - animationend -translation_of: Web/API/HTMLElement/animationend_event ---- -

animationend 事件会在一个 CSS 动画完成时触发（不包括完成前就已终止的情况，例如元素变得不可见或者动画从元素中移除）。

- -

常规信息

- -
-
规范
-
{{SpecName("CSS3 Animations")}}
-
接口
-
{{domxref("AnimationEvent")}}
-
是否冒泡
-
是
-
事件可取消
-
否
-
目标
-
{{domxref("Document")}}, {{domxref("Element")}}, {{domxref("Window")}}
-
默认行为
-
无
-
- -

属性表

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{ReadOnlyInline}}{{domxref("EventTarget")}}事件目标（DOM 顶层目标）。
type {{ReadOnlyInline}}{{domxref("DOMString")}}事件类型
bubbles {{ReadOnlyInline}}boolean事件是否正常冒泡？
cancelable {{ReadOnlyInline}}boolean可否取消该事件？
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}与该动画相关的 CSS 属性值。
elapsedTime {{ReadOnlyInline}}Float动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。应等于 {{cssxref("animation-iteration-count")}} 乘以 {{cssxref("animation-duration")}} 的积，动画总活动的时长。
- -

相关事件

- - - -

参见

- - diff --git a/files/zh-cn/web/events/animationstart/index.html b/files/zh-cn/web/events/animationstart/index.html deleted file mode 100644 index 53929bfb0d..0000000000 --- a/files/zh-cn/web/events/animationstart/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: animationstart -slug: Web/Events/animationstart -tags: - - Animation - - AnimationEvent - - CSS Animations - - CSS3 Animations - - Event - - Reference - - animationstart -translation_of: Web/API/HTMLElement/animationstart_event ---- -

animationstart 事件会在 CSS 动画开始时触发。 如果有 animation-delay 延时，事件会在延迟时效过后立即触发。为负数的延时时长会致使事件被触发时事件的 elapsedTime 属性值等于该时长的绝对值（并且，相应地，动画将直接播放该时长绝对值之后的动画）。

- -

基本信息

- -
-
规格
-
CSS Animations
-
接口
-
AnimationEvent
-
是否冒泡
-
是
-
事件可取消
-
否
-
目标
-
Document, Element
-
默认行为
-
无
-
- -

属性表

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{ReadOnlyInline}}{{domxref("EventTarget")}}事件来源（DOM 顶层目标）。
type {{ReadOnlyInline}}{{domxref("DOMString")}}事件类型
bubbles {{ReadOnlyInline}}boolean事件是否正常冒泡？
cancelable {{ReadOnlyInline}}boolean可否取消该事件？
animationName {{ReadOnlyInline}}{{domxref("DOMString")}}与该动画相关的 CSS 属性值。
elapsedTime {{ReadOnlyInline}}Float动画运行时长，单位为秒，与直到该事件被触发的时间相一致，不包括任何动画暂停时的时长。此值应为 0 除非 animation-delay 是一个负值，这种情况下此值为 (-1 * {{cssxref("animation-delay")}})，并且动画将直接从此值后的序列开始播放。
- -

相关事件

- - - -

另请参阅

- - diff --git a/files/zh-cn/web/events/beforeprint/index.html b/files/zh-cn/web/events/beforeprint/index.html deleted file mode 100644 index fe9480238a..0000000000 --- a/files/zh-cn/web/events/beforeprint/index.html +++ /dev/null @@ -1,100 +0,0 @@ ---- -title: beforeprint -slug: Web/Events/beforeprint -translation_of: Web/API/Window/beforeprint_event ---- -

当相关联的文档即将打印或预览以进行打印时，将触发beforeprint事件。

- -

基本信息

- -
-
Specification
-
HTML5
-
Interface
-
Event
-
Bubbles
-
No
-
Cancelable
-
No
-
Target
-
DefaultView (<window>)
-
Default Action
-
None
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{readonlyInline}}{{domxref("EventTarget")}}事件目标 (DOM 树中的最顶层目标)
type {{readonlyInline}}{{domxref("DOMString")}}时间类型
bubbles {{readonlyInline}}{{jsxref("Boolean")}}事件是否冒泡
cancelable {{readonlyInline}}{{jsxref("Boolean")}}事件是否可取消
- -

样例

- -

使用 addEventListener()：

- -
window.addEventListener('beforeprint', (event) => {
-  console.log('Before print');
-});
- -

使用 onbeforeprint 事件监听属性：

- -
window.onbeforeprint = (event) => {
-  console.log('Before print');
-};
- -

规范

- - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', '#event-beforeprint')}}{{Spec2('HTML WHATWG')}}
- -

浏览器兼容性

- - - -

{{Compat("api.Window.beforeprint_event")}}

- -

相关事件

- - diff --git a/files/zh-cn/web/events/beforescriptexecute/index.html b/files/zh-cn/web/events/beforescriptexecute/index.html deleted file mode 100644 index 00aa4120c1..0000000000 --- a/files/zh-cn/web/events/beforescriptexecute/index.html +++ /dev/null @@ -1,57 +0,0 @@ ---- -title: Element：beforescriptexecute 事件 -slug: Web/Events/beforescriptexecute -tags: - - DOM - - 参考 - - 非标准 -translation_of: Web/API/Element/beforescriptexecute_event ---- -
{{APIRef}}
- -
{{Non-standard_header}}
- -
-

此事件是早期版本的规范中的一个提案。不要依赖它。

-
- -

beforescriptexecute 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。

- -

这是一个 Gecko（Firefox）特有的私有事件。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡是
是否可取消是
接口{{domxref("Event")}}
事件处理器属性无
- -

规范

- -

不属于任何规范。

- -

浏览器兼容性

- - - -

{{Compat("api.Element.beforescriptexecute_event")}}

- -

参见

- - diff --git a/files/zh-cn/web/events/beforeunload/index.html b/files/zh-cn/web/events/beforeunload/index.html deleted file mode 100644 index 9cef2f2cfc..0000000000 --- a/files/zh-cn/web/events/beforeunload/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: 'Window: beforeunload event' -slug: Web/Events/beforeunload -tags: - - Event - - Window - - beforeunload - - 事件 - - 参考 -translation_of: Web/API/Window/beforeunload_event ---- -

当浏览器窗口关闭或者刷新时，会触发beforeunload事件。当前页面不会直接关闭，可以点击确定按钮关闭或刷新，也可以取消关闭或刷新。

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableYes
Interface{{domxref("Event")}}
Event handler property{{domxref("WindowEventHandlers/onbeforeunload", "onbeforeunload")}}
- -

事件使网页能够触发一个确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器将导航到新页面，否则导航将会取消。

- -

根据规范，要显示确认对话框，事件处理程序需要在事件上调用{{domxref("Event.preventDefault()", "preventDefault()")}}。

- -

但是请注意，并非所有浏览器都支持此方法，而有些浏览器需要事件处理程序实现两个遗留方法中的一个作为代替：

- - - -

某些浏览器过去在确认对话框中显示返回的字符串，从而使事件处理程序能够向用户显示自定义消息。但是，此方法已被弃用，并且在大多数浏览器中不再支持。

- -

为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在beforeunload事件中创建的提示，甚至根本不会显示它们。

- -

将事件处理程序/监听器加到window或 document的beforeunload事件后，将阻止浏览器使用内存中的页面导航缓存，例如Firefox的Back-Forward缓存或WebKit的Page Cache。

- -

HTML规范指出在此事件中调用{{domxref("window.alert()")}}，{{domxref("window.confirm()")}}以及{{domxref("window.prompt()")}}方法，可能会失效。更多详细信息，请参见HTML规范。

- -

示例

- -

HTML规范指出作者应该使用 {{domxref("Event.preventDefault()")}} 而非 {{domxref("Event.returnValue")}}，然而，不是所有浏览器都支持这么做。

- -
window.addEventListener('beforeunload', (event) => {
-  // Cancel the event as stated by the standard.
-  event.preventDefault();
-  // Chrome requires returnValue to be set.
-  event.returnValue = '';
-});
-
- -

规范

- - - - - - - - - - - - - - - - - - - - - -
规范状态注释
{{SpecName("HTML WHATWG", "indices.html#event-beforeunload", "beforeunload")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5 W3C", "browsers.html#unloading-documents", "beforeunload")}}{{Spec2("HTML5 W3C")}}Initial definition
- -

浏览器兼容性

- - - -

{{Compat("api.Window.beforeunload_event")}}

- -

参阅

- - diff --git a/files/zh-cn/web/events/blur/index.html b/files/zh-cn/web/events/blur/index.html deleted file mode 100644 index a57cc5b995..0000000000 --- a/files/zh-cn/web/events/blur/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: blur (event) -slug: Web/Events/blur -translation_of: Web/API/Element/blur_event ---- -

当一个元素失去焦点的时候 blur 事件被触发。它和 focusout 事件的主要区别是 focusout 支持冒泡。

- -

常规信息

- -
-
规范
-
DOM L3
-
接口
-
{{domxref("FocusEvent")}}
-
是否冒泡
-
否
-
可取消默认行为
-
否
-
目标对象
-
元素（Element）
-
默认行为
-
无
-
- -

{{NoteStart}}{{domxref("Document.activeElement")}} 的值随浏览器的不同而不同 ({{bug(452307)}}): IE10把值设为焦点将要移向的对象 , 而Firefox和Chrome 往往把值设为body .{{NoteEnd}}

- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{readonlyInline}}{{domxref("EventTarget")}}产生该事件的对象(DOM树中最顶级的那个对象).
type {{readonlyInline}}{{domxref("DOMString")}}事件类型.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}该事件是否冒泡.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}该事件是否可取消默认行为.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM 元素)无
- -

事件代理

- -

有两种方法来为这个事件实现事件代理：在支持 focusout 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 addEventListener 方法的第三个参数 "useCapture" 为 true：

- -

HTML Content

- -
<form id="form">
-  <input type="text" placeholder="text input">
-  <input type="password" placeholder="password">
-</form>
- -

JavaScript Content

- -
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);
- -

{{EmbedLiveSample('Event_delegation')}}

- -

浏览器兼容性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support5{{CompatVersionUnknown}}[1]612.15.1
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support4.053{{CompatUnknown}}10.012.15.1
-
- -

[1] 在 Gecko 24 {{geckoRelease(24)}} 之前，事件的接口为 {{domxref("Event")}}，而不是 {{domxref("FocusEvent")}}。参考 ({{bug(855741)}}).

- -

相关的事件

- - diff --git a/files/zh-cn/web/events/change/index.html b/files/zh-cn/web/events/change/index.html deleted file mode 100644 index 6a997fc430..0000000000 --- a/files/zh-cn/web/events/change/index.html +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: change -slug: Web/Events/change -tags: - - Change - - HTML - - HTML DOM - - HTMLElement - - change vs. input - - 事件 - - 参考 -translation_of: Web/API/HTMLElement/change_event ---- -

{{APIRef}}

- -

当用户更改{{HTMLElement("input")}}、{{HTMLElement("select")}}和{{HTMLElement("textarea")}} 元素的值并提交这个更改时，change 事件在这些元素上触发。和 {{domxref("HTMLElement/input_event", "input")}} 事件不一样，change 事件并不是每次元素的 value 改变时都会触发。

- - - - - - - - - - - - - - - - - - - - -
冒泡是
可取消否
接口{{domxref("Event")}}
事件处理程序属性{{domxref("GlobalEventHandlers/onchange", "onchange")}}
- -

基于表单元素的类型和用户对标签的操作的不同，change 事件触发的时机也不同：

- - - -

示例

- -

<select> 元素

- -

HTML

- -
<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>
- -
body {
-  display: grid;
-  grid-template-areas: "select result";
-}
-
-select {
-  grid-area: select;
-}
-
-.result {
-  grid-area: result;
-}
-
- -

JavaScript

- -
const selectElement = document.querySelector('.ice-cream');
-
-selectElement.addEventListener('change', (event) => {
-  const result = document.querySelector('.result');
-  result.textContent = `You like ${event.target.value}`;
-});
-
- -

结果

- - - -

文本输入元素

- -

对于一些元素，包括 <input type="text">，change 事件在控件失去焦点前都不会触发。试一下在下面的输入框输入一些文字，然后点击输入框外的地方来触发事件。

- -

HTML

- -
<input placeholder="Enter some text" name="name"/>
-<p id="log"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('log');
-
-input.addEventListener('change', updateValue);
-
-function updateValue(e) {
-  log.textContent = e.target.value;
-}
- -

结果

- - - -

浏览器兼容性

- -

{{Compat("api.GlobalEventHandlers.onchange")}}

- -

对于一些特定类型的交互是否要触发 change 事件，不同浏览器的意见并不总是一致的。例如在 {{HTMLElement("select")}} 元素中使用键盘导航在 Gecko 中不会触发 change 事件，直到用户按下 Enter 键或将焦点从 <select> 上移走（参见 {{bug("126379")}}）。但从 Firefox 63（Quantum）开始，这个行为在已经在主流浏览器中达成一致。

- -

参见

- -

{{domxref("NetworkInformation.connection")}} fires the change event when the connection information changes.

diff --git a/files/zh-cn/web/events/compositionend/index.html b/files/zh-cn/web/events/compositionend/index.html deleted file mode 100644 index 4a023fc0e5..0000000000 --- a/files/zh-cn/web/events/compositionend/index.html +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: compositionend -slug: Web/Events/compositionend -tags: - - 事件 -translation_of: Web/API/Element/compositionend_event ---- -

当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。

- - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Target objects{{domxref("Element")}}
Interface{{domxref("TouchEvent")}}
- -

Properties

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}聚焦元素处理成分
type {{ReadOnlyInline}}{{domxref("DOMString")}}事件类型
bubbles {{ReadOnlyInline}}boolean事件是否冒泡
cancelable {{ReadOnlyInline}}boolean是否可以取消该事件
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (window of the document)
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string)正在编辑的原始字符串, 否则为空字符串。只读。
locale{{domxref("DOMString")}} (string)组合事件的语言代码 (如果可用);否则, 为空字符串。只读。
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("9.0")}}[1]{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile("9.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
-
- -

[1] 该事件是在9.0 之前的Gecko版本中已经可以使用, 但没有 DOM 级3属性和方法。Gecko还不支持给受信任事件的locale属性设置值。但是, 当创建不受信任的事件时，此值可以通过initCompositionEvent() 设置。

- - - - diff --git a/files/zh-cn/web/events/compositionstart/index.html b/files/zh-cn/web/events/compositionstart/index.html deleted file mode 100644 index 71aa9f1f0d..0000000000 --- a/files/zh-cn/web/events/compositionstart/index.html +++ /dev/null @@ -1,152 +0,0 @@ ---- -title: compositionstart -slug: Web/Events/compositionstart -tags: - - Element - - Event - - Input method - - compositionstart - - 事件 - - 参考 -translation_of: Web/API/Element/compositionstart_event ---- -

文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 compositionstart 事件。

- -

例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。

- - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("CompositionEvent")}}
Event handler property - - - - - - -
None
-
- -

示例

- -
const inputElement = document.querySelector('input[type="text"]');
-
-inputElement.addEventListener('compositionstart', (event) => {
-  console.log(`generated characters were: ${event.data}`);
-});
- -

动态演示

- -

HTML

- -
<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>
- -

CSS

- -
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;
-}
-
- -

JS

- -
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);
-
- -

结果

- -

- -

规范

- - - - - - - - - - - - - - -
规范状态
{{SpecName('UI Events', '#event-type-compositionstart')}}{{Spec2('UI Events')}}
- -

浏览器兼容性

- -

{{Compat("api.Element.compositionstart_event")}}

- -

参见

- - diff --git a/files/zh-cn/web/events/compositionupdate/index.html b/files/zh-cn/web/events/compositionupdate/index.html deleted file mode 100644 index 11952af506..0000000000 --- a/files/zh-cn/web/events/compositionupdate/index.html +++ /dev/null @@ -1,145 +0,0 @@ ---- -title: compositionupdate -slug: Web/Events/compositionupdate -translation_of: Web/API/Element/compositionupdate_event ---- -

compositionupdate 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）

- - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Target objects{{domxref("Element")}}
Interface{{domxref("TouchEvent")}}
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{ReadOnlyInline}}{{domxref("EventTarget")}}焦点所在的，处理文字输入的元素。
type {{ReadOnlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{ReadOnlyInline}}booleanDoes the event normally bubble?
cancelable {{ReadOnlyInline}}booleanIs it possible to cancel the event?
view {{ReadOnlyInline}}{{domxref("WindowProxy")}}{{domxref("Document.defaultView")}} (the window of the document).
detail {{ReadOnlyInline}}long (float)0.
data {{ReadOnlyInline}}{{domxref("DOMString")}} (string)要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。
locale {{ReadOnlyInline}}{{domxref("DOMString")}} (string)输入事件的语言代号，或者空字符串。只读。
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}[1]{{CompatGeckoDesktop("9.0")}}[2]{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("9.0")}}[2]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] 在 compositionstart 事件之后不会立即执行。

- -

[2] compositionupdate 事件在编辑器里的内容改变之前就会触发。自从 Gecko 12.0 {{geckoRelease("12.0")}} 开始 input 事件在输入过程中、内容变化后就触发。使用它可以在输入过程中就获得新的内容。

- -

Gecko 在可信事件（trusted events）中还不支持 locale 属性。但是开发者可以在使用 initCompositionEvent() 创建不可信事件时指定一个值。

- -

参阅

- - diff --git a/files/zh-cn/web/events/copy/index.html b/files/zh-cn/web/events/copy/index.html deleted file mode 100644 index ac249f5055..0000000000 --- a/files/zh-cn/web/events/copy/index.html +++ /dev/null @@ -1,164 +0,0 @@ ---- -title: copy -slug: Web/Events/copy -tags: - - Clipboard API - - Event - - Reference -translation_of: Web/API/Element/copy_event ---- -

当用户通过浏览器UI（例如，使用 Ctrl/⌘+C  键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发copy事件。

- -

基本信息

- -
-
Specification
-
Clipboard
-
Interface
-
{{domxref("ClipboardEvent")}}
-
Bubbles
-
Yes
-
Cancelable
-
Yes
-
Target
-
{{domxref("Element")}}：获得焦点的元素（如{{domxref("HTMLElement.contentEditable","contentEditable")}}内容能编辑或者可以选中的元素），或{{HTMLElement("body")}}。
-
Default Action
-
见下文。
-
- -

调用{{domxref("DataTransfer.setData","setData(format, data)")}}可以修改{{domxref("ClipboardEvent.clipboardData")}}事件的默认行为：

- -
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
-});
- -

不能使用{{domxref("DataTransfer.getData", "clipboardData.getData()")}}在事件处理函数中获取剪切板数据。

- -

事件的默认行为与事件的来源和事件处理函数相关：

- - - -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(22) }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
clipboardData{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatGeckoMobile(22) }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

参见

- - diff --git a/files/zh-cn/web/events/cut/index.html b/files/zh-cn/web/events/cut/index.html deleted file mode 100644 index 48c024451a..0000000000 --- a/files/zh-cn/web/events/cut/index.html +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: cut -slug: Web/Events/cut -tags: - - 事件 - - 剪贴板API - - 参考 -translation_of: Web/API/Element/cut_event ---- -
-

This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: https://www.w3.org/TR/clipboard-apis/#the-cut-action

-
- -

cut 事件在将选中内容从文档中删除并将其添加到剪贴板后触发。

- -

如果用户尝试对不可编辑内容执行剪切操作，则cut事件仍会触发，但事件对象不包含任何数据。

- -

基本信息

- -
-
规范
-
Clipboard
-
接口
-
{{domxref("ClipboardEvent")}}
-
是否冒泡
-
Yes
-
可取消默认行为
-
Yes
-
目标对象
-
{{domxref("DefaultView")}}, {{domxref("Document")}}, {{domxref("Element")}}
-
默认行为
-
None
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}事件对象（DOM树的顶层对象）。
type {{readonlyInline}}{{domxref("DOMString")}}事件的类型。
bubbles {{readonlyInline}}{{jsxref("Boolean")}}事件是否冒泡。
cancelable {{readonlyInline}}{{jsxref("Boolean")}}事件是否可以取消。
clipboardData {{readonlyInline}}{{domxref("DataTransfer")}}剪贴板的内容。不仅仅是文本，还有文件和图片。
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{compatChrome(58)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatNo() }}{{CompatOpera(45)}}{{ CompatUnknown() }}
clipboardData{{compatChrome(58)}}{{CompatVersionUnknown}}{{ CompatGeckoDesktop(22) }}{{ CompatNo() }}{{CompatOpera(45)}}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support{{compatChrome(58)}}{{compatChrome(58)}}{{CompatVersionUnknown}}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}{{CompatOperaMobile(45)}}{{ CompatUnknown() }}
clipboardData{{compatChrome(58)}}{{compatChrome(58)}}{{CompatVersionUnknown}}{{ CompatGeckoMobile(22) }}{{ CompatUnknown() }}{{CompatOperaMobile(45)}}{{ CompatUnknown() }}
-
- -

相关

- - diff --git a/files/zh-cn/web/events/domcontentloaded/index.html b/files/zh-cn/web/events/domcontentloaded/index.html deleted file mode 100644 index 67c6a44253..0000000000 --- a/files/zh-cn/web/events/domcontentloaded/index.html +++ /dev/null @@ -1,128 +0,0 @@ ---- -title: DOMContentLoaded -slug: Web/Events/DOMContentLoaded -tags: - - DOMContentLoaded - - Window.open() - - load - - window.onload -translation_of: Web/API/Window/DOMContentLoaded_event ---- -

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完全加载。

- -

模拟的css文件：CSS.php

- -
<?php
-sleep(3);
- -

测试代码：

- -
<link rel="stylesheet" href="css.php">
-<script>
-document.addEventListener('DOMContentLoaded',function(){
-    console.log('3 seconds passed');
-});
-</script>
- -

如果将link置于script之后，就会立即打印。

- -

{{Note("同步 JavaScript 会暂停 DOM 的解析。")}}

- -

{{Note("还有许多通用和独立的库提供跨浏览器方法来检测 DOM 是否已准备就绪")}}

- -

加速中

- -

如果您希望 DOM 在用户请求页面后尽可能快地解析，你可以做的一些事情是把你的 JavaScript 异步化 以及 优化样式表的加载, 由于被并行加载而减慢页面加载，从主 html 文档“窃取”流量。

- -

常规信息

- -
-
规范
-
HTML5
-
接口
-
Event
-
是否冒泡
-
是
-
能否取消
-
能 (尽管一个简单的事件被指定为不可取消)
-
目标
-
Document
-
默认行为
-
无.
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
属性类型描述
target {{readonlyInline}}{{domxref("EventTarget")}}产生该事件的对象(DOM树中最顶级的那个对象).
type {{readonlyInline}}{{domxref("DOMString")}}事件类型.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}该事件是否冒泡.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}该事件是否可取消默认行为.
- -

示例

- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-      console.log("DOM fully loaded and parsed");
-  });
-</script>
- -
<script>
-  document.addEventListener("DOMContentLoaded", function(event) {
-      console.log("DOM fully loaded and parsed");
-  });
-
-  for(var i=0; i<1000000000; i++){
-      // 这个同步脚本将延迟DOM的解析。
-      // 所以DOMContentLoaded事件稍后将启动。
-  } 
-</script>
- -

浏览器兼容性

- -

{{Compat("api.Window.DOMContentLoaded_event")}}

- -

至少从Gecko 1.9.2,Chrome 6,以及Safari 4开始,就已经实现了该事件的冒泡行为.

- -

兼容不支持该事件的浏览器

- -

在IE8中,可以使用readystatechange事件来检测DOM文档是否加载完毕.在更早的IE版本中,可以通过每隔一段时间执行一次document.documentElement.doScroll("left")来检测这一状态，因为这条代码在DOM加载完毕之前执行时会抛出错误(throw an error)。

- -

诸如jQuery这样的通用JS库，会提供跨浏览器的方法来检测DOM是否加载完成。也有其他专门实现该功能的脚本:contentloaded.js (只能添一个时间监听函数)以及jquery.documentReady.js (并不依赖jQuery,虽然名字中有jquery).

- -

相关事件

- - diff --git a/files/zh-cn/web/events/error/index.html b/files/zh-cn/web/events/error/index.html deleted file mode 100644 index 913caf76bf..0000000000 --- a/files/zh-cn/web/events/error/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: error -slug: Web/Events/error -translation_of: Web/API/Element/error_event ---- -
{{APIRef}}
- -

当一个资源加载失败或无法使用时，会在{{domxref("Element")}}对象上触发error事件。例如当脚本执行错误、或图片无法找到或图片无效时。

- - - - - - - - - - - - - - - - - - - - -
Bubbles（支持冒泡）No
Cancelable（可撤销）No
Interface（接口）{{domxref("Event")}} 或{{domxref("UIEvent")}}
Event handler property（事件处理程序属性）{{domxref("GlobalEventHandlers/onerror", "onerror")}}
- -

如果事件对象是从用户界面元素生成的，则它是一个{{domxref("UIEvent")}}实例;反之，它是一个{{domxref("Event")}}实例。

- -

示例

- -

在线示例

- -

HTML

- -
<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>
- - - -

JS

- -
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');
-});
-
- -

结果

- -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

- -

规范

- - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('UI Events', '#event-type-error')}}{{Spec2('UI Events')}}
- -

浏览器兼容性

- - - -

{{Compat("api.Element.error_event")}}

- -

参阅

- - diff --git a/files/zh-cn/web/events/focus/index.html b/files/zh-cn/web/events/focus/index.html deleted file mode 100644 index 4a93ee7726..0000000000 --- a/files/zh-cn/web/events/focus/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: focus -slug: Web/Events/focus -translation_of: Web/API/Element/focus_event ---- -

focus事件在元素获取焦点时触发. 这个事件和 focusin 最大的区别仅仅在于后者会事件冒泡.

- -

基本信息

- -
-
规范
-
DOM L3
-
接口
-
{{ domxref("FocusEvent") }}
-
是否冒泡
-
否
-
能否取消默认
-
否
-
事件目标
-
Element
-
默认行为
-
无.
-
- -
注释: 这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target (DOM element)
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)null
- -

事件委托

- -

此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 focusin 事件 (除了Firefox之外的所有浏览器), 或者通过设置 addEventListener 的参数"useCapture" 值为true:

- -

{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}

- -

(Sample code from blur (event))

- -

浏览器兼容性

- -
{{CompatibilityTable}}
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatrueChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown()}}{{CompatVersionUnknown}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}{{CompatVersionUnknown()}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown()}}{{CompatUnknown()}}{{CompatVersionUnknown}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}{{CompatUnknown()}}
-
- -

相关事件

- - diff --git a/files/zh-cn/web/events/focusout/index.html b/files/zh-cn/web/events/focusout/index.html deleted file mode 100644 index 87a8a9bd48..0000000000 --- a/files/zh-cn/web/events/focusout/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: focusout -slug: Web/Events/focusout -translation_of: Web/API/Element/focusout_event ---- -

当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 blur 事件之间的主要区别在于后者不会冒泡。

- -

基本信息

- -
-
Specification
-
DOM L3
-
Interface
-
{{domxref("FocusEvent")}}
-
Bubbles
-
Yes
-
Cancelable
-
No
-
Target
-
Element
-
Default Action
-
None.
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}Event target losing focus.
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
relatedTarget {{readonlyInline}}{{domxref("EventTarget")}} (DOM element)Event target receiving focus.
- -

浏览器兼容性

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoDesktop(52)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(52)}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}
-
- -

相关事件

- - diff --git a/files/zh-cn/web/events/icecandidate/index.html b/files/zh-cn/web/events/icecandidate/index.html deleted file mode 100644 index 38fc5c1920..0000000000 --- a/files/zh-cn/web/events/icecandidate/index.html +++ /dev/null @@ -1,135 +0,0 @@ ---- -title: 'RTCPeerConnection: icecandidate event' -slug: Web/Events/icecandidate -translation_of: Web/API/RTCPeerConnection/icecandidate_event ---- -

{{SeeCompatTable}}

- -

当 {{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.setLocalDescription()")}}方法更改本地描述之后，该{{domxref("RTCPeerConnection")}}会抛出icecandidate事件。该事件的监听器需要将更改后的描述信息传送给远端{{domxref("RTCPeerConnection")}}，以更新远端的备选源。

- -

使用指南

- -

icecandidate 的类型为 {{domxref("RTCPeerIceCandidateEvent")}}, 在以下三种情况下会触发该事件：

- -

分享新的源

- -

触发icecandidate事件的首要原因：当获得新的源之后，需要将该源的信息发送给远端信号服务器，并分发至其他端的{{domxref("RTCPeerConnection")}}。其他{{domxref("RTCPeerConnection")}}通过{{domxref("RTCPeerConnection.addIceCandidate", "addIceCandidate()")}}方法将新{{domxref("RTCPeerCandidateIceEvent.candidate", "candidate")}} 中携带的信息，将新的源描述信息添加进它的备选池中；

- -
rtcPeerConnection.onicecandidate = (event) => {
-  if (event.candidate) {
-    sendCandidateToRemotePeer(event.candidate)
-  }
-}
-
- - - -

概述

- -
-
规范
-
{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}
-
接口
-
{{domxref("RTCPeerConnectionIceEvent")}}
-
事件冒泡
-
否
-
能否取消默认
-
否
-
事件目标
-
{{domxref("RTCPeerConnection")}}
-
默认行为
-
无
-
- -

属性

- -

属性继承自{{domxref("RTCPeerConnectionIceEvent")}}.

- -

方法

- -

方法继承自 {{domxref("RTCPeerConnectionIceEvent")}}.

- -

相关事件

- - - -

规范

- - - - - - - - - - - - - - -
规范状态注释
{{ SpecName('WebRTC 1.0', '#event-mediastream-icecandidate', 'icecandidate') }}{{Spec2('WebRTC 1.0')}}
- -

兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - -
特性ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatVersionUnknown() }}{{CompatVersionUnknown}}{{ CompatVersionUnknown }}{{ CompatNo() }}{{ CompatVersionUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - -
特性AndroidChrome for AndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatUnknown() }}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

参阅

- - diff --git a/files/zh-cn/web/events/input/index.html b/files/zh-cn/web/events/input/index.html deleted file mode 100644 index 7ee1b98ad5..0000000000 --- a/files/zh-cn/web/events/input/index.html +++ /dev/null @@ -1,157 +0,0 @@ ---- -title: input -slug: Web/Events/input -tags: - - HTML DOM - - HTMLElement - - Input - - 事件 - - 参考 - - 表单 - - 输入 -translation_of: Web/API/HTMLElement/input_event ---- -

{{APIRef}}

- -

当一个 {{HTMLElement("input")}}, {{HTMLElement("select")}}, 或 {{HTMLElement("textarea")}} 元素的 value 被修改时，会触发 input 事件。

- - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{DOMxRef("InputEvent")}}
Event handler property{{domxref("GlobalEventHandlers.oninput")}}
- -

input 事件也适用于启用了 {{domxref("HTMLElement.contentEditable", "contenteditable")}} 的元素，以及开启了 {{domxref("Document.designMode", "designMode")}} 的任意元素。在contenteditable 和 designMode 的情况下，事件的 target 为当前正在编辑的宿主。如果这些属性应用于多个元素上，当前正在编辑的宿主为最近的父节点不可编辑的祖先元素。

- -

对于 type=checkbox 或 type=radio 的 input 元素，每当用户切换控件（通过触摸、鼠标或键盘）时（HTML5规范），input 事件都应该触发。然而，历史事实并非如此。请检查兼容性，或使用 {{event("change")}} 事件代替这些类型的元素。

- -
-

注意： 每当元素的 value 改变，input 事件都会被触发。这与 {{domxref("HTMLInputElement.change_event", "change")}} 事件不同。change 事件仅当 value 被提交时触发，如按回车键，从一个 options 列表中选择一个值等。

-
- -

示例

- -

每当用户修改 {{HtmlElement("input")}} 元素的 value 时，这个示例会记录 value。

- -

HTML

- -
<input placeholder="Enter some text" name="name"/>
-<p id="values"></p>
- -

JavaScript

- -
const input = document.querySelector('input');
-const log = document.getElementById('values');
-
-input.addEventListener('input', updateValue);
-
-function updateValue(e) {
-  log.textContent = e.srcElement.value;
-}
-
- -

结果

- -

- -

规范

- - - - - - - - - - - - - - - - - - -
SpecificationStatus
{{SpecName('HTML WHATWG', "forms.html#event-input-input", "input event")}}{{Spec2('HTML WHATWG')}}
{{SpecName('DOM3 Events', "#event-type-input", "input event")}}{{Spec2('DOM3 Events')}}
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
- -

浏览器兼容性

- -

{{Compat("api.HTMLElement.input_event")}}

- -
- -

[1] 在 Gecko 12.0 {{geckoRelease("12.0")}} 之前，用户在输入法中输入时，或者 dead keys were used on Mac OS X 时，Gecko 不触发 input 事件。

- -

[2] IE 9 在用户删除输入的文字时不触发 input 事件(例如，按 Backspace 或者删除键，或者“剪切”文字).

- -

[3] Opera 在用户把文字拖进输入框时，不触发 input 事件。

- -

[4] 事件 target 是光标所在的最内侧的元素。

- -

参见

- - - -

此外，还有一个类似的 change 事件。change 触发的频率低于 input - 它只会在用户提交更改时触发。

- -

- -

diff --git a/files/zh-cn/web/events/load/index.html b/files/zh-cn/web/events/load/index.html deleted file mode 100644 index 5cfb7b075f..0000000000 --- a/files/zh-cn/web/events/load/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: load -slug: Web/Events/load -tags: - - load -translation_of: Web/API/Window/load_event ---- -

{{APIRef}}

- -

当整个页面及所有依赖资源如样式表和图片都已完成加载时，将触发load事件。

- -

它与{{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}不同，后者只要页面DOM加载完成就触发，无需等待依赖资源的加载。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡否
能否取消否
接口{{domxref("Event")}}
Event handler property{{domxref("GlobalEventHandlers/onload", "onload")}}
- -

用法

- -

当页面及资源完全加载后在控制台打印一段信息：

- -
window.addEventListener('load', (event) => {
-  console.log('page is fully loaded');
-});
- -

也可以使用onload实现：

- -
window.onload = (event) => {
-  console.log('page is fully loaded');
-};
- -

示例

- -

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>
- - - -

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`;
-});
-
-
- -

结果

- -

{{ EmbedLiveSample('Live_example', '100%', '160px') }}

- -

规范

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('UI Events', '#event-type-load', 'load')}}{{Spec2('UI Events')}}
{{SpecName('HTML WHATWG', '#delay-the-load-event', 'load event')}}{{Spec2('HTML WHATWG')}}此链接指向加载文档结束时执行步骤中的部分。“load”事件也会在许多元素上触发。 请注意，规范中有很多地方涉及到可以"延迟加载事件"的内容。
- -

浏览器兼容性

- - - -

{{Compat("api.Window.load_event")}}

- -

参阅

- - diff --git a/files/zh-cn/web/events/loadend/index.html b/files/zh-cn/web/events/loadend/index.html deleted file mode 100644 index 529a0b1673..0000000000 --- a/files/zh-cn/web/events/loadend/index.html +++ /dev/null @@ -1,89 +0,0 @@ ---- -title: loadend -slug: Web/Events/loadend -translation_of: Web/API/XMLHttpRequest/loadend_event ---- -

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

- -

General info

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

Properties

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

See also

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

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

- -

基本信息

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

属性

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

相关事件

- - - -

了解更多

- - diff --git a/files/zh-cn/web/events/message/index.html b/files/zh-cn/web/events/message/index.html deleted file mode 100644 index ccbd2d9859..0000000000 --- a/files/zh-cn/web/events/message/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: 'BroadcastChannel: message event' -slug: Web/Events/message -tags: - - 事件 - - 消息 - - 通信 -translation_of: Web/API/BroadcastChannel/message_event ---- -
{{APIRef}}
- -

当频道收到一条消息时，会在关联的 {{domxref('BroadcastChannel')}} 对象上触发 message 事件。

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("MessageEvent")}}
Event handler propertyonmessage
- -

示例

- -

实时示例

- -

在这个例子中，有一个 <iframe> 作为发送者，当用户点击按钮之后，会广播 <textarea> 中的内容。同时，有两个 <iframe> 作为接收者，会监听广播的消息，并将结果写入 <div> 元素。

- -

发送者

- - - -
const channel = new BroadcastChannel('example-channel');
-const messageControl = document.querySelector('#message');
-const broadcastMessageButton = document.querySelector('#broadcast-message');
-
-broadcastMessageButton.addEventListener('click', () => {
-    channel.postMessage(messageControl.value);
-})
-
- -

接收者 1

- - - -
const channel = new BroadcastChannel('example-channel');
-channel.addEventListener('message', (event) => {
-  received.textContent = event.data;
-});
- -

接收者 2

- - - -
const channel = new BroadcastChannel('example-channel');
-channel.addEventListener('message', (event) => {
-  received.textContent = event.data;
-});
- -

结果

- -

{{ EmbedLiveSample('发送者', '100%', '170px','' ,'' , 'dummy') }}

- -

{{ EmbedLiveSample('接收者_1', '100%', '150px','' ,'' , 'dummy') }}

- -

{{ EmbedLiveSample('接收者_2', '100%', '150px','' ,'' , 'dummy') }}

- -

规范

- - - - - - - - - - - - -
规范状态
{{SpecName('HTML WHATWG', 'indices.html#event-message')}}{{Spec2('HTML WHATWG')}}
- -

浏览器兼容性

- - - -

{{Compat("api.BroadcastChannel.message_event")}}

- -

相关信息

- - diff --git a/files/zh-cn/web/events/mousewheel/index.html b/files/zh-cn/web/events/mousewheel/index.html deleted file mode 100644 index 599f17edbb..0000000000 --- a/files/zh-cn/web/events/mousewheel/index.html +++ /dev/null @@ -1,181 +0,0 @@ ---- -title: mousewheel -slug: Web/Events/mousewheel -translation_of: Web/API/Element/mousewheel_event ---- -

{{ Non-standard_header() }}

- -

The mousewheel event is fired asynchronously when a mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.

- -
-

Do not use this wheel event.

- -

This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard {{event("wheel")}} event.

-
- - - -

Specification

- -

The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}

- -

Browser compatibility

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{ CompatChrome("1.0") }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatIE("6.0") }}{{ CompatOpera("10.00") }}{{ CompatSafari("3.0") }}
wheelDeltaX{{ CompatChrome("1.0") }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatSafari("3.0") }}
wheelDeltaY{{ CompatChrome("1.0") }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatNo() }}{{ CompatNo() }}{{ CompatSafari("3.0") }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
wheelDeltaX{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
wheelDeltaY{{ CompatUnknown() }}{{CompatVersionUnknown}}{{ CompatNo() }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

detail value

- -

The detail attribute value is always 0 except Opera (Presto).

- -

Opera (Presto) sets almost the same value as Firefox (Gecko)'s DOMMouseScroll 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.

- -

On Mac, the value is computed from accelerated scroll amount.

- -

On Linux, 2 or -2 is set per native wheel event.

- -

wheelDelta, wheelDeltaX and wheelDeltaY value

- -

The wheelDelta 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 wheel. However, the meaning of the amount of these values is not the same between browsers. See following explanation for the detail.

- -

IE and Opera (Presto) only support wheelDelta attribute and do not support horizontal scroll.

- -

The wheelDeltaX attribute value indicates the wheelDelta 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.

- -

The wheelDeltaY attribute value indicates the wheelDelta attribute value along the vertical axis. The sign of the value is the same as the wheelDelta attribute value.

- -

IE

- -

The value is the same as the delta value of WM_MOUSEWHEEL or WM_MOUSEHWHEEL. 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.

- -

Chrome

- -

On Windows, the value is the same as the delta value of WM_MOUSEWHEEL or WM_MOUSEHWHEEL. 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.

- -

On Linux, the value is 120 or -120 per native wheel event. This makes the same behavior as IE and Chrome for Windows.

- -

On Mac, the value is complicated. The value is changed if the device that causes the native wheel event supports continuous scroll.

- -

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.

- -

If the device does not 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.

- -

This difference makes a serious issue for web application developers. That is, web developers cannot know if mousewheel event is caused by which device.

- -

See WebInputEventFactory::mouseWheelEvent of the Chromium's source code for the detail.

- -

Safari

- -

The value is always computed from accelerated scroll amount. This is really different from other browsers except Chrome with continuous scroll supported device.

- -

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.

- -

Opera (Presto)

- -

The value is always the detail attribute value ✕ 40.

- -

On Windows, since the detail 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.

- -

On Linux, the value is 80 or -80 per native wheel event. This is different from other browsers.

- -

On Mac, the detail attribute value is computed from accelerated scroll amout of native event. The value is usually much bigger than Safari's or Chrome's value.

- -

See also

- - diff --git a/files/zh-cn/web/events/pageshow/index.html b/files/zh-cn/web/events/pageshow/index.html deleted file mode 100644 index d0aec41716..0000000000 --- a/files/zh-cn/web/events/pageshow/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: pageshow -slug: Web/Events/pageshow -translation_of: Web/API/Window/pageshow_event ---- -

当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包括了后退/前进按钮操作，同时也会在onload 事件触发后初始化页面时触发)

- -

基本信息

- -
-
规范
-
HTML5
-
接口
-
PageTransitionEvent
-
事件冒泡
-
No
-
事件取消
-
No
-
事件源
-
Document (dispatched on Window)
-
默认操作
-
None
-
- -

属性

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
target {{readonlyInline}}{{domxref("EventTarget")}}The event target (the topmost target in the DOM tree).
type {{readonlyInline}}{{domxref("DOMString")}}The type of event.
bubbles {{readonlyInline}}{{jsxref("Boolean")}}Whether the event normally bubbles or not.
cancelable {{readonlyInline}}{{jsxref("Boolean")}}Whether the event is cancellable or not.
persisted {{readonlyInline}}{{jsxref("boolean")}}表示网页是否是来自缓存.
- -

示例

- -

以下示例将会在控制台打印由前进/后退按钮以及load事件触发后引起的pageshow事件：

- -
window.addEventListener('pageshow', function(event) {
-    console.log('after , pageshow :',event);
-});
-
-
-window.addEventListener('load', function() {
-    console.log('before');
-});
-
- - - - - -

不规范的写法，你同样可以将这个事件当做一个属性添加到body标签，类似于onload

- -
<body onload="myonload()" onpageshow="mypageshowcode()">
- -

浏览器兼容性

- -

{{CompatibilityTable()}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("4")}}{{CompatGeckoDesktop("1.8")}}11155
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support2.3{{CompatUnknown()}}11355.1
- - -
- -

相关事件

- - diff --git a/files/zh-cn/web/events/paste/index.html b/files/zh-cn/web/events/paste/index.html deleted file mode 100644 index 1fb088eddf..0000000000 --- a/files/zh-cn/web/events/paste/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: 'Element: paste事件' -slug: Web/Events/paste -tags: - - Clipboard API - - Event - - Reference -translation_of: Web/API/Element/paste_event ---- -

 {{APIRef}}

- -

当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件。

- -
冒泡                 是
-
-可取消               是
-
-接口                 {{domxref("ClipboardEvent")}}
-
-事件处理属性          {{domxref("HTMLElement/onpaste", "onpaste")}}
-
- -

如果光标位于可编辑的上下文中（例如，在 {{HTMLElement("textarea")}} 或者 contenteditable 属性设置为 true的元素），则默认操作是将剪贴板的内容插入光标所在位置的文档中。

- -

事件处理程序可以通过调用事件的 clipboardData 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。

- -

要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），事件处理程序必须使用 {{domxref("Event/preventDefault", "event.preventDefault()")}}，取消默认操作，然后手动插入想要的数据。

- -

可以构造和分派合成的paste事件，但这不会影响文档内容。

- -

举例

- -

Live example

- -

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>
- -

CSS

- -
div.source, div.target {
-    border: 1px solid gray;
-    margin: .5rem;
-    padding: .5rem;
-    height: 1rem;
-    background-color: #e9eef1;
-}
-
- -

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();
-});
-
- -

Result

- -

 {{EmbedLiveSample('Live_example', '100%', '100px')}}

- -

规范

- - - - - - - - - - - - - - -
规范状态
{{SpecName('Clipboard API', '#clipboard-event-paste')}}{{Spec2('Clipboard API')}}
- -

浏览器兼容性

- - - -

{{Compat("api.Element.paste_event")}}

- -

另见

- - diff --git "a/files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" "b/files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" deleted file mode 100644 index a4f95498ad..0000000000 --- "a/files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" +++ /dev/null @@ -1,149 +0,0 @@ ---- -title: 'Document: readystatechange 事件' -slug: Web/Events/readystatechange事件 -tags: - - Reference - - XMLHttpRequest - - interactive - - 事件 -translation_of: Web/API/Document/readystatechange_event ---- -
{{APIRef}}
- -

当文档的 {{domxref("Document.readyState", "readyState")}} 属性发生改变时，会触发 readystatechange 事件。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡否
是否可取消否
接口{{domxref("Event")}}
Event handler 属性onreadystatechange
- -

示例

- -

实时演示

- -

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>
- - - -

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`;
-});
-
-
- -

结果

- -

- -

规范

- - - - - - - - - - - - - - - - -
规范状态备注
{{SpecName("HTML WHATWG", "indices.html#event-readystatechange", "readystatechange")}}{{Spec2("HTML WHATWG")}}
- -

浏览器兼容性

- - - -

{{Compat("api.Document.readystatechange_event")}}

- -

IE 浏览器是一直支持 readystatechange 事件的，可作为 DOMContentLoaded 事件的替代方法（参见Browser compatibility的注释 [2]）。

- -

参见

- - diff --git a/files/zh-cn/web/events/transitionend/index.html b/files/zh-cn/web/events/transitionend/index.html deleted file mode 100644 index f79db8503a..0000000000 --- a/files/zh-cn/web/events/transitionend/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: transitionend -slug: Web/Events/transitionend -translation_of: Web/API/HTMLElement/transitionend_event ---- -
{{APIRef}}
- -

transitionend 事件会在 CSS transition 结束后触发. 当transition完成前移除transition时，比如移除css的{{cssxref("transition-property")}} 属性，事件将不会被触发.如在transition完成前设置  {{cssxref("display")}} 为"none"，事件同样不会被触发。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡是
是否可取消是
接口{{domxref("TransitionEvent")}}
事件处理器属性{{domxref("GlobalEventHandlers/ontransitionend", "ontransitionend")}}
- -

transitionend 事件是双向触发的 - 当完成到转换状态的过渡，以及完全恢复到默认或非转换状态时都会触发。 如果没有过渡延迟或持续时间，即两者的值都为0s或者都未声明， 则不发生过渡，并且任何过渡事件都不会触发。如果触发了 transitioncancel 事件，则transitionend 事件不会触发。

- -

例

- -
/*
- * 在指定的元素上监听transitionend事件, 例如#slidingMenu
- * 然后指定一个函数, 例如 showMessage()
- */
-function showMessage() {
-    console.log('Transition 已完成');
-}
-
-var element = document.getElementById("slidingMenu");
-element.addEventListener("transitionend", showMessage, false);
-
- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName("CSS3 Transitions", "#transition-events", "transitionend")}}{{ Spec2('CSS3 Transitions') }}Initial definition.
- -

浏览器兼容性

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support1.0[1]
- 36		{{CompatGeckoDesktop("2.0")}}1010.5[2]
- 12
- 12.10
- 23		3.2[1]
- 7.0.6
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatGeckoMobile("2.0")}}{{CompatUnknown}}10[2]
- 12
- 12.10		3.2[1]
-
- -

[1] 在 Chrome 1.0, Android 2.1 与 WebKit 3.2 上实现 webkitTransitionEnd. Chrome 36 与 WebKit 7.0.6 上请使用标准事件 transitionend.

- -

[2] 在 Opera 10.5 上实现oTransitionEnd，从版本12开始实现 otransitionend， 从版本12.10开始实现 transitionend.

- -

参考

- - diff --git a/files/zh-cn/web/events/unhandledrejection/index.html b/files/zh-cn/web/events/unhandledrejection/index.html deleted file mode 100644 index 9c3286aa44..0000000000 --- a/files/zh-cn/web/events/unhandledrejection/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: unhandledrejection -slug: Web/Events/unhandledrejection -tags: - - API - - JavaScript - - Promise - - unhandledrejection - - 事件 - - 参考 -translation_of: Web/API/Window/unhandledrejection_event ---- -
{{APIRef("HTML DOM")}}
- -

当{{jsxref("Promise")}} 被 reject 且没有 reject 处理器的时候，会触发 unhandledrejection 事件；这可能发生在 {{domxref("window")}} 下，但也可能发生在 {{domxref("Worker")}} 中。 这对于调试回退错误处理非常有用。

- - - - - - - - - - - - - - - - - - - - -
是否冒泡No
是否可取消Yes
接口{{domxref("PromiseRejectionEvent")}}
事件处理器属性{{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}}
- -

使用备注

- -

unhandledrejection 继承自 {{domxref("PromiseRejectionEvent")}}，而 {{domxref("PromiseRejectionEvent")}} 又继承自 {{domxref("Event")}}。因此unhandledrejection 含有 PromiseRejectionEvent 和 Event 的属性和方法。

- -

例子

- -

Here we have a few examples showing ways you can make use of the unhandledrejection event. The event includes two useful pieces of information:

- -

我们将通过几个例子来展示 unhandledrejection 事件的使用方式。该事件主要包含两部分有用的信息：

- -
-
promise
-
The actual {{jsxref("Promise")}} which was rejected with no handler available to deal with the rejection.
-
特定的 {{jsxref("Promise")}} 被 reject 而没有被相应的异常处理方法所处理时
-
reason
-
The reason that would have been passed into the rejection handler if one had existed. See {{jsxref("Promise.catch", "catch()")}} for details.
-
将会传入异常处理方法中的错误原因（如果存在），查看 {{jsxref("Promise.catch", "catch()")}} 相关以获取更多细节。
-
- -

基本的异常上报

- -

此示例只是将有关未处理的 Promise rejection 信息打印到控制台。

- -
window.addEventListener("unhandledrejection", event => {
-  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
-});
-
- -

您还可以使用 {{domxref("WindowEventHandlers.onunhandledrejection", "onunhandledrejection")}} 事件处理程序属性来设置事件侦听器:

- -
window.onunhandledrejection = event => {
-  console.warn(`UNHANDLED PROMISE REJECTION: ${event.reason}`);
-};
-
- -

防止默认处理

- -

许多环境(例如 {{Glossary("Node.js")}} ) 默认情况下会向控制台打印未处理的 Promise rejections。您可以通过添加一个处理程序来防止 unhandledrejection 这种情况的发生，该处理程序除了您希望执行的任何其他任务之外，还可以调用 {{domxref("Event.preventDefault()", "preventDefault()")}} 来取消该事件，从而防止该事件冒泡并由运行时的日志代码处理。这种方法之所以有效，是因为 unhandledrejection 是可以取消的。

- -
window.addEventListener('unhandledrejection', function (event) {
-  // ...您的代码可以处理未处理的拒绝...
-
-  // 防止默认处理（例如将错误输出到控制台）
-
-  event.preventDefault();
-});
-
- -

说明

- - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'webappapis.html#unhandled-promise-rejections', 'unhandledrejection')}}{{Spec2('HTML WHATWG')}}Initial definition.
- -

浏览器兼容性

- - - -

{{Compat("api.Window.unhandledrejection_event")}}

- -

参考

- - - -

[1] 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.

diff --git a/files/zh-cn/web/events/unload/index.html b/files/zh-cn/web/events/unload/index.html deleted file mode 100644 index 2510b1f651..0000000000 --- a/files/zh-cn/web/events/unload/index.html +++ /dev/null @@ -1,125 +0,0 @@ ---- -title: unload -slug: Web/Events/unload -tags: - - Window - - events - - unload -translation_of: Web/API/Window/unload_event ---- -

{{APIRef}}

- -

当文档或一个子资源正在被卸载时, 触发 unload事件。

- - - - - - - - - - - - - - - - - - - - -
可冒泡（Bubbles）No
可取消（Cancelable）No
接口（Interface）{{domxref("Event")}}
事件处理程序属性（Event handler property）{{domxref("WindowEventHandlers/onunload", "onunload")}}
- -

它在下面两个事件后被触发:

- -
    -
  1. beforeunload (可取消默认行为的事件)
    2. -
  2. pagehide
    3. -
- -

文档处于以下状态：

- - - -

请注意unload事件也遵循文档树:父iframe会在子iframe卸载前卸载(参考下面的例子).

- -

示例

- -
<!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>
- -

下面是 child-frame.html的内容:

- -
<!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>
- -

当父iframe被卸载，事件将按console.log() 消息描述的顺序触发。

- -

规范

- - - - - - - - - - - - - - - - -
规范状态描述
{{SpecName('UI Events', '#event-type-unload', 'unload')}}{{Spec2('UI Events')}}
- -

浏览器兼容性

- - - -

{{Compat("api.Window.unload_event")}}

- -

参见

- - diff --git "a/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" "b/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" deleted file mode 100644 index 6a63ab9d5e..0000000000 --- "a/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/index.html" +++ /dev/null @@ -1,146 +0,0 @@ ---- -title: progress event -slug: Web/Events/进度条 -tags: - - API - - Event - - Reference - - Web - - XMLHttpRequest - - progress -translation_of: Web/API/XMLHttpRequest/progress_event ---- -

{{APIRef}}

- -

progress事件会在请求接收到数据的时候被周期性触发。

- - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("ProgressEvent")}}
Event handler property{{domxref("XMLHttpRequestEventTarget/onprogress", "onprogress")}}
- -

示例

- -

Live example

- -

HTML

- -
<div class="controls">
-    <input class="xhr success" type="button" name="xhr" value="Click to start XHR (success)" />
-    <input class="xhr error" type="button" name="xhr" value="Click to start XHR (error)" />
-    <input class="xhr abort" type="button" name="xhr" value="Click to start XHR (abort)" />
-</div>
-
-<textarea readonly class="event-log"></textarea>
- - - -

JS

- -
const xhrButtonSuccess = document.querySelector('.xhr.success');
-const xhrButtonError = document.querySelector('.xhr.error');
-const xhrButtonAbort = document.querySelector('.xhr.abort');
-const log = document.querySelector('.event-log');
-
-function handleEvent(e) {
-    log.textContent = log.textContent + `${e.type}: ${e.loaded} bytes transferred\n`;
-}
-
-function addListeners(xhr) {
-    xhr.addEventListener('loadstart', handleEvent);
-    xhr.addEventListener('load', handleEvent);
-    xhr.addEventListener('loadend', handleEvent);
-    xhr.addEventListener('progress', handleEvent);
-    xhr.addEventListener('error', handleEvent);
-    xhr.addEventListener('abort', handleEvent);
-}
-
-function runXHR(url) {
-    log.textContent = '';
-
-    const xhr = new XMLHttpRequest();
-    addListeners(xhr);
-    xhr.open("GET", url);
-    xhr.send();
-    return xhr;
-}
-
-xhrButtonSuccess.addEventListener('click', () => {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg');
-});
-
-xhrButtonError.addEventListener('click', () => {
-    runXHR('https://somewhere.org/i-dont-exist');
-});
-
-xhrButtonAbort.addEventListener('click', () => {
-    runXHR('https://mdn.mozillademos.org/files/16553/DgsZYJNXcAIPwzy.jpg').abort();
-});
- -

Result

- -

{{ EmbedLiveSample('Live_example', '100%', '150px') }}

- -

规范

- - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('XMLHttpRequest', '#event-xhr-progress')}}{{Spec2('XMLHttpRequest')}}
- -

浏览器兼容性

- - - -

{{Compat("api.XMLHttpRequest.progress_event")}}

- -

相关链接

- - -- cgit v1.2.3-54-g00ecf