From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/events/abort/index.html | 73 + 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/domlinkadded/index.html | 57 + 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/index.html | 2955 ++++++++++++++++++++ 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/mozafterpaint/index.html | 179 ++ 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/tabopen/index.html | 57 + 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 + 37 files changed, 7384 insertions(+) create mode 100644 files/zh-cn/web/events/abort/index.html create mode 100644 files/zh-cn/web/events/afterprint/index.html create mode 100644 files/zh-cn/web/events/afterscriptexecute/index.html create mode 100644 files/zh-cn/web/events/animationend/index.html create mode 100644 files/zh-cn/web/events/animationstart/index.html create mode 100644 files/zh-cn/web/events/beforeprint/index.html create mode 100644 files/zh-cn/web/events/beforescriptexecute/index.html create mode 100644 files/zh-cn/web/events/beforeunload/index.html create mode 100644 files/zh-cn/web/events/blur/index.html create mode 100644 files/zh-cn/web/events/change/index.html create mode 100644 files/zh-cn/web/events/compositionend/index.html create mode 100644 files/zh-cn/web/events/compositionstart/index.html create mode 100644 files/zh-cn/web/events/compositionupdate/index.html create mode 100644 files/zh-cn/web/events/copy/index.html create mode 100644 files/zh-cn/web/events/cut/index.html create mode 100644 files/zh-cn/web/events/domcontentloaded/index.html create mode 100644 files/zh-cn/web/events/domlinkadded/index.html create mode 100644 files/zh-cn/web/events/error/index.html create mode 100644 files/zh-cn/web/events/focus/index.html create mode 100644 files/zh-cn/web/events/focusout/index.html create mode 100644 files/zh-cn/web/events/icecandidate/index.html create mode 100644 files/zh-cn/web/events/index.html create mode 100644 files/zh-cn/web/events/input/index.html create mode 100644 files/zh-cn/web/events/load/index.html create mode 100644 files/zh-cn/web/events/loadend/index.html create mode 100644 files/zh-cn/web/events/loadstart/index.html create mode 100644 files/zh-cn/web/events/message/index.html create mode 100644 files/zh-cn/web/events/mousewheel/index.html create mode 100644 files/zh-cn/web/events/mozafterpaint/index.html create mode 100644 files/zh-cn/web/events/pageshow/index.html create mode 100644 files/zh-cn/web/events/paste/index.html create mode 100644 "files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" create mode 100644 files/zh-cn/web/events/tabopen/index.html create mode 100644 files/zh-cn/web/events/transitionend/index.html create mode 100644 files/zh-cn/web/events/unhandledrejection/index.html create mode 100644 files/zh-cn/web/events/unload/index.html create 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 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 +--- +

当一个资源的加载已中止时，将触发 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 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 +--- +

在相关联的文档已开始打印或打印预览已关闭之后, 触发 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 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 +--- +
{{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 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 +--- +

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

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

当相关联的文档即将打印或预览以进行打印时，将触发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 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 +--- +
{{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 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 +--- +

当浏览器窗口关闭或者刷新时，会触发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 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 +--- +

当一个元素失去焦点的时候 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 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 +--- +

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

当文本段落的组成完成或取消时, 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 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 +--- +

文本合成系统如 {{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 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 +--- +

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

当用户通过浏览器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 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 +--- +
+

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

当初始的 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/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 +--- +

当把一个<link>元素插入到文档中的时候,会触发DOMLinkAdded事件.

+ +

基本信息

+ +
+
规范
+
附加组件私有
+
接口
+
Event
+
是否冒泡
+
是
+
能否取消默认行为
+
能
+
目标
+
window, browser
+
默认行为
+
无
+
+ +

属性

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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.
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 +--- +
{{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 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 +--- +

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

当元素即将失去焦点时，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 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 +--- +

{{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/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 +--- +

发送DOM事件是为了将发生的相关事情通知代码。每个事件都是继承自{{DOMxRef("Event")}} 接口的对象，可以包括自定义的成员属性及函数用于获取事件发生时相关的更多信息。事件可以表示任何从基本的用户交互、到发生在渲染模型自动通知的任何事情。

+ +

本文提供了一个可以发送的事件的列表；一些是官方标准中的标准事件，另一些则是在特定浏览器内部使用的事件；例如，列出的 Mozilla 特定事件，使附加组件可以借助它们与浏览器进行交互。

+ +

最常见的类别

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

资源事件

+
事件名称何时触发
{{Event("error")}}资源加载失败时。
{{Event("abort")}}正在加载资源已经被中止时。
{{Event("load")}}资源及其相关资源已完成加载。
{{Event("beforeunload")}}window，document 及其资源即将被卸载。
{{Event("unload")}}文档或一个依赖资源正在被卸载。
+ +

网络事件

+ + + + + + + + + + + + + + + + + + +
事件名称何时触发
{{Event("online")}}浏览器已获得网络访问。
{{Event("offline")}}浏览器已失去网络访问。
+ + + + + + + + + + + + + + + + + + + +
+

焦点事件

+
事件名称何时触发
{{Event("focus")}}元素获得焦点（不会冒泡）。
{{Event("blur")}}元素失去焦点（不会冒泡）。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

WebSocket 事件

+
事件名称何时触发
openWebSocket 连接已建立。
message通过 WebSocket 接收到一条消息。
{{Event("error")}}WebSocket 连接异常被关闭（比如有些数据无法发送）。
closeWebSocket 连接已关闭。
+ + + + + + + + + + + + + + + + + + + + + + + +
+

会话历史事件

+
事件名称何时触发
{{Event("pagehide")}}A session history entry is being traversed from.
{{Event("pageshow")}}A session history entry is being traversed to.
{{Event("popstate")}}A session history entry is being navigated to (in certain cases).
+ + + + + + + + + + + + + + + + + + + + + + + +
+

CSS 动画事件

+
事件名称何时触发
{{Event("animationstart")}}某个 CSS 动画开始时触发。
{{Event("animationend")}}某个 CSS 动画完成时触发。
{{Event("animationiteration")}}某个 CSS 动画完成后重新开始时触发。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

CSS 过渡事件

+
事件名称何时触发
{{Event("transitionstart")}}A CSS transition has actually started (fired after any delay).
{{Event("transitioncancel")}}CSS过渡被取消
{{Event("transitionend")}}CSS过渡已经完成
{{Event("transitionrun")}}A CSS transition has begun running (fired before any delay starts).
+ + + + + + + + + + + + + + + + + + + +
+

表单事件

+
事件名称何时触发
{{Event("reset")}}点击重置按钮时
{{Event("submit")}}点击提交按钮
+ + + + + + + + + + + + + + + + + + + +
+

打印事件

+
时间名称何时触发
{{Event("beforeprint")}}打印机已经就绪时触发
{{Event("afterprint")}}打印机关闭时触发
+ + + + + + + + + + + + + + + + + + + + + + + +
+

文本写作事件

+
Event NameFired When
{{Event("compositionstart")}}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).
{{Event("compositionupdate")}}A character is added to a passage of text being composed.
{{Event("compositionend")}}The composition of a passage of text has been completed or canceled.
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

视图事件

+
Event NameFired When
{{Event("fullscreenchange")}}An element was turned to fullscreen mode or back to normal mode.
{{Event("fullscreenerror")}}It was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{Event("resize")}}The document view has been resized.
{{Event("scroll")}}The document view or an element has been scrolled.
+ + + + + + + + + + + + + + + + + + + + + + + +
+

剪贴板事件

+
Event NameFired When
{{Event("cut")}}已经剪贴选中的文本内容并且复制到了剪贴板。
{{Event("copy")}}已经把选中的文本内容复制到了剪贴板。
{{Event("paste")}}从剪贴板复制的文本内容被粘贴。
+ + + + + + + + + + + + + + + + + + + + + +
+

键盘事件

+
Event NameFired When
{{Event("keydown")}}按下任意按键。
{{Event("keypress")}}除 Shift、Fn、CapsLock 外的任意键被按住。（连续触发。）
{{Event("keyup")}}释放任意按键。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

鼠标事件

+
Event NameFired When
{{Event("auxclick")}}A pointing device button (ANY non-primary button) has been pressed and released on an element.
{{Event("click")}}在元素上按下并释放任意鼠标按键。
{{Event("contextmenu")}}右键点击（在右键菜单显示前触发）。
{{Event("dblclick")}}在元素上双击鼠标按钮。
{{Event("mousedown")}}在元素上按下任意鼠标按钮。
{{Event("mouseenter")}}指针移到有事件监听的元素内。
{{Event("mouseleave")}}指针移出元素范围外（不冒泡）。
{{Event("mousemove")}}指针在元素内移动时持续触发。
{{Event("mouseover")}}指针移到有事件监听的元素或者它的子元素内。
{{Event("mouseout")}}指针移出元素，或者移到它的子元素上。
{{Event("mouseup")}}在元素上释放任意鼠标按键。
{{Event("pointerlockchange")}}鼠标被锁定或者解除锁定发生时。
{{Event("pointerlockerror")}}可能因为一些技术的原因鼠标锁定被禁止时。
{{Event("select")}}有文本被选中。
{{Event("wheel")}}滚轮向任意方向滚动。
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

拖放事件

+
Event NameFired When
{{Event("drag")}}正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次）
{{Event("dragend")}}拖放操作结束。（松开鼠标按钮或按下 Esc 键）
{{Event("dragenter")}}被拖动的元素或文本选区移入有效释放目标区
{{Event("dragstart")}}用户开始拖动HTML元素或选中的文本
{{Event("dragleave")}}被拖动的元素或文本选区移出有效释放目标区
{{Event("dragover")}}被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次）
{{Event("drop")}}元素在有效释放目标区上释放
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

媒体事件

+
Event NameFired When
{{Event("audioprocess")}}The input buffer of a {{DOMxRef("ScriptProcessorNode")}} is ready to be processed.
{{Event("canplay")}}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.
{{Event("canplaythrough")}}The browser estimates it can play the media up to its end without stopping for content buffering.
{{Event("complete")}}The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.
{{Event("durationchange")}}The duration attribute has been updated.
{{Event("emptied")}}The media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{Event("ended")}}Playback has stopped because the end of the media was reached.
{{Event("loadeddata")}}The first frame of the media has finished loading.
{{Event("loadedmetadata")}}The metadata has been loaded.
{{Event("pause")}}Playback has been paused.
{{Event("play")}}Playback has begun.
{{Event("playing")}}Playback is ready to start after having been paused or delayed due to lack of data.
{{Event("ratechange")}}The playback rate has changed.
{{Event("seeked")}}A seek operation completed.
{{Event("seeking")}}A seek operation began.
{{Event("stalled")}}The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{Event("suspend")}}Media data loading has been suspended.
{{Event("timeupdate")}}The time indicated by the currentTime attribute has been updated.
{{Event("volumechange")}}The volume has changed.
{{Event("waiting")}}Playback has stopped because of a temporary lack of data.
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

进度事件

+
Event NameFired When
abortProgression has been terminated (not due to an error).
{{Event("error")}}Progression has failed.
loadProgression has been successful.
{{Event("loadend")}}Progress has stopped (after "error", "abort" or "load" have been dispatched).
{{Event("loadstart")}}Progress has begun.
{{Event("progress")}}In progress.
{{Event("timeout")}}Progression is terminated due to preset time expiring.
+ +

存储事件

+ +

{{Event("change")}} (see {{anch("Non-standard events")}})
+ {{Event("storage")}}

+ +

更新事件

+ +

{{Event("checking")}}
+ {{Event("downloading")}}
+ {{Event("error")}}
+ {{Event("noupdate")}}
+ {{Event("obsolete")}}
+ {{Event("updateready")}}

+ +

值变化事件

+ +

{{Event("broadcast")}}
+ {{Event("CheckboxStateChange")}}
+ {{Event("hashchange")}}
+ {{Event("input")}}
+ {{Event("RadioStateChange")}}
+ {{Event("readystatechange")}}
+ {{Event("ValueChange")}}

+ +

未分类的事件

+ +

{{Event("invalid")}}
+ message
+ message
+ open
+ show

+ +

不常见和非标准事件

+ +

Abortable Fetch events

+ + + + + + + + + + + + + + +
Event nameFired when
abortA DOM request is aborted, i.e. using {{DOMxRef("AbortController.abort()")}}.
+ +

WebVR events

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event nameFired when
{{Event("vrdisplayactivate")}}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.
{{Event("vrdisplayblur")}}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.
{{Event("vrdisplayconnect")}}when a compatible {{DOMxRef("VRDisplay")}} is connected to the computer.
{{Event("vrdisplaydeactivate")}}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.
{{Event("vrdisplaydisconnect")}}When a compatible {{DOMxRef("VRDisplay")}} is disconnected from the computer.
{{Event("vrdisplayfocus")}}When presentation to a {{DOMxRef("VRDisplay")}} has resumed after being blurred.
{{Event("vrdisplaypresentchange")}}The presenting state of a {{DOMxRef("VRDisplay")}} changes — i.e. goes from presenting to not presenting, or vice versa.
+ +

SVG 事件

+ +

{{Event("SVGAbort")}}
+ {{Event("SVGError")}}
+ {{Event("SVGLoad")}}
+ {{Event("SVGResize")}}
+ {{Event("SVGScroll")}}
+ {{Event("SVGUnload")}}
+ {{Event("SVGZoom")}}

+ +

数据库事件

+ +

abort
+ blocked
+ complete
+ {{Event("error")}}
+ success
+ upgradeneeded
+ versionchange

+ +

脚本事件

+ +

{{Event("afterscriptexecute")}}
+ {{Event("beforescriptexecute")}}

+ +

菜单事件

+ +

{{Event("DOMMenuItemActive")}}
+ {{Event("DOMMenuItemInactive")}}

+ +

窗口事件

+ +

close

+ +

弹出事件

+ +

{{Event("popuphidden")}}
+ {{Event("popuphiding")}}
+ {{Event("popupshowing")}}
+ {{Event("popupshown")}}

+ +

Tab 事件

+ +

{{Event("visibilitychange")}}

+ + + +

电池事件

+ +

{{Event("chargingchange")}}
+ {{Event("chargingtimechange")}}
+ {{Event("dischargingtimechange")}}
+ {{Event("levelchange")}}

+ +

呼叫事件

+ +

{{Event("alerting")}}
+ {{Event("busy")}}
+ {{Event("callschanged")}}
+ {{Event("cfstatechange")}}
+ {{Event("connected")}}
+ {{Event("connecting")}}
+ {{Event("dialing")}}
+ {{Event("disconnected")}}
+ {{Event("disconnecting")}}
+ {{Event("error_(Telephony)","error")}}
+ {{Event("held")}}, {{Event("holding")}}
+ {{Event("incoming")}}
+ {{Event("resuming")}}
+ {{Event("statechange")}}
+ {{Event("voicechange")}}

+ +

传感器事件

+ +

{{Event("compassneedscalibration")}}
+ {{Event("devicemotion")}}
+ {{Event("deviceorientation")}}
+ {{Event("orientationchange")}}

+ +

智能卡事件

+ +

{{Event("icccardlockerror")}}
+ {{Event("iccinfochange")}}
+ {{Event("smartcard-insert")}}
+ {{Event("smartcard-remove")}}
+ {{Event("stkcommand")}}
+ {{Event("stksessionend")}}
+ {{Event("cardstatechange")}}

+ +

短信和USSD事件

+ +

{{Event("delivered")}}
+ {{Event("received")}}
+ {{Event("sent")}}
+ {{Event("ussdreceived")}}

+ +

帧事件

+ +

{{Event("mozbrowserclose")}}
+ {{Event("mozbrowsercontextmenu")}}
+ {{Event("mozbrowsererror")}}
+ {{Event("mozbrowsericonchange")}}
+ {{Event("mozbrowserlocationchange")}}
+ {{Event("mozbrowserloadend")}}
+ {{Event("mozbrowserloadstart")}}
+ {{Event("mozbrowseropenwindow")}}
+ {{Event("mozbrowsersecuritychange")}}
+ {{Event("mozbrowsershowmodalprompt")}}
+ {{Event("mozbrowsertitlechange")}}

+ +

DOM变异事件

+ +

DOMAttributeNameChanged
+ DOMAttrModified
+ DOMCharacterDataModified
+ {{Event("DOMContentLoaded")}}
+ DOMElementNameChanged
+ DOMNodeInserted
+ DOMNodeInsertedIntoDocument
+ DOMNodeRemoved
+ DOMNodeRemovedFromDocument
+ DOMSubtreeModified

+ +

触摸事件

+ +

{{Event("touchcancel")}}
+ {{Event("touchend")}}
+ {{Event("touchmove")}}
+ {{Event("touchstart")}}

+ +

指针事件

+ +

{{Event("pointerover")}}
+ {{Event("pointerenter")}}
+ {{Event("pointerdown")}}
+ {{Event("pointermove")}}
+ {{Event("pointerup")}}
+ {{Event("pointercancel")}}
+ {{Event("pointerout")}}
+ {{Event("pointerleave")}}
+ {{Event("gotpointercapture")}}
+ {{Event("lostpointercapture")}}

+ +

标准事件

+ +

这些事件在官方Web规范中定义，并且应在各个浏览器中通用。 每个事件都和代表事件接收方的对象（由此您可以查到每个事件提供的数据），定义这个事件的标准或标准链接会一起列出。

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
事件名称事件类型规范触发时机...
{{Event("abort")}}{{DOMxRef("UIEvent")}}DOM L3资源载入已被中止
abort{{DOMxRef("ProgressEvent")}}ProgressandXMLHttpRequestProgress被终止(不是error造成的)
abort{{DOMxRef("Event")}}IndexedDB事务已被中止
{{Event("afterprint")}}{{DOMxRef("Event")}}HTML5相关文档已开始打印或打印预览已被关闭
{{Event("animationcancel")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS AnimationsA CSS animation has aborted.
{{Event("animationend")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animations完成一个CSS 动画
{{Event("animationiteration")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animations重复播放一个CSS 动画
{{Event("animationstart")}}{{DOMxRef("AnimationEvent")}} {{Experimental_Inline}}CSS Animations一个 CSS 动画已开始
{{Event("appinstalled")}}{{DOMxRef("Event")}}Web App ManifestA web application is successfully installed as a progressive web app.
{{Event("audioprocess")}}{{DOMxRef("AudioProcessingEvent")}} {{Deprecated_Inline}}{{SpecName('Web Audio API', '#AudioProcessingEvent', 'audioprocess')}}一个{{DOMxRef("ScriptProcessorNode")}} 的输入缓冲区可处理
{{Event("audioend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}用户代理捕捉到用以语音识别的音频
{{Event("audiostart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}用户代理开始捕捉用以语音识别的音频
{{Event("beforeprint")}}{{DOMxRef("Event")}}HTML5相关文档将要开始打印或准备打印预览
{{Event("beforeunload")}}{{DOMxRef("BeforeUnloadEvent")}}HTML5即将卸载 window，document 及其资源
{{Event("beginEvent")}}{{DOMxRef("TimeEvent")}}SVGA SMIL animation element begins.
blockedIndexedDBAn open connection to a database is blocking a versionchange transaction on the same database.
{{Event("blur")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element has lost focus (does not bubble).
{{Event("boundary")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a word or sentence boundary
{{Event("canplay")}}{{DOMxRef("Event")}}HTML5 mediaThe 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.
{{Event("canplaythrough")}}{{DOMxRef("Event")}}HTML5 mediaThe user agent can play the media up to its end without having to stop for further buffering of content.
{{Event("change")}}{{DOMxRef("Event")}}DOM L2, HTML5The change 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.
{{Event("chargingchange")}}{{DOMxRef("Event")}}Battery statusThe battery begins or stops charging.
{{Event("chargingtimechange")}}{{DOMxRef("Event")}}Battery statusThe chargingTime attribute has been updated.
{{Event("click")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device button has been pressed and released on an element.
close{{DOMxRef("Event")}}WebSocketA WebSocket connection has been closed.
completeIndexedDBA transaction successfully completed.
{{Event("complete")}}{{DOMxRef("OfflineAudioCompletionEvent")}} {{Deprecated_Inline}}{{SpecName('Web Audio API', '#OfflineAudioCompletionEvent-section', 'OfflineAudioCompletionEvent')}}The rendering of an {{DOMxRef("OfflineAudioContext")}} is terminated.
{{Event("compositionend")}}{{DOMxRef("CompositionEvent")}}DOM L3The composition of a passage of text has been completed or canceled.
{{Event("compositionstart")}}{{DOMxRef("CompositionEvent")}}DOM L3The composition of a passage of text is prepared (similar to keydown for a keyboard input, but works with other inputs such as speech recognition).
{{Event("compositionupdate")}}{{DOMxRef("CompositionEvent")}}DOM L3A character is added to a passage of text being composed.
{{Event("contextmenu")}}{{DOMxRef("MouseEvent")}}HTML5The right button of the mouse is clicked (before the context menu is displayed).
{{Event("copy")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}ClipboardThe text selection has been added to the clipboard.
{{Event("cut")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}ClipboardThe text selection has been removed from the document and added to the clipboard.
{{Event("dblclick")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device button is clicked twice on an element.
{{Event("devicechange")}}{{DOMxRef("Event")}}{{SpecName("Media Capture")}}A media device such as a camera, microphone, or speaker is connected or removed from the system.
{{Event("devicemotion")}}{{DOMxRef("DeviceMotionEvent")}} {{Experimental_Inline}}Device Orientation EventsFresh data is available from a motion sensor.
{{Event("deviceorientation")}}{{DOMxRef("DeviceOrientationEvent")}} {{Experimental_Inline}}Device Orientation EventsFresh data is available from an orientation sensor.
{{Event("dischargingtimechange")}}{{DOMxRef("Event")}}Battery statusThe dischargingTime attribute has been updated.
DOMActivate {{Deprecated_Inline}}{{DOMxRef("UIEvent")}}DOM L3A button, link or state changing element is activated (use {{Event("click")}} instead).
DOMAttributeNameChanged {{Deprecated_Inline}}{{DOMxRef("MutationNameEvent")}}DOM L3 RemovedThe name of an attribute changed (use mutation observers instead).
DOMAttrModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3The value of an attribute has been modified (use mutation observers instead).
DOMCharacterDataModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A text or another CharacterData has changed (use mutation observers instead).
{{Event("DOMContentLoaded")}}{{DOMxRef("Event")}}HTML5The document has finished loading (but not its dependent resources).
DOMElementNameChanged {{Deprecated_Inline}}{{DOMxRef("MutationNameEvent")}}DOM L3 RemovedThe name of an element changed (use mutation observers instead).
DOMFocusIn {{Deprecated_Inline}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element has received focus (use {{Event("focus")}} or {{Event("focusin")}} instead).
DOMFocusOut {{Deprecated_Inline}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element has lost focus (use {{Event("blur")}} or {{Event("focusout")}} instead).
DOMNodeInserted {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A node has been added as a child of another node (use mutation observers instead).
DOMNodeInsertedIntoDocument {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A node has been inserted into the document (use mutation observers instead).
DOMNodeRemoved {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A node has been removed from its parent node (use mutation observers instead).
DOMNodeRemovedFromDocument {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A node has been removed from the document (use mutation observers instead).
DOMSubtreeModified {{Deprecated_Inline}}{{DOMxRef("MutationEvent")}}DOM L3A change happened in the document (use mutation observers instead).
{{Event("drag")}}{{DOMxRef("DragEvent")}}HTML5An element or text selection is being dragged (every 350ms).
{{Event("dragend")}}{{DOMxRef("DragEvent")}}HTML5A drag operation is being ended (by releasing a mouse button or hitting the escape key).
{{Event("dragenter")}}{{DOMxRef("DragEvent")}}HTML5A dragged element or text selection enters a valid drop target.
{{Event("dragleave")}}{{DOMxRef("DragEvent")}}HTML5A dragged element or text selection leaves a valid drop target.
{{Event("dragover")}}{{DOMxRef("DragEvent")}}HTML5An element or text selection is being dragged over a valid drop target (every 350ms).
{{Event("dragstart")}}{{DOMxRef("DragEvent")}}HTML5The user starts dragging an element or text selection.
{{Event("drop")}}{{DOMxRef("DragEvent")}}HTML5An element is dropped on a valid drop target.
{{Event("durationchange")}}{{DOMxRef("Event")}}HTML5 mediaThe duration attribute has been updated.
{{Event("emptied")}}{{DOMxRef("Event")}}HTML5 mediaThe media has become empty; for example, this event is sent if the media has already been loaded (or partially loaded), and the load() method is called to reload it.
{{Event("end_(SpeechRecognition)","end")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has disconnected.
{{Event("end_(SpeechSynthesis)","end")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName("Web Speech API")}}The utterance has finished being spoken.
{{Event("ended")}}{{DOMxRef("Event")}}HTML5 mediaPlayback has stopped because the end of the media was reached.
{{Event("ended_(Web_Audio)", "ended")}}{{DOMxRef("Event")}}{{SpecName("Web Audio API")}}Playback has stopped because the end of the media was reached.
{{Event("endEvent")}}{{DOMxRef("TimeEvent")}}SVGA SMIL animation element ends.
{{Event("error")}}{{DOMxRef("UIEvent")}}DOM L3A resource failed to load.
{{Event("error")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestProgression has failed.
{{Event("error")}}{{DOMxRef("Event")}}WebSocketA WebSocket connection has been closed with prejudice (some data couldn't be sent for example).
{{Event("error")}}{{DOMxRef("Event")}}Server Sent EventsAn event source connection has been failed.
{{Event("error")}}{{DOMxRef("Event")}}IndexedDBA request caused an error and failed.
{{Event("error_(SpeechRecognitionError)","error")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}A speech recognition error occurs.
{{Event("error_(SpeechSynthesisError)","error")}}{{DOMxRef("SpeechSynthesisErrorEvent")}}{{SpecName('Web Speech API')}}An error occurs that prevents the utterance from being successfully spoken.
{{Event("focus")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element has received focus (does not bubble).
{{Event("focusin")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element is about to receive focus (bubbles).
{{Event("focusout")}}{{DOMxRef("FocusEvent")}} {{Experimental_Inline}}DOM L3An element is about to lose focus (bubbles).
{{Event("fullscreenchange")}}{{gecko_minversion_inline("9")}}{{DOMxRef("Event")}}Full ScreenAn element was turned to fullscreen mode or back to normal mode.
{{Event("fullscreenerror")}}{{gecko_minversion_inline("9")}}{{DOMxRef("Event")}}Full ScreenIt was impossible to switch to fullscreen mode for technical reasons or because the permission was denied.
{{Event("gamepadconnected")}}{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}GamepadA gamepad has been connected.
{{Event("gamepaddisconnected")}}{{DOMxRef("GamepadEvent")}} {{Experimental_Inline}}GamepadA gamepad has been disconnected.
{{Event("gotpointercapture")}}{{DOMxRef("PointerEvent")}}Pointer EventsElement receives pointer capture.
{{Event("hashchange")}}{{DOMxRef("HashChangeEvent")}}HTML5The fragment identifier of the URL has changed (the part of the URL after the #).
{{Event("lostpointercapture")}}{{DOMxRef("PointerEvent")}}Pointer EventsElement lost pointer capture.
{{Event("input")}}{{DOMxRef("Event")}}HTML5The value of an element changes or the content of an element with the attribute contenteditable is modified.
{{Event("invalid")}}{{DOMxRef("Event")}}HTML5A submittable element has been checked and doesn't satisfy its constraints.
{{Event("keydown")}}{{DOMxRef("KeyboardEvent")}}DOM L3A key is pressed down.
{{Event("keypress")}}{{DOMxRef("KeyboardEvent")}}DOM L3A key is pressed down and that key normally produces a character value (use input instead).
{{Event("keyup")}}{{DOMxRef("KeyboardEvent")}}DOM L3A key is released.
{{Event("languagechange")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('HTML5.1', '#dom-navigator-languages', 'NavigatorLanguage.languages') }}The user's preferred languages have changed.
{{Event("levelchange")}}{{DOMxRef("Event")}}Battery statusThe level attribute has been updated.
{{Event("load")}}{{DOMxRef("UIEvent")}}DOM L3A resource and its dependent resources have finished loading.
load{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestProgression has been successful.
{{Event("loadeddata")}}{{DOMxRef("Event")}}HTML5 mediaThe first frame of the media has finished loading.
{{Event("loadedmetadata")}}{{DOMxRef("Event")}}HTML5 mediaThe metadata has been loaded.
{{Event("loadend")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestProgress has stopped (after "error", "abort" or "load" have been dispatched).
{{Event("loadstart")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestProgress has begun.
{{Event("mark")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The spoken utterance reaches a named SSML "mark" tag.
message{{DOMxRef("MessageEvent")}}WebSocketA message is received through a WebSocket.
message{{DOMxRef("MessageEvent")}}Web WorkersA message is received from a Web Worker.
message{{DOMxRef("MessageEvent")}}Web MessagingA message is received from a child (i)frame or a parent window.
message{{DOMxRef("MessageEvent")}}Server Sent EventsA message is received through an event source.
{{Event("messageerror")}}{{DOMxRef("MessageEvent")}}{{DOMxRef("MessagePort")}}, Web Workers, Broadcast Channel, {{DOMxRef("Window")}}A message error is raised when a message is received by an object.
{{Event("message_(ServiceWorker)","message")}} {{Experimental_Inline}}{{DOMxRef("ServiceWorkerMessageEvent")}} or {{DOMxRef("ExtendableMessageEvent")}}, depending on context.Service WorkersA message is received from a service worker, or a message is received in a service worker from another context.
{{Event("mousedown")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device button (usually a mouse) is pressed on an element.
{{Event("mouseenter")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached.
{{Event("mouseleave")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached.
{{Event("mousemove")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device is moved over an element.
{{Event("mouseout")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device is moved off the element that has the listener attached or off one of its children.
{{Event("mouseover")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device is moved onto the element that has the listener attached or onto one of its children.
{{Event("mouseup")}}{{DOMxRef("MouseEvent")}}DOM L3A pointing device button is released over an element.
{{Event("nomatch")}} {{Experimental_Inline}}{{DOMxRef("SpeechRecognitionEvent")}}{{SpecName('Web Speech API')}}The speech recognition service returns a final result with no significant recognition.
{{Event("notificationclick")}}{{DOMxRef("NotificationEvent")}} {{Experimental_Inline}}{{SpecName('Web Notifications','#dom-serviceworkerglobalscope-onnotificationclick','onnotificationclick')}}A system notification spawned by {{DOMxRef("ServiceWorkerRegistration.showNotification()")}} has been clicked.
{{Event("offline")}}{{DOMxRef("Event")}}HTML5 offlineThe browser has lost access to the network.
{{Event("online")}}{{DOMxRef("Event")}}HTML5 offlineThe browser has gained access to the network (but particular websites might be unreachable).
open{{DOMxRef("Event")}}WebSocketA WebSocket connection has been established.
open{{DOMxRef("Event")}}Server Sent EventsAn event source connection has been established.
{{Event("orientationchange")}}{{DOMxRef("Event")}}Screen OrientationThe orientation of the device (portrait/landscape) has changed
{{Event("pagehide")}}{{DOMxRef("PageTransitionEvent")}}HTML5A session history entry is being traversed from.
{{Event("pageshow")}}{{DOMxRef("PageTransitionEvent")}}HTML5A session history entry is being traversed to.
{{Event("paste")}}{{DOMxRef("ClipboardEvent")}} {{Experimental_Inline}}ClipboardData has been transferred from the system clipboard to the document.
{{Event("pause")}}{{DOMxRef("Event")}}HTML5 mediaPlayback has been paused.
{{Event("pause_(SpeechSynthesis)", "pause")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance is paused part way through.
{{Event("pointercancel")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointer is unlikely to produce any more events.
{{Event("pointerdown")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointer enters the active buttons state.
{{Event("pointerenter")}}{{DOMxRef("PointerEvent")}}Pointer EventsPointing device is moved inside the hit-testing boundary.
{{Event("pointerleave")}}{{DOMxRef("PointerEvent")}}Pointer EventsPointing device is moved out of the hit-testing boundary.
{{Event("pointerlockchange")}}{{DOMxRef("Event")}}Pointer LockThe pointer was locked or released.
{{Event("pointerlockerror")}}{{DOMxRef("Event")}}Pointer LockIt was impossible to lock the pointer for technical reasons or because the permission was denied.
{{Event("pointermove")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointer changed coordinates.
{{Event("pointerout")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointing device moved out of hit-testing boundary or leaves detectable hover range.
{{Event("pointerover")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointing device is moved into the hit-testing boundary.
{{Event("pointerup")}}{{DOMxRef("PointerEvent")}}Pointer EventsThe pointer leaves the active buttons state.
{{Event("play")}}{{DOMxRef("Event")}}HTML5 mediaPlayback has begun.
{{Event("playing")}}{{DOMxRef("Event")}}HTML5 mediaPlayback is ready to start after having been paused or delayed due to lack of data.
{{Event("popstate")}}{{DOMxRef("PopStateEvent")}}HTML5A session history entry is being navigated to (in certain cases).
{{Event("progress")}}{{DOMxRef("ProgressEvent")}}Progress and XMLHttpRequestIn progress.
{{Event("push")}}{{DOMxRef("PushEvent")}} {{Experimental_Inline}}{{SpecName("Push API")}}A Service Worker has received a push message.
{{Event("pushsubscriptionchange")}}{{DOMxRef("PushEvent")}} {{Experimental_Inline}}{{SpecName("Push API")}}A PushSubscription has expired.
{{Event("ratechange")}}{{DOMxRef("Event")}}HTML5 mediaThe playback rate has changed.
{{Event("readystatechange")}}{{DOMxRef("Event")}}HTML5 and XMLHttpRequestThe readyState attribute of a document has changed.
{{Event("repeatEvent")}}{{DOMxRef("TimeEvent")}}SVGA SMIL animation element is repeated.
{{Event("reset")}}{{DOMxRef("Event")}}DOM L2, HTML5A form is reset.
{{Event("resize")}}{{DOMxRef("UIEvent")}}DOM L3The document view has been resized.
{{Event("resourcetimingbufferfull")}}{{DOMxRef("Performance")}}Resource TimingThe browser's resource timing buffer is full.
{{Event("result")}} {{Experimental_Inline}}{{DOMxRef("SpeechRecognitionEvent")}} {{Experimental_Inline}}{{SpecName('Web Speech API')}}The speech recognition service returns a result — a word or phrase has been positively recognized and this has been communicated back to the app.
{{Event("resume")}} {{Experimental_Inline}}{{DOMxRef("SpeechSynthesisEvent")}} {{Experimental_Inline}}{{SpecName('Web Speech API')}}A paused utterance is resumed.
{{Event("scroll")}}{{DOMxRef("UIEvent")}}DOM L3The document view or an element has been scrolled.
{{Event("seeked")}}{{DOMxRef("Event")}}HTML5 mediaA seek operation completed.
{{Event("seeking")}}{{DOMxRef("Event")}}HTML5 mediaA seek operation began.
{{Event("select")}}{{DOMxRef("UIEvent")}}DOM L3Some text is being selected.
{{Event("selectstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('Selection API')}}A selection just started.
{{Event("selectionchange")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{ SpecName('Selection API')}}The selection in the document has been changed.
{{Event("show")}}{{DOMxRef("MouseEvent")}}HTML5A contextmenu event was fired on/bubbled to an element that has a contextmenu attribute
{{Event("slotchange")}}{{DOMxRef("Event")}}{{ SpecName('DOM WHATWG')}}The node contents of a {{DOMxRef("HTMLSlotElement")}} ({{htmlelement("slot")}}) have changed.
{{Event("soundend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has stopped being detected.
{{Event("soundstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}Any sound — recognisable speech or not — has been detected.
{{Event("speechend")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}Speech recognised by the speech recognition service has stopped being detected.
{{Event("speechstart")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}Sound that is recognised by the speech recognition service as speech has been detected.
{{Event("stalled")}}{{DOMxRef("Event")}}HTML5 mediaThe user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
{{Event("start_(SpeechRecognition)","start")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}The speech recognition service has begun listening to incoming audio with intent to recognize grammars associated with the current SpeechRecognition.
{{Event("start_(SpeechSynthesis)","start")}}{{DOMxRef("SpeechSynthesisEvent")}}{{SpecName('Web Speech API')}}The utterance has begun to be spoken.
{{Event("storage")}}{{DOMxRef("StorageEvent")}}Web StorageA storage area (localStorage or sessionStorage) has changed.
{{Event("submit")}}{{DOMxRef("Event")}}DOM L2, HTML5A form is submitted.
success{{DOMxRef("Event")}}IndexedDBA request successfully completed.
{{Event("suspend")}}{{DOMxRef("Event")}}HTML5 mediaMedia data loading has been suspended.
{{Event("SVGAbort")}}{{DOMxRef("SVGEvent")}}SVGPage loading has been stopped before the SVG was loaded.
{{Event("SVGError")}}{{DOMxRef("SVGEvent")}}SVGAn error has occurred before the SVG was loaded.
{{Event("SVGLoad")}}{{DOMxRef("SVGEvent")}}SVGAn SVG document has been loaded and parsed.
{{Event("SVGResize")}}{{DOMxRef("SVGEvent")}}SVGAn SVG document is being resized.
{{Event("SVGScroll")}}{{DOMxRef("SVGEvent")}}SVGAn SVG document is being scrolled.
{{Event("SVGUnload")}}{{DOMxRef("SVGEvent")}}SVGAn SVG document has been removed from a window or frame.
{{Event("SVGZoom")}}{{DOMxRef("SVGZoomEvent")}}SVGAn SVG document is being zoomed.
{{Event("timeout")}}{{DOMxRef("ProgressEvent")}}XMLHttpRequest
{{Event("timeupdate")}}{{DOMxRef("Event")}}HTML5 mediaThe time indicated by the currentTime attribute has been updated.
{{Event("touchcancel")}}{{DOMxRef("TouchEvent")}}Touch EventsA touch point has been disrupted in an implementation-specific manners (too many touch points for example).
{{Event("touchend")}}{{DOMxRef("TouchEvent")}}Touch EventsA touch point is removed from the touch surface.
{{Event("touchmove")}}{{DOMxRef("TouchEvent")}}Touch EventsA touch point is moved along the touch surface.
{{Event("touchstart")}}{{DOMxRef("TouchEvent")}}Touch EventsA touch point is placed on the touch surface.
{{Event("transitionend")}}{{DOMxRef("TransitionEvent")}} {{Experimental_Inline}}CSS TransitionsA CSS transition has completed.
{{Event("unload")}}{{DOMxRef("UIEvent")}}DOM L3The document or a dependent resource is being unloaded.
upgradeneededIndexedDBAn attempt was made to open a database with a version number higher than its current version. A versionchange transaction has been created.
{{Event("userproximity")}}{{DOMxRef("UserProximityEvent")}} {{Experimental_Inline}}{{SpecName("Proximity Events")}}Fresh data is available from a proximity sensor (indicates whether the nearby object is near the device or not).
{{Event("voiceschanged")}} {{Experimental_Inline}}{{DOMxRef("Event")}}{{SpecName('Web Speech API')}}The list of {{DOMxRef("SpeechSynthesisVoice")}} objects that would be returned by the {{DOMxRef("SpeechSynthesis.getVoices()")}} method has changed (when the {{Event("voiceschanged")}} event fires.)
versionchangeIndexedDBA versionchange transaction completed.
{{Event("visibilitychange")}}{{DOMxRef("Event")}}Page visibilityThe content of a tab has become visible or has been hidden.
{{Event("volumechange")}}{{DOMxRef("Event")}}HTML5 mediaThe volume has changed.
{{Event("waiting")}}{{DOMxRef("Event")}}HTML5 mediaPlayback has stopped because of a temporary lack of data.
{{Event("wheel")}}{{DOMxRef("WheelEvent")}}DOM L3A wheel button of a pointing device is rotated in any direction.
+
+ +

非标准事件

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{Event("afterscriptexecute")}}{{DOMxRef("Event")}}Mozilla SpecificA script has been executed.
{{Event("beforescriptexecute")}}{{DOMxRef("Event")}}Mozilla SpecificA script is about to be executed.
{{Event("beforeinstallprompt")}}{{DOMxRef("Event")}}Chrome specificA user is prompted to save a web site to a home screen on mobile.
{{Event("cardstatechange")}}Firefox OS specificThe {{DOMxRef("MozMobileConnection.cardState")}} property changes value.
{{Event("change")}}{{DOMxRef("DeviceStorageChangeEvent")}}Firefox OS specificThis event is triggered each time a file is created, modified or deleted on a given storage area.
{{Event("connectionInfoUpdate")}}Firefox OS specificThe informations about the signal strength and the link speed have been updated.
{{Event("cfstatechange")}}Firefox OS specificThe call forwarding state changes.
{{Event("datachange")}}Firefox OS specificThe {{DOMxRef("MozMobileConnection.data")}} object changes values.
{{Event("dataerror")}}Firefox OS specificThe {{DOMxRef("MozMobileConnection.data")}} object receive an error from the RIL.
{{Event("DOMMouseScroll")}}{{Deprecated_Inline}}Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of lines). (use {{Event("wheel")}} instead)
dragdrop {{Deprecated_Inline}}DragEventMozilla specificAn element is dropped (use {{Event("drop")}} instead).
dragexit {{Deprecated_Inline}}DragEventMozilla specificA drag operation is being ended(use {{Event("dragend")}} instead).
draggesture {{Deprecated_Inline}}DragEventMozilla specificThe user starts dragging an element or text selection (use {{Event("dragstart")}} instead).
{{Event("icccardlockerror")}}Firefox OS specificthe {{DOMxRef("MozMobileConnection.unlockCardLock()")}} or {{DOMxRef("MozMobileConnection.setCardLock()")}} methods fails.
{{Event("iccinfochange")}}Firefox OS specificThe {{DOMxRef("MozMobileConnection.iccInfo")}} object changes.
{{Event("localized")}}Mozilla SpecificThe page has been localized using data-l10n-* attributes.
{{Event("mousewheel")}} {{Deprecated_Inline}}IE inventedThe wheel button of a pointing device is rotated.
{{Event("MozAudioAvailable")}}{{DOMxRef("Event")}}Mozilla specificThe audio buffer is full and the corresponding raw samples are available.
MozBeforeResize {{Obsolete_Inline}}Mozilla specificA window is about to be resized.
{{Event("mozbrowseractivitydone")}}Firefox OS Browser API-specificSent when some activity has been completed (complete description TBD.)
{{Event("mozbrowserasyncscroll")}}Firefox OS Browser API-specificSent when the scroll position within a browser {{HTMLElement("iframe")}} changes.
{{Event("mozbrowseraudioplaybackchange")}}Firefox OS Browser API-specificSent when audio starts or stops playing within the browser {{HTMLElement("iframe")}} content.
{{Event("mozbrowsercaretstatechanged")}}Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes.
{{Event("mozbrowserclose")}}Firefox OS Browser API-specificSent when window.close() is called within a browser {{HTMLElement("iframe")}}.
{{Event("mozbrowsercontextmenu")}}Firefox OS Browser API-specificSent when a browser {{HTMLElement("iframe")}} try to open a context menu.
{{Event("mozbrowserdocumentfirstpaint")}}Firefox OS Browser API-specificSent when a new paint occurs on any document in the browser {{HTMLElement("iframe")}}.
{{Event("mozbrowsererror")}}Firefox OS Browser API-specificSent when an error occured while trying to load a content within a browser iframe
{{Event("mozbrowserfindchange")}}Firefox OS Browser API-specificSent when a search operation is performed on the browser {{HTMLElement("iframe")}} content (see HTMLIFrameElement search methods.)
{{Event("mozbrowserfirstpaint")}}Firefox OS Browser API-specificSent when the {{HTMLElement("iframe")}} paints content for the first time (this doesn't include the initial paint from about:blank.)
{{Event("mozbrowsericonchange")}}Firefox OS Browser API-specificSent when the favicon of a browser iframe changes.
{{Event("mozbrowserlocationchange")}}Firefox OS Browser API-specificSent when an browser iframe's location changes.
{{Event("mozbrowserloadend")}}Firefox OS Browser API-specificSent when the browser iframe has finished loading all its assets.
{{Event("mozbrowserloadstart")}}Firefox OS Browser API-specificSent when the browser iframe starts to load a new page.
{{Event("mozbrowsermanifestchange")}}Firefox OS Browser API-specificSent 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.
{{Event("mozbrowsermetachange")}}Firefox OS Browser API-specificSent when a {{htmlelement("meta")}} elelment is added to, removed from or changed in the browser {{HTMLElement("iframe")}}'s content.
{{Event("mozbrowseropensearch")}}Firefox OS Browser API-specificSent when a link to a search engine is found.
{{Event("mozbrowseropentab")}}Firefox OS Browser API-specificSent 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 ctrl/cmd + click.)
{{Event("mozbrowseropenwindow")}}Firefox OS Browser API-specificSent when {{DOMxRef("window.open()")}} is called within a browser iframe.
{{Event("mozbrowserresize")}}Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}}'s window size has changed.
{{Event("mozbrowserscroll")}}Firefox OS Browser API-specificSent when the browser {{HTMLElement("iframe")}} content scrolls.
{{Event("mozbrowserscrollareachanged")}}Firefox OS Browser API-specificSent 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.)
{{Event("mozbrowserscrollviewchange")}}Firefox OS Browser API-specificSent when asynchronous scrolling (i.e. APCZ) starts or stops.
{{Event("mozbrowsersecuritychange")}}Firefox OS Browser API-specificSent when the SSL state changes within a browser iframe.
{{Event("mozbrowserselectionstatechanged")}}Firefox OS Browser API-specificSent when the text selected inside the browser {{HTMLElement("iframe")}} content changes. Note that this is deprecated, and newer implementations use {{Event("mozbrowsercaretstatechanged")}} instead.
{{Event("mozbrowsershowmodalprompt")}}Firefox OS Browser API-specificSent when {{DOMxRef("window.alert","alert()")}}, {{DOMxRef("window.confirm","confirm()")}} or {{DOMxRef("window.prompt","prompt()")}} are called within a browser iframe
{{Event("mozbrowsertitlechange")}}Firefox OS Browser API-specificSent when the document.title changes within a browser iframe.
{{Event("mozbrowserusernameandpasswordrequired")}}Firefox OS Browser API-specificSent when an HTTP authentification is requested.
{{Event("mozbrowservisibilitychange")}}Firefox OS Browser API-specificSent when the visibility state of the current browser iframe {{HTMLElement("iframe")}} changes, for example due to a call to {{DOMxRef("HTMLIFrameElement.setVisible","setVisible()")}}.
{{Event("MozGamepadButtonDown")}}To be specifiedA gamepad button is pressed down.
{{Event("MozGamepadButtonUp")}}To be specifiedA gamepad button is released.
{{Event("MozMousePixelScroll")}} {{Deprecated_Inline}}Mozilla specificThe wheel button of a pointing device is rotated (detail attribute is a number of pixels). (use wheel instead)
{{Event("MozOrientation")}} {{Deprecated_Inline}}Mozilla specificFresh data is available from an orientation sensor (see deviceorientation).
{{Event("MozScrolledAreaChanged")}}{{DOMxRef("UIEvent")}}Mozilla specificThe document view has been scrolled or resized.
{{Event("moztimechange")}}Mozilla specificThe time of the device has been changed.
MozTouchDown {{Deprecated_Inline}}Mozilla specificA touch point is placed on the touch surface (use touchstart instead).
MozTouchMove {{Deprecated_Inline}}Mozilla specificA touch point is moved along the touch surface (use touchmove instead).
MozTouchUp {{Deprecated_Inline}}Mozilla specificA touch point is removed from the touch surface (use touchend instead).
{{Event("alerting")}}{{DOMxRef("CallEvent")}}To be specifiedThe correspondent is being alerted (his/her phone is ringing).
{{Event("busy")}}{{DOMxRef("CallEvent")}}To be specifiedThe line of the correspondent is busy.
{{Event("callschanged")}}{{DOMxRef("CallEvent")}}To be specifiedA call has been added or removed from the list of current calls.
onconnected {{Event("connected")}}{{DOMxRef("CallEvent")}}To be specifiedA call has been connected.
{{Event("connecting")}}{{DOMxRef("CallEvent")}}To be specifiedA call is about to connect.
{{Event("delivered")}}{{DOMxRef("SMSEvent")}}To be specifiedAn SMS has been successfully delivered.
{{Event("dialing")}}{{DOMxRef("CallEvent")}}To be specifiedThe number of a correspondent has been dialed.
{{Event("disabled")}}Firefox OS specificWifi has been disabled on the device.
{{Event("disconnected")}}{{DOMxRef("CallEvent")}}To be specifiedA call has been disconnected.
{{Event("disconnecting")}}{{DOMxRef("CallEvent")}}To be specifiedA call is about to disconnect.
{{Event("enabled")}}Firefox OS specificWifi has been enabled on the device.
{{Event("error_(Telephony)","error")}}{{DOMxRef("CallEvent")}}To be specifiedAn error occurred.
{{Event("held")}}{{DOMxRef("CallEvent")}}To be specifiedA call has been held.
{{Event("holding")}}{{DOMxRef("CallEvent")}}To be specifiedA call is about to be held.
{{Event("incoming")}}{{DOMxRef("CallEvent")}}To be specifiedA call is being received.
{{Event("received")}}{{DOMxRef("SMSEvent")}}To be specifiedAn SMS has been received.
{{Event("resuming")}}{{DOMxRef("CallEvent")}}To be specifiedA call is about to resume.
{{Event("sent")}}{{DOMxRef("SMSEvent")}}To be specifiedAn SMS has been sent.
{{Event("statechange")}}{{DOMxRef("CallEvent")}}To be specifiedThe state of a call has changed.
{{Event("statuschange")}}Firefox OS specificThe status of the Wifi connection changed.
{{Event("overflow")}}{{DOMxRef("UIEvent")}}Mozilla specificAn element has been overflowed by its content or has been rendered for the first time in this state (only works for elements styled with overflow != visible).
{{Event("smartcard-insert")}}Mozilla specificA smartcard has been inserted.
{{Event("smartcard-remove")}}Mozilla specificA smartcard has been removed.
{{Event("stkcommand")}}Firefox OS specificThe STK Proactive Command is issued from ICC.
{{Event("stksessionend")}}Firefox OS specificThe STK Session is terminated by ICC.
{{Event("touchenter")}}{{DOMxRef("TouchEvent")}}Touch Events Removed
{{Event("touchleave")}}{{DOMxRef("TouchEvent")}}Touch Events Removed
{{Event("underflow")}}{{DOMxRef("UIEvent")}}Mozilla specificAn element is no longer overflowed by its content (only works for elements styled with overflow != visible).
uploadprogress {{Deprecated_Inline}}{{DOMxRef("ProgressEvent")}}Mozilla SpecificUpload is in progress (see {{Event("progress")}}).
+

{{Event("ussdreceived")}}

+ 		Firefox OS specificA new USSD message is received
{{Event("voicechange")}}Firefox OS specificThe {{DOMxRef("MozMobileConnection.voice")}} object changes values.
{{Event("msContentZoom")}}Microsoft specific
{{Event("MSManipulationStateChanged")}}Microsoft specific
{{Event("MSPointerHover")}} {{Deprecated_Inline}}Microsoft specific
+
+ +

Mozilla 特定事件

+ +
+

注意：这些事件不会暴露给 Web 内容使用，只能在 chrome 内容的上下文中使用。

+
+ +

XUL 事件

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
{{Event("broadcast")}}XULAn observer noticed a change to the attributes of a watched broadcaster.
{{Event("CheckboxStateChange")}}XULThe state of a checkbox has been changed either by a user action or by a script (useful for accessibility).
closeXULThe close button of the window has been clicked.
{{Event("command")}}XULAn element has been activated.
{{Event("commandupdate")}}XULA command update occurred on a commandset element.
{{Event("DOMMenuItemActive")}}XULA menu or menuitem has been hovered or highlighted.
{{Event("DOMMenuItemInactive")}}XULA menu or menuitem is no longer hovered or highlighted.
{{Event("popuphidden")}}PopupEventXULA menupopup, panel or tooltip has been hidden.
{{Event("popuphiding")}}PopupEventXULA menupopup, panel or tooltip is about to be hidden.
{{Event("popupshowing")}}PopupEventXULA menupopup, panel or tooltip is about to become visible.
{{Event("popupshown")}}PopupEventXULA menupopup, panel or tooltip has become visible.
{{Event("RadioStateChange")}}XULThe state of a radio has been changed either by a user action or by a script (useful for accessibility).
{{Event("ValueChange")}}XULThe value of an element has changed (a progress bar for example, useful for accessibility).
+
+ +

附加组件特定事件

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
MozSwipeGestureAddons specificA touch point is swiped across the touch surface
MozMagnifyGestureStartAddons specificTwo touch points start to move away from each other.
MozMagnifyGestureUpdateAddons specificTwo touch points move away from each other (after a MozMagnifyGestureStart).
MozMagnifyGestureAddons specificTwo touch points moved away from each other (after a sequence of MozMagnifyGestureUpdate).
MozRotateGestureStartAddons specificTwo touch points start to rotate around a point.
MozRotateGestureUpdateAddons specificTwo touch points rotate around a point (after a MozRotateGestureStart).
MozRotateGestureAddons specificTwo touch points rotate around a point (after a sequence of MozRotateGestureUpdate).
MozTapGestureAddons specificTwo touch points are tapped on the touch surface.
MozPressTapGestureAddons specificA "press-tap" gesture happened on the touch surface (first finger down, second finger down, second finger up, first finger up).
MozEdgeUIGestureAddons specificA touch point is swiped across the touch surface to invoke the edge UI (Win8 only).
MozAfterPaintAddons specificContent has been repainted.
DOMPopupBlockedAddons specificA popup has been blocked
DOMWindowCreatedAddons specificA window has been created.
DOMWindowCloseAddons specificA window is about to be closed.
DOMTitleChangedAddons specifcThe title of a window has changed.
DOMLinkAddedAddons specifcA link has been added a document.
DOMLinkRemovedAddons specifcA link has been removed inside from a document.
DOMMetaAddedAddons specificA meta element has been added to a document.
DOMMetaRemovedAddons specificA meta element has been removed from a document.
DOMWillOpenModalDialogAddons specificA modal dialog is about to open.
DOMModalDialogClosedAddons specificA modal dialog has been closed.
DOMAutoCompleteAddons specificThe content of an element has been auto-completed.
DOMFrameContentLoadedAddons specificThe frame has finished loading (but not its dependent resources).
AlertActiveAddons specificA notification element is shown.
AlertCloseAddons specificA notification element is closed.
fullscreenAddons specificBrowser fullscreen mode has been entered or left.
sizemodechangeAddons specificWindow has entered/left fullscreen mode, or has been minimized/unminimized.
MozEnteredDomFullscreenAddons specificDOM fullscreen mode has been entered.
SSWindowClosingAddons specificThe session store will stop tracking this window.
SSTabClosingAddons specificThe session store will stop tracking this tab.
SSTabRestoringAddons specificA tab is about to be restored.
SSTabRestoredAddons specificA tab has been restored.
SSWindowStateReadyAddons specificA window state has switched to "ready".
SSWindowStateBusyAddons specificA window state has switched to "busy".
TabOpenAddons specificA tab has been opened.
TabCloseAddons specificA tab has been closed.
TabSelectAddons specificA tab has been selected.
TabShowAddons specificA tab has been shown.
TabHideAddons specificA tab has been hidden.
TabPinnedAddons specificA tab has been pinned.
TabUnpinnedAddons specificA tab has been unpinned.
+
+ +

开发者工具特定事件

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Event NameEvent TypeSpecificationFired when...
CssRuleViewRefresheddevtools specificThe "Rules" view of the style inspector has been updated.
CssRuleViewChangeddevtools specificThe "Rules" view of the style inspector has been changed.
CssRuleViewCSSLinkClickeddevtools specificA link to a CSS file has been clicked in the "Rules" view of the style inspector.
+
+ +

参见

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

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

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

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

当程序开始加载时，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 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 +--- +
{{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 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 +--- +

{{ 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/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 +--- +

MozAfterPaint事件在页面呈现给用户屏幕时触发，并提供页面重绘的信息，主要应用于页面优化审查。

+ +

注意MozAfterPaint并非在页面重绘时立即触发，而是在重绘并合成后发生。这意味着有部分内容触发时已经呈现给客户。

+ +
Note: + + +
+ +

General info

+ +
+
Specification
+
Add-ons specific
+
Interface
+
Event
+
Bubbles
+
Yes
+
Cancelable
+
Yes
+
Target
+
window
+
Default Action
+
None
+
+ +

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}}booleanDoes the event normally bubble?
cancelable {{readonlyInline}}booleanIs it possible to cancel the event?
boundingClientRectclientRectThe equivalent of {{domxref("Element.getBoundingClientRect", "getBoundingClientRect()")}} for the repainted zone. Read only.
clientRectsclientRectListThe equivalent of {{domxref("Element.getClientRects", "getClientRects()")}}  for the repainted zone. Read only.
transactionIduint64_tThe transaction id of the composition that just occurred to present something to the user. Read only.
+ +

Example

+ +

This example highlights elements that get repainted while hovering the document with a cursor.

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

This example is for measuring how long something took to paint to the user.

+ +
// 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();
+
+
+ +

See also

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

当一条会话历史记录被执行的时候将会触发页面显示(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 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 +--- +

 {{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" new file mode 100644 index 0000000000..a4f95498ad --- /dev/null +++ "b/files/zh-cn/web/events/readystatechange\344\272\213\344\273\266/index.html" @@ -0,0 +1,149 @@ +--- +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/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 +--- +

TabOpen事件在一个新的标签页打开时触发.

+ +

常规信息

+ +
+
规范
+
附加组件特有
+
接口
+
Event
+
是否冒泡
+
是
+
能否取消默认行为
+
否
+
目标
+
tab
+
默认行为
+
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.
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 +--- +
{{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 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 +--- +
{{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 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 +--- +

{{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" new file mode 100644 index 0000000000..6a63ab9d5e --- /dev/null +++ "b/files/zh-cn/web/events/\350\277\233\345\272\246\346\235\241/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 +--- +

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