From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- .../globaleventhanders.ontouchmove/index.html | 124 ++++++ files/zh-cn/web/api/globaleventhandlers/index.html | 489 +++++++++++++++++++++ .../web/api/globaleventhandlers/onabort/index.html | 102 +++++ .../onanimationcancel/index.html | 248 +++++++++++ .../globaleventhandlers/onanimationend/index.html | 109 +++++ .../onanimationiteration/index.html | 228 ++++++++++ .../api/globaleventhandlers/onauxclick/index.html | 115 +++++ .../web/api/globaleventhandlers/onblur/index.html | 81 ++++ .../api/globaleventhandlers/oncancel/index.html | 60 +++ .../api/globaleventhandlers/oncanplay/index.html | 47 ++ .../oncanplaythrough/index.html | 25 ++ .../api/globaleventhandlers/onchange/index.html | 43 ++ .../web/api/globaleventhandlers/onclick/index.html | 95 ++++ .../web/api/globaleventhandlers/onclose/index.html | 67 +++ .../globaleventhandlers/oncontextmenu/index.html | 28 ++ .../api/globaleventhandlers/oncuechange/index.html | 53 +++ .../api/globaleventhandlers/ondblclick/index.html | 71 +++ .../web/api/globaleventhandlers/ondrag/index.html | 111 +++++ .../api/globaleventhandlers/ondragleave/index.html | 196 +++++++++ .../web/api/globaleventhandlers/ondrop/index.html | 159 +++++++ .../web/api/globaleventhandlers/onended/index.html | 48 ++ .../web/api/globaleventhandlers/onerror/index.html | 114 +++++ .../web/api/globaleventhandlers/onfocus/index.html | 27 ++ .../api/globaleventhandlers/onformdata/index.html | 85 ++++ .../ongotpointercapture/index.html | 115 +++++ .../web/api/globaleventhandlers/oninput/index.html | 81 ++++ .../api/globaleventhandlers/oninvalid/index.html | 98 +++++ .../api/globaleventhandlers/onkeydown/index.html | 25 ++ .../api/globaleventhandlers/onkeypress/index.html | 109 +++++ .../web/api/globaleventhandlers/onkeyup/index.html | 31 ++ .../web/api/globaleventhandlers/onload/index.html | 79 ++++ .../globaleventhandlers/onloadeddata/index.html | 51 +++ .../onloadedmetadata/index.html | 53 +++ .../api/globaleventhandlers/onloadend/index.html | 47 ++ .../api/globaleventhandlers/onloadstart/index.html | 66 +++ .../onlostpointercapture/index.html | 121 +++++ .../api/globaleventhandlers/onmousedown/index.html | 25 ++ .../globaleventhandlers/onmouseenter/index.html | 50 +++ .../globaleventhandlers/onmouseleave/index.html | 48 ++ .../api/globaleventhandlers/onmousemove/index.html | 158 +++++++ .../api/globaleventhandlers/onmouseout/index.html | 67 +++ .../api/globaleventhandlers/onmouseover/index.html | 66 +++ .../api/globaleventhandlers/onmouseup/index.html | 25 ++ .../web/api/globaleventhandlers/onpause/index.html | 46 ++ .../web/api/globaleventhandlers/onplay/index.html | 67 +++ .../api/globaleventhandlers/onplaying/index.html | 50 +++ .../globaleventhandlers/onpointercancel/index.html | 129 ++++++ .../globaleventhandlers/onpointerdown/index.html | 131 ++++++ .../globaleventhandlers/onpointerenter/index.html | 127 ++++++ .../globaleventhandlers/onpointerleave/index.html | 80 ++++ .../globaleventhandlers/onpointermove/index.html | 134 ++++++ .../globaleventhandlers/onpointerout/index.html | 79 ++++ .../globaleventhandlers/onpointerover/index.html | 82 ++++ .../api/globaleventhandlers/onpointerup/index.html | 127 ++++++ .../web/api/globaleventhandlers/onreset/index.html | 63 +++ .../api/globaleventhandlers/onresize/index.html | 71 +++ .../api/globaleventhandlers/onscroll/index.html | 126 ++++++ .../api/globaleventhandlers/onselect/index.html | 59 +++ .../onselectionchange/index.html | 104 +++++ .../globaleventhandlers/onselectstart/index.html | 104 +++++ .../api/globaleventhandlers/onsubmit/index.html | 101 +++++ .../globaleventhandlers/ontouchcancel/index.html | 126 ++++++ .../api/globaleventhandlers/ontouchmove/index.html | 128 ++++++ .../globaleventhandlers/ontouchstart/index.html | 126 ++++++ .../ontransitioncancel/index.html | 147 +++++++ .../globaleventhandlers/ontransitionend/index.html | 120 +++++ .../web/api/globaleventhandlers/onwheel/index.html | 182 ++++++++ .../index.html" | 52 +++ 68 files changed, 6601 insertions(+) create mode 100644 files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onabort/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onanimationcancel/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onanimationend/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onanimationiteration/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onauxclick/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oncancel/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oncanplay/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oncanplaythrough/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oncuechange/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ondblclick/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ondrag/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ondrop/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onended/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onerror/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onformdata/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oninput/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onkeypress/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onload/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onloadedmetadata/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onloadend/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmousedown/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmouseenter/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmouseleave/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmousemove/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmouseout/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmouseover/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onmouseup/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpause/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onplay/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onplaying/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointercancel/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerdown/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerenter/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerleave/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointermove/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerout/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerover/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onpointerup/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onreset/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onresize/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onselectionchange/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onselectstart/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onsubmit/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ontouchcancel/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ontouchmove/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ontouchstart/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/ontransitionend/index.html create mode 100644 files/zh-cn/web/api/globaleventhandlers/onwheel/index.html create mode 100644 "files/zh-cn/web/api/globaleventhandlers/\346\227\266\351\225\277\346\224\271\345\217\230/index.html" (limited to 'files/zh-cn/web/api/globaleventhandlers') diff --git a/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html b/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html new file mode 100644 index 0000000000..6babcd24f3 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/globaleventhanders.ontouchmove/index.html @@ -0,0 +1,124 @@ +--- +title: GlobalEventHandlers.ontouchmove +slug: Web/API/GlobalEventHandlers/GlobalEventHanders.ontouchmove +translation_of: Web/API/GlobalEventHandlers/ontouchmove +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.

+ +
+

注意：这个属性还没有正式的标准。它在 {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 说明书里被规定且不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性没有被广泛应用。

+
+ +

Syntax

+ +
var moveHandler = someElement.ontouchmove;
+
+ +

Return value

+ +
+
moveHandler
+
The touchmove event handler for element someElement.
+
+ +

Example

+ +

This example shows two ways to use ontouchmove to set an element's touchmove event handler.

+ +
<html>
+<script>
+function moveTouch(ev) {
+ // Process the event
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchmove = moveTouch;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" ontouchmove="moveTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}{{Spec2('Touch Events 2')}}Non-stable version.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support     
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support        
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/index.html b/files/zh-cn/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..3ddd4d9a93 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/index.html @@ -0,0 +1,489 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +translation_of: Web/API/GlobalEventHandlers +--- +
+
{{ ApiRef("HTML DOM") }}
+
+ +

GlobalEventHandlers 描述了一系列web worker的事件接口 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, 或 {{domxref("WorkerGlobalScope")}}。这里面的每一个接口都可以添加更多的事件句柄。

+ +
+

Note:GlobalEventHandlers 是一个混入对象(mixin)而不是一个真正的接口，所以无法创建直接基于GlobalEventHandlers 的对象。

+
+ +

属性

+ +

除了下面的事件句柄外，此接口不包含任何其他属性。

+ +

Event handlers

+ +

这些事件定义在 {{domxref("GlobalEventHandlers")}} 中, 并被混入和实现在{{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}上，任意html元素、document对象，window对象上均可以使用它提供的属性， 即时是全局的{{domxref("WorkerGlobalScope")}}。

+ +
+
{{domxref("GlobalEventHandlers.onabort")}}
+
这是一个事件句柄 {{domxref("EventHandler")}} ，当停止{{event("abort")}} 事件触发时会被调用。
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
这是一个事件句柄 {{domxref("EventHandler")}} ，当 CSS 动画取消{{event("animationcancel")}}事件触发时被调用，这表示某个正在执行的CSS动画被取消了。
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
这是一个事件句柄 {{domxref("EventHandler")}} ，当 CSS 动画播放完成{{event("animationend")}} 事件触发时被调用，这表示某个CSS动画已经播放完成了。
+
{{domxref("GlobalEventHandlers.onblur")}}
+
这是一个事件句柄 {{domxref("EventHandler")}} ，当失去焦点 {{event("blur")}} 事件触发时会被调用。
+
{{domxref("GlobalEventHandlers.onerror")}}
+
这是一个错误发生时的事件句柄 {{domxref("EventHandler")}} ，当发生错误{{event("error")}} 事件时会被调用。
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.
+
{{domxref("GlobalEventHandlers.onchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.
+
{{domxref("GlobalEventHandlers.onclose")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.
+
{{domxref("GlobalEventHandlers.onended")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninput")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onload")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onmousewheel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.
+
{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpause")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplay")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onreset")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.
+
{{domxref("GlobalEventHandlers.onselect")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.
+
{{domxref("GlobalEventHandlers.onshow")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.
+
+ +

Methods

+ +

This interface defines no method.

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}Adds onpointerlockchange and onpointerlockerror on {{domxref("Document")}}. It is experimentally implemented on GlobalEventHandlers.
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}No change since the latest snapshot, {{SpecName("HTML5.1")}}.
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName("HTML WHATWG")}}. Added onsort since the {{SpecName("HTML 5")}} snapshot.
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}Snapshot of {{SpecName("HTML WHATWG")}}. Creation of GlobalEventHandlers (properties where on the target before it).
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoDesktop(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoDesktop(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoDesktop(10)}}30.05.517{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort {{experimental_inline}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoDesktop(10)}} as onmozpointerlockchange, onmozpointerlockerror{{CompatVersionUnknown}} as onwebkitpointerlockchange, onwebkitpointerlockerror{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture{{CompatVersionUnknown}} behind the dom.w3c_pointer_events.enabled pref (disabled by default){{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncanplay, oncanplaythrough, ondurationchange, onemptied, onended, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, ontimeupdate, onvolumechange, onwaiting{{CompatGeckoMobile(1.9.1)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmouseenter, onmouseleave{{CompatGeckoMobile(10)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsuspend{{CompatGeckoMobile(1.9.2)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncancel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onclose{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
oncuechange{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
ondragexit{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmousewheel{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onsort{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onmozfullscreenchange, onmozfullscreenerror {{non-standard_inline}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}
onpointerlockchange, onpointerlockerror{{CompatGeckoMobile(10)}} as onmozpointerlockchange, onmozpointerlockerror{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
onpointercancel, onpointerdown, onpointerup, onpointermove, onpointerout, onpointerover, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture{{CompatVersionUnknown}} behind the dom.w3c_pointer_events.enabled pref (disabled by default){{CompatNo}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onabort/index.html b/files/zh-cn/web/api/globaleventhandlers/onabort/index.html new file mode 100644 index 0000000000..ad8954c149 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onabort/index.html @@ -0,0 +1,102 @@ +--- +title: GlobalEventHandlers.onabort +slug: Web/API/GlobalEventHandlers/onabort +translation_of: Web/API/GlobalEventHandlers/onabort +--- +
{{ ApiRef("HTML DOM") }}
+ +

摘要

+ +

一个中断事件的事件处理器发送到window全局对象。（Firefox 2 和Safari不可用）

+ +

TODO 要定义什么是“abort”。通过窗口管理关掉窗口么？停止页面的加载？有什么意图和理由（用户，网络或服务器）？在哪一步被发起或被捕获？对于IE浏览器，onabort只可用于img标签。

+ +

语法

+ +
window.onabort =funcRef
+
+ + + +

例子

+ +
window.onabort = function() {
+  alert("Load aborted.");
+}
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}{{Spec2('HTML WHATWG')}} 
+ +

 浏览器兼容性

+ +
+

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+
diff --git a/files/zh-cn/web/api/globaleventhandlers/onanimationcancel/index.html b/files/zh-cn/web/api/globaleventhandlers/onanimationcancel/index.html new file mode 100644 index 0000000000..3e0a11176a --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onanimationcancel/index.html @@ -0,0 +1,248 @@ +--- +title: GlobalEventHandlers.onanimationcancel +slug: Web/API/GlobalEventHandlers/onanimationcancel +translation_of: Web/API/GlobalEventHandlers/onanimationcancel +--- +
{{APIRef("CSS3 Animations")}}
+ +

animationcancel是一个事件处理操作,这个事件在CSS Animation属性意外中断时派发出来(换句话说，任何时候animation停止运行不会发出一个animationend 事件，比如，当animation-name改变以后，animation 就会被移除，或者动画节点隐藏—当前元素或者任何包含的节点隐藏)—使用css时.

+ +

语法

+ +
var animCancelHandler = target.onanimationcancel;
+
+target.onanimationcancel = {{jsxref("Function")}}
+
+ +

Value

+ +

A {{jsxref("Function")}} to be called when an {{event("animationcancel")}} event occurs indicating that a CSS animation has begun on the target, where the target object is an HTML element ({{domxref("HTMLElement")}}), document ({{domxref("Document")}}), or window ({{domxref("Window")}}). The function receives as input a single parameter: an {{domxref("AnimationEvent")}} object describing the event which occurred.

+ +

Example

+ +

HTML content

+ +
<div class="main">
+  <div id="box">
+    <div id="text" onanimationcancel="handleCancelEvent">Box</div>
+  </div>
+</div>
+
+<div class="button" id="toggleBox">
+  Hide the Box
+</div>
+
+<pre id="log"></pre>
+ +

CSS content

+ + + +

Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself, with all its properties, including {{cssxref("animation")}}, defined. We go ahead and describe the animation in-place here because the animation is intended to begin as soon as the page loads, rather than based on an event.

+ +
#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 5s ease-in-out 0s infinite alternate both slideBox;
+}
+
+
+ +

The animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.

+ +
@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+
+ +

Since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed.

+ +

JavaScript content

+ +

Before we get to the animation code, we define a function which logs information to a box on the user's screen. We'll use this to show information about the events we receive. Note the use of {{domxref("AnimationEvent.animationName")}} and {{domxref("AnimationEvent.elapsedTime")}} to get information about the event which occurred.

+ +
function log(msg, event) {
+  let logBox = document.getElementById("log");
+
+  logBox.innerHTML += msg;
+
+  if (event) {
+    logBox.innerHTML += " <code>"+ event.animationName +
+        "</code> at time " + event.elapsedTime.toFixed(2) +
+        " seconds.";
+  }
+
+  logBox.innerHTML += "\n";
+};
+
+
+
+ +

Then we set up the handleCancelEvent() function, which is called in response to the {{event("animationcancel")}} event, as set up in the HTML above. All we do here is log information to the console, but you might find other use cases, such as starting a new animation or effect, or terminating some dependent operation.

+ +
function handleCancelEvent(event) {
+  log("Animation canceled", event);
+};
+
+
+ +

Then we add a method to handle toggle {{cssxref("display")}} between "flex" and "none" and establish it as the handler for a {{event("click")}} event on the "Hide/Show" the Box button:

+ +
function toggleBox() {
+  if (box.style.display == "none") {
+    box.style.display = "flex";
+    document.getElementById("toggleBox").innerHTML = "Hide the box";
+  } else {
+    box.style.display = "none";
+    document.getElementById("toggleBox").innerHTML = "Show the box";
+  }
+}
+ +

Toggling the box to display: none has the effect of aborting its animation. In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.

+ +
+

At this time, no major browser supports animationcancel.

+
+ +

Result

+ +

Assembled together, you get this:

+ +

{{ EmbedLiveSample('Example', 500, 400) }}

+ +

If your browser supports animationcancel, hiding the box using the button will cause a message to be displayed about the event.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}{{Spec2('CSS3 Animations')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatNo}}{{CompatNo}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] For details on the status of implementation in Firefox, see {{bug(1302648)}}.

+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onanimationend/index.html b/files/zh-cn/web/api/globaleventhandlers/onanimationend/index.html new file mode 100644 index 0000000000..b1b7b071d9 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onanimationend/index.html @@ -0,0 +1,109 @@ +--- +title: GlobalEventHandler.onanimationend +slug: Web/API/GlobalEventHandlers/onanimationend +translation_of: Web/API/GlobalEventHandlers/onanimationend +--- +

概述

+ +

事件处理程序。 当CSS动画到达其活动期的结束时发送此事件

+ +

语法

+ +
var animEndHandler = target.onanimationend;
+
+target.onanimationend = 事件处理函数
+
+ +

值

+ +

当target(HTML元素， document 或者 window)的CSS动画已经开始，{{event("animationend")}}事件会触发同时事件处理函数会被调用。事件处理函数会接收到唯一的参数：{{domxref("AnimationEvent")}} 描述发生的事件。

+ +

例子

+ +

{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}{{Spec2('CSS3 Animations')}} 
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoDesktop(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
+
+ +

参考

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onanimationiteration/index.html b/files/zh-cn/web/api/globaleventhandlers/onanimationiteration/index.html new file mode 100644 index 0000000000..9214d6754c --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onanimationiteration/index.html @@ -0,0 +1,228 @@ +--- +title: GlobalEventHandlers.onanimationiteration +slug: Web/API/GlobalEventHandlers/onanimationiteration +translation_of: Web/API/GlobalEventHandlers/onanimationiteration +--- +
{{APIRef("CSS3 Animations")}}{{Draft}}
+ +

 {{event("animationiteration")}}事件的处理器 . 当 CSS Animation 运动到最后一帧时触发。 An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.

+ +

语法

+ +
var animIterationHandler = target.onanimationiteration;
+
+target.onanimationiteration = {{jsxref("Function")}}
+
+ +

Value

+ +

A {{jsxref("Function")}} to be called when an {{event("animationiteration")}} event occurs indicating that a CSS animation has reached the end of an iteration while running on the target, where the target object is an HTML element ({{domxref("HTMLElement")}}), document ({{domxref("Document")}}), or window ({{domxref("Window")}}). The function receives as input a single parameter: an {{domxref("AnimationEvent")}} object describing the event which occurred.

+ +

实例

+ +

Let's create an animation which automatically pauses at the end of each iteration, allowing the user to choose whether or not to start the next iteration. Much of this code is the same as in other examples of animation events, so it may look familiar.

+ + + +

CSS content

+ + + +

Leaving out some bits of the CSS that don't matter for the discussion here, let's take a look at the styles for the box that we're animating. First is the box itself. We set its size, position, color, and layout. Note that there's nothing there about animation. That's because we don't want the box to start animating right away. We'll add the {{cssxref("animation")}} style later to start animating the box.

+ +
#box {
+  width: var(--boxwidth);
+  height: var(--boxwidth);
+  left: 0;
+  top: 0;
+  border: 1px solid #7788FF;
+  margin: 0;
+  position: relative;
+  background-color: #2233FF;
+  display: flex;
+  justify-content: center;
+  animation: 2s ease-in-out 0s infinite alternate both paused slideBox;
+}
+
+
+ +

The animation's keyframes are defined next; they describe an animation which causes the box to migrate from the top-left corner of the container to the bottom-right corner.

+ +
@keyframes slideBox {
+  from {
+    left:0;
+    top:0;
+  }
+  to {
+    left:calc(100% - var(--boxwidth));
+    top:calc(100% - var(--boxwidth))
+  }
+}
+
+ +

JavaScript content

+ +

Some JavaScript code will need to be written to handle the click on the button to start the next iteration. Let's have a look.

+ +
var box = document.getElementById("box");
+var iterationCounter = 0;
+
+box.onanimationiteration = function(event) {
+  box.style.animationPlayState = "paused";
+  document.getElementById("play").innerHTML = "Start Iteration #" + (iterationCounter+1);
+};
+
+ +

This sets up two global variables: box, which references the "box" element that we're animating, and iterationCounter, which is initially zero, which indicates how many iterations of the animation have occurred.

+ +

The onanimationiteration event handler is then set up. It simply sets the box's {{cssxref("animation-play-state")}} to "paused", then updates the text displayed in the button to indicate that clicking the button will start playing the next iteration of theanimation.

+ +

Finally, we set up a handler for a click on the button that runs the animation:

+ +
document.getElementById("play").addEventListener("click", function(event) {
+  box.style.animationPlayState = "running";
+  iterationCounter++;
+}, false);
+ +

This sets the box element's {{cssxref("animation-play-state")}} to "running" and increments the iteration counter. That's all there is to it!

+ +

Result

+ +

Assembled together, you get this:

+ +

{{ EmbedLiveSample('Example', 500, 400) }}

+ +

Each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Animations','#eventdef-animationevent-animationiteration','onanimationiteration')}}{{Spec2('CSS3 Animations')}} 
+ +

兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Microsoft EdgeInternet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoDesktop(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)		{{CompatGeckoMobile(51)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}} {{property_prefix("-webkit")}}
+ {{CompatVersionUnknown}} (unprefixed)
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onauxclick/index.html b/files/zh-cn/web/api/globaleventhandlers/onauxclick/index.html new file mode 100644 index 0000000000..f99474b970 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onauxclick/index.html @@ -0,0 +1,115 @@ +--- +title: GlobalEventHandlers.onauxclick +slug: Web/API/GlobalEventHandlers/onauxclick +tags: + - API + - Event Handler + - Experimental + - auxclick +translation_of: Web/API/GlobalEventHandlers/onauxclick +--- +
+
{{SeeCompatTable}}{{ ApiRef("HTML DOM") }}
+
+ +
 
+ +

onauxclick 属性是一个 {{domxref("EventHandler")}}，当 {{event("auxclick")}} 事件发生时被调用，例如按下了输入设备上的非主按钮 (e.g. 鼠标中键)。

+ +

实现该属性的一个目标是，提高浏览器与按钮行为之间的兼容性 - 事件行为正在更新，以便 {{Event("click")}} 只触发主按钮点击（例如，鼠标左键）。然后开发人员可以使用 {{Event("auxclick")}} 来为非主按钮点击提供明确的行为。在此之前，{{Event("click")}} 通常会针对所有输入设备按钮点击，浏览器行为有些不一致。

+ +

语法

+ +
element.onauxclick = functionRef(e);
+
+ +

事件处理函数是一个 {{domxref("MouseEvent")}} 对象。只有事件被触发的按钮不同，该事件和普通点击事件的行为是完全相同的。

+ +

示例

+ +

在这个例子中我们定义了两个事件处理函数：onclick 和 onauxclick。前者改变按钮背景的颜色，而后者改变按钮前景（文本）的颜色。您可以通过使用多按钮鼠标尝试演示来查看这两种功能(see it live on GitHub; also see the source code)。

+ +
var button = document.querySelector('button');
+var html = document.querySelector('html');
+
+function random(number) {
+  return Math.floor(Math.random() * number);
+}
+
+button.onclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.backgroundColor = rndCol;
+};
+
+button.onauxclick = function() {
+  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
+  button.style.color = rndCol;
+}
+ +
+

Note: 如果您使用的是三键鼠标，您会注意到在单击任一非鼠标左键时该 onauxclick 处理程序会运行。

+
+ +

Notes

+ +

当用户点击一个元素时，将引发该 click 事件。之后的 click 事件将发生在 mousedown 和 mouseup 事件之后。

+ +

每次只有一个 click 处理程序可以通过此属性分配给一个对象。您可能倾向于使用{{domxref("EventTarget.addEventListener()")}} 方法，因为它更灵活并且是 DOM Events 规范的一部分。

+ +

规范

+ +

onauxclick 不是任何官方规范的一部分，它被定义在 auxclick Draft Community Group Report.

+ +

Browser Compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}{{CompatGeckoDesktop(53)}}{{CompatUnknown}}{{CompatNo}}{{CompatNo}}
+
diff --git a/files/zh-cn/web/api/globaleventhandlers/onblur/index.html b/files/zh-cn/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..221b679239 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,81 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +tags: + - Gecko DOM Reference +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onblur属性用来获取或设置当前元素的onBlur事件的事件处理函数

+ +

语法

+ +
element.onblur = function;
+
+ + + +
element.onblur = function() { alert("检测到onblur事件!"); };
+
+ +

例子

+ +
<html>
+
+<head>
+<title>onblur event example</title>
+
+<script type="text/javascript">
+
+var elem = null;
+
+function initElement()
+ {
+ elem = document.getElementById("foo");
+ // 注意:doEvent() 和 doEvent(param)都是不正确的.这里只能是函数名,不能是函数调用.
+ elem.onblur = doEvent;
+ };
+
+function doEvent()
+ {
+ elem.value = 'Bye-Bye';
+ alert("检测到onblur事件!")
+ }
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<form>
+<input type="text" id="foo" value="Hello!" />
+</form>
+
+<p>点击input元素使其获得焦点,然后点击其他页面其他部位</p>
+
+</body>
+</html>
+
+ +

备注

+ +

当一个元素失去焦点时会触发blur事件.

+ +

在IE中,几乎所有类型的元素都可以触发blur事件,但在基于gecko的浏览器中,大部分元素都不能触发blur事件.

+ +

规范

+ +

DOM Level 0不属于任何规范.

+ +

{{ languages( {"fr": "fr/DOM/element.onblur","en": "en/DOM/element.onblur" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html b/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html new file mode 100644 index 0000000000..9603f52914 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oncancel/index.html @@ -0,0 +1,60 @@ +--- +title: GlobalEventHandlers.oncancel +slug: Web/API/GlobalEventHandlers/oncancel +tags: + - API + - HTML DOM + - NeedsExample + - Property + - Reference + - 事件 + - 对话框 +translation_of: Web/API/GlobalEventHandlers/oncancel +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} 的oncancel 属性是一个{{domxref("EventHandler")}}，它是用来处理发送给{{HTMLElement("dialog")}}元素的{{event("cancel")}} 事件的。

+ +

当用户需要离开一个<dialog>元素的时候就会触发 cancel 事件. 这个事件处理器会防止事件向上传递,因此任何父处理器都不会接受到该事件。

+ +

语法

+ +
target.oncancel = functionRef;
+
+ +

参数

+ +

functionRef 是一个函数名 或者 函数表达式. 这个函数接收一个 {{domxref("Event")}} 对象作为它唯一的参数.

+ +

每次只有一个 oncancel 处理器可以被赋值给一个对象. 你可能更喜欢用 {{domxref("EventTarget.addEventListener()")}} 方法, 因为它更灵活.

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG','webappapis.html#handler-oncancel','oncancel')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

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

+ +

另请参阅

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/oncanplay/index.html b/files/zh-cn/web/api/globaleventhandlers/oncanplay/index.html new file mode 100644 index 0000000000..e50e97572c --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oncanplay/index.html @@ -0,0 +1,47 @@ +--- +title: GlobalEventHandlers.oncanplay +slug: Web/API/GlobalEventHandlers/oncanplay +translation_of: Web/API/GlobalEventHandlers/oncanplay +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}}的oncanplay 属性是{{domxref("EventHandler")}} 处理 {{event("canplay")}} 事件。

+ +

当用户代理能够播放媒体时canplay 事件被触发 , 但是预估没有加载全部的数据以支持媒体播放完毕。

+ +

语法

+ +
element.oncanplay = handlerFunction;
+var handlerFunction = element.oncanplay;
+
+ +

handlerFunction或者是 null 或者是一个 JavaScript function 指定事件的处理句柄。

+ +

说明

+ + + + + + + + + + + + + + +
说明状态备注
{{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容

+ + + +

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

+ +

参考资料

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/oncanplaythrough/index.html b/files/zh-cn/web/api/globaleventhandlers/oncanplaythrough/index.html new file mode 100644 index 0000000000..6e478aa535 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oncanplaythrough/index.html @@ -0,0 +1,25 @@ +--- +title: GlobalEventHandlers.oncanplaythrough +slug: Web/API/GlobalEventHandlers/oncanplaythrough +translation_of: Web/API/GlobalEventHandlers/oncanplaythrough +--- +
{{ ApiRef("HTML DOM") }}
+ +

全局事件处理器（{{domxref("GlobalEventHandlers")}} )之一的 {{event("canplaythrough")}} 属性，是处理当前元素{{event("canplaythrough")}} 事件的事件处理器{{domxref("EventHandler")}} .

+ +

当用户代理可以播放媒体资源并且可以播放至其结束而不必进一步缓冲内容时，触发canplaythrough事件。

+ +

语法

+ +
element.oncanplaythrough = handlerFunction;
+var handlerFunction = element.oncanplaythrough;
+
+ +

 

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onchange/index.html b/files/zh-cn/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..861bdf11f7 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,43 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +translation_of: Web/API/GlobalEventHandlers/onchange +--- +

{{ ApiRef() }}

+ +

概述

+ +

onchange可以用来获取或设置当前元素的change事件的事件处理函数.

+ +

语法

+ +
element.onchange = 事件处理函数
+
+ +

备注

+ +

下面的伪代码演示了,在Mozilla中,onchange事件是如何触发的:

+ +
  control.onfocus = focus;
+  control.onblur = blur;
+  function focus () {
+      original_value = control.value;
+  }
+
+  function blur () {
+      if (control.value != original_value)
+        control.onchange();
+  }
+
+ +

因此,如果你在你的focus或blur事件的处理函数里修改一个控件的值的话,你可能遇到一些关于change事件意想不到的现象.另外, change事件是在blur事件发生之后才触发的. 这一点和IE不同.

+ +

规范

+ +

DOM Level 0不属于任何标准

+ +

相关链接

+ +

DOM Level 2: HTML event types

+ +

{{ languages( { "fr": "fr/DOM/element.onchange" ,"en": "en/DOM/element.onchange" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onclick/index.html b/files/zh-cn/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..f0e5322370 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,95 @@ +--- +title: GlobalEventHandlers.onclick +slug: Web/API/GlobalEventHandlers/onclick +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - 事件处理器 + - 全局事件处理器 +translation_of: Web/API/GlobalEventHandlers/onclick +--- +
{{ ApiRef("HTML DOM") }}
+ +

全局事件处理器（{{domxref("GlobalEventHandlers")}}）之一的 onclick 属性，是处理当前元素的 {{event("click")}} 事件的事件处理器（{{domxref("EventHandler")}}）。

+ +

当用户点击一个元素时，会触发 click 事件。在每次点击的整个过程中，click 事件的运行顺序在 {{event("mousedown")}} 和 {{event("mouseup")}} 事件之后。

+ +
注意：当你使用 click 事件去触发一个动作时，也要考虑向 {{event("keydown")}} 事件添加此动作，以便允许不使用鼠标或触摸屏的用户进行同样的操作。
+ +

语法

+ +
element.onclick = functionRef;
+
+ +

functionRef 是一个函数名称，或一个函数表达式。该函数接收 {{domxref("MouseEvent")}} 对象作为其唯一参数。在函数内，this 是触发当前事件的元素。

+ +

同一时刻，每个 onclick 接收器只能指向唯一一个对象。所以，你可能更倾向于使用{{domxref("EventTarget.addEventListener()")}} 的方法，这种方法更加灵活，同时也是 DOM 事件规范格式。

+ +

例子

+ +

这个例子会记录每次点击的坐标。

+ +

HTML

+ +
<p>请随意点击本例子。</p>
+<p id="log"></p>
+ +

JavaScript

+ +
let log = document.getElementById('log');
+
+document.onclick = inputChange;
+
+function inputChange(e) {
+  log.textContent = `Position: (${e.clientX}, ${e.clientY})`;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

也可以使用匿名函数：

+ +
p.onclick = function() { alert("moot!"); };
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onclose/index.html b/files/zh-cn/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..f7061e8243 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,67 @@ +--- +title: GlobalEventHandlers.onclose +slug: Web/API/GlobalEventHandlers/onclose +tags: + - API + - Dialog + - Event Handler + - GlobalEventHandlers + - HTML DOM + - 参考 + - 实验性的 + - 属性 + - 需要示例 +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

{{domxref("GlobalEventHandlers")}} mixin 的 onclose 属性是一个 {{domxref("EventHandler")}}, 用来处理发送给 {{HTMLElement("dialog")}} 元素的 {{event("close")}} 事件。

+ +

当用户关闭一个 <dialog> 时，close 事件将被触发。

+ +
+

注意：如果要处理 window 的关闭，使用 {{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} 或 {{domxref("WindowEventHandlers.onunload", "onunload")}}.

+
+ +

语法

+ +
target.onclose = functionRef;
+ +

参数

+ +

functionRef 是一个函数名称或 函数表达式。 该函数接受一个 {{domxref("Event")}} 对象作为它唯一的参数。

+ +

每次只能给一个对象添加 onclose 回调。 你可能更喜欢使用 {{domxref("EventTarget.addEventListener()")}} 方法，因为它更加灵活。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态文档
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html b/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html new file mode 100644 index 0000000000..b8f5b92aa3 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oncontextmenu/index.html @@ -0,0 +1,28 @@ +--- +title: GlobalEventHandlers.oncontextmenu +slug: Web/API/GlobalEventHandlers/oncontextmenu +translation_of: Web/API/GlobalEventHandlers/oncontextmenu +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

获取或设置当前窗口contextmenu事件的事件处理函数。除非默认行为已经阻止了(看下面的例子是如何阻止的)，否则右键菜单会被激活。注意此事件会发生在没有阻止右键事件的情况下而且这不取决于此元素是否拥有了"contextmenu"属性.

+ +

语法

+ +
window.oncontextmenu = funcRef;
+//funcRef是个函数引用
+
+ +

例子

+ +

这个例子会取消页面右键的功能：

+ +
window.oncontextmenu = function () {
+   return false;
+}
+//该窗口禁止使用右键
+
+ +

{{ languages( {"en": "en/DOM/window.oncontextmenu" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/oncuechange/index.html b/files/zh-cn/web/api/globaleventhandlers/oncuechange/index.html new file mode 100644 index 0000000000..001cf49c01 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oncuechange/index.html @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.oncuechange +slug: Web/API/GlobalEventHandlers/oncuechange +tags: + - API + - Event Handler + - GlobalEventHandlers + - 事件处理函数 +translation_of: Web/API/GlobalEventHandlers/oncuechange +--- +
{{ ApiRef("HTML DOM") }}
+ +
oncuechange 属性属于{{domxref("GlobalEventHandlers")}}，是一个处理{{event("cuechange")}}事件的{{domxref("EventHandler")}}。
+ +
当{{domxref("TextTrack")}}更改了当前显示的提示时，cuechange 事件将会触发。
+ +

语法

+ +
element.oncuechange = handlerFunction;
+var handlerFunction = element.oncuechange;
+
+ +

handlerFunction 可以为 null，也可以是一个处理指定事件的JavaScript函数。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-oncuechange','oncuechange')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

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

+ +

查看更多

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ondblclick/index.html b/files/zh-cn/web/api/globaleventhandlers/ondblclick/index.html new file mode 100644 index 0000000000..9fa956b1c2 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ondblclick/index.html @@ -0,0 +1,71 @@ +--- +title: GlobalEventHandlers.ondblclick +slug: Web/API/GlobalEventHandlers/ondblclick +translation_of: Web/API/GlobalEventHandlers/ondblclick +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

ondblclick属性用来获取或设置当前元素的dblclick事件的事件处理函数.

+ +

语法

+ +
element.ondblclick = function;
+
+ + + +
element.ondblclick = function() { alert("触发了dblclick事件!"); };
+
+ +

例子

+ +
<html>
+
+<head>
+<title>ondblclick示例演示</title>
+
+<script type="text/javascript">
+
+function initElement()
+ {
+ var p = document.getElementById("foo");
+ // 注意:这里写成showAlert()或者 showAlert(参数)是不对的.
+ // 必须是一个函数名,而不是函数调用.
+ p.ondblclick = showAlert;
+ };
+
+function showAlert()
+ {
+ alert("检测到dblclick事件!")
+ }
+</script>
+
+<style type="text/css">
+<!--
+#foo {
+border: solid blue 2px;
+}
+-->
+</style>
+</head>
+
+<body onload="initElement()";>
+<span id="foo">这是一个元素</span>
+<p>双击上面的元素会触发dblclick事件.</p>
+</body>
+</html>
+
+ +

备注

+ +

在当前元素上双击鼠标左键会触发dblclick事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.ondblclick","zh-cn": "zh-cn/DOM/element.ondblclick" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/ondrag/index.html b/files/zh-cn/web/api/globaleventhandlers/ondrag/index.html new file mode 100644 index 0000000000..1dda206be3 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ondrag/index.html @@ -0,0 +1,111 @@ +--- +title: GlobalEventHandlers.ondrag +slug: Web/API/GlobalEventHandlers/ondrag +translation_of: Web/API/GlobalEventHandlers/ondrag +--- +
{{ApiRef("HTML DOM")}}
+ +

一个{{event("drag")}}事件的{{domxref("GlobalEventHandlers","global event handler")}}。

+ +

语法

+ +
var dragHandler = targetElement.ondrag;
+
+ +

返回值

+ +
+
dragHandler
+
元素 targetElement的drag事件handler。
+
+ +

例子

+ +

这个例子展示了使用ondrag属性handler设置一个元素的drag事件handler。

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of using the ondrag Global Event Attribute</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
+ <div> <!-- <div class="source"> -->
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML5.1")}}初始定义
+ +

浏览器兼容性

+ + + +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html b/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html new file mode 100644 index 0000000000..bce1cf2d8d --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ondragleave/index.html @@ -0,0 +1,196 @@ +--- +title: GlobalEventHandlers.ondragleave +slug: Web/API/GlobalEventHandlers/ondragleave +translation_of: Web/API/GlobalEventHandlers/ondragleave +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("dragleave")}} event.

+ +

Syntax

+ +
var dragleaveHandler = targetElement.ondragleave;
+
+ +

Return value

+ +
+
dragleaveHandler
+
The dragleave event handler for element targetElement.
+
+ +

Example

+ +

This example demonstrates using the {{domxref("GlobalEventHandlers.ondragleave","ondragleave")}} attribute handler to set an element's {{event("dragleave")}} event handler.

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of using the Drag and Drop Global Event Attribute</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // Change the source element's border to signify drag has started
+ ev.currentTarget.style.border = "dashed";
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ // Change the target element's background color to signify a drag over event
+ // has occurred
+ ev.currentTarget.style.background = "lightblue";
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragenter_handler(ev) {
+ console.log("dragEnter");
+ // Change the source element's background color for enter events
+ ev.currentTarget.style.background = "yellow";
+}
+
+function dragleave_handler(ev) {
+ console.log("dragLeave");
+ // Change the source element's background color back to white
+ ev.currentTarget.style.background = "white";
+}
+
+function dragend_handler(ev) {
+ console.log("dragEnd");
+ // Change the target element's background color to visually indicate
+ // the drag ended.
+ var el=document.getElementById("target");
+ el.style.background = "pink";
+}
+
+function dragexit_handler(ev) {
+ console.log("dragExit");
+ // Change the source element's background color back to green to signify a dragexit event
+ ev.currentTarget.style.background = "green";
+}
+
+function init() {
+ // Set handlers for the source's enter/leave/end/exit events
+ var el=document.getElementById("source");
+ el.ondragenter = dragenter_handler;
+ el.ondragleave = dragleave_handler;
+ el.ondragend = dragend_handler;
+ el.ondragexit = dragexit_handler;
+}
+</script>
+<body onload="init();">
+<h1>Examples of <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code></h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
+
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragleave", "ondragleave")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ondrop/index.html b/files/zh-cn/web/api/globaleventhandlers/ondrop/index.html new file mode 100644 index 0000000000..3de1e294a8 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ondrop/index.html @@ -0,0 +1,159 @@ +--- +title: GlobalEventHandlers.ondrop +slug: Web/API/GlobalEventHandlers/ondrop +translation_of: Web/API/GlobalEventHandlers/ondrop +--- +
drop 事件的全局处理函数
+ +

语法

+ +
var dropHandler = targetElement.ondrop;
+
+ +

返回值

+ +
+
dropHandler
+
目标元素的 drop 事件处理函数。
+
+ +

Example

+ +

下面这个示例演示了 ondrop 属性的用法来指定 drop 事件的处理函数。

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of using the ondrag Global Event Attribute</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
+ <div class="source">
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML WHATWG")}} 
{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML5.1")}}Initial definition
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support4{{CompatGeckoDesktop("1.9.1")}}10123.1
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onended/index.html b/files/zh-cn/web/api/globaleventhandlers/onended/index.html new file mode 100644 index 0000000000..cd744371fa --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onended/index.html @@ -0,0 +1,48 @@ +--- +title: GlobalEventHandlers.onended +slug: Web/API/GlobalEventHandlers/onended +translation_of: Web/API/GlobalEventHandlers/onended +--- +
{{ ApiRef("HTML DOM") }}
+ +

The onended property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("ended")}} events.

+ +

The ended event is fired when playback has stopped because the end of the media was reached.

+ +

语法

+ +
element.onended = handlerFunction;
+var handlerFunction = element.onended;
+
+ +

handlerFunction 可以为 null 或者具体的事件响应函数。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onended','onended')}}{{Spec2('HTML WHATWG')}} 
+ +

 浏览器兼容性

+ + + +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onerror/index.html b/files/zh-cn/web/api/globaleventhandlers/onerror/index.html new file mode 100644 index 0000000000..2f06929c48 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onerror/index.html @@ -0,0 +1,114 @@ +--- +title: GlobalEventHandlers.onerror +slug: Web/API/GlobalEventHandlers/onerror +tags: + - API + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onerror +--- +
{{ApiRef("HTML DOM")}}
+ +
混合事件 {{domxref("GlobalEventHandlers")}} 的 onerror 属性是用于处理 {{event("error")}} 的事件
+ +
+ +

Error事件的事件处理程序，在各种目标对象的不同类型错误被触发：

+ + + +

加载一个全局的error事件处理函数可用于自动收集错误报告。

+ +

语法

+ +

由于历史原因，window.onerror和element.onerror接受不同的参数。

+ +

window.onerror

+ +
window.onerror = function(message, source, lineno, colno, error) { ... }
+
+ +

函数参数：

+ + + +

若该函数返回true，则阻止执行默认事件处理函数。

+ +

window.addEventListener('error')

+ +
window.addEventListener('error', function(event) { ... })
+
+ +

{{domxref("ErrorEvent")}} 类型的event包含有关事件和错误的所有信息。

+ +

element.onerror

+ +
element.onerror = function(event) { ... }
+
+ +

element.onerror使用单一{{domxref("Event")}}参数的函数作为其处理函数。

+ +

注意事项

+ +

当加载自不同域的脚本中发生语法错误时，为避免信息泄露（参见{{bug("363897")}}），语法错误的细节将不会报告，而代之简单的"Script error."。在某些浏览器中，通过在{{HTMLElement("script")}}使用{{htmlattrxref("crossorigin","script")}}属性并要求服务器发送适当的 CORS HTTP 响应头，该行为可被覆盖。一个变通方案是单独处理"Script error."，告知错误详情仅能通过浏览器控制台查看，无法通过JavaScript访问。

+ +
window.onerror = function (msg, url, lineNo, columnNo, error) {
+    var string = msg.toLowerCase();
+    var substring = "script error";
+    if (string.indexOf(substring) > -1){
+        alert('Script Error: See Browser Console for Detail');
+    } else {
+        var message = [
+            'Message: ' + msg,
+            'URL: ' + url,
+            'Line: ' + lineNo,
+            'Column: ' + columnNo,
+            'Error object: ' + JSON.stringify(error)
+        ].join(' - ');
+
+        alert(message);
+    }
+
+    return false;
+};
+ +

当使用行内HTML标签（<body onerror="alert('an error occurred')">）时，HTML规范要求传递给onerror的参数命名为event、source、lineno、colno、error。针对不满足此要求的浏览器，传递的参数仍可使用arguments[0]到arguments[2]来获取。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态注释
{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +

在Firefox 14之前，当{{HTMLElement("script")}}加载失败时，window.onerror被传入"Error loading script"信息。该bug已在{{bug("737087")}}修复，取而代之，在这种情况下，scriptElement.onerror将被触发。

+ +

自Firefox 31始加入最后两个参数（colno and error），意味着通过提供的Error对象，你可以从window.onerror访问脚本错误的stack trace（{{bug("355430")}}。）

+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onfocus/index.html b/files/zh-cn/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..8e9b37c28e --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,27 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onfocus 属性用来获取或设置当前元素的focus事件的事件处理函数.

+ +

语法

+ +
element.onfocus = event handling code
+
+ +

备注

+ +

当前元素获得键盘焦点时会触发focus事件.

+ +

在IE中,几乎所有类型的元素都会触发focus事件, 但在Gecko中,只有少数几种类型的元素会触发focus事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.onfocus","en": "en/DOM/element.onfocus" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onformdata/index.html b/files/zh-cn/web/api/globaleventhandlers/onformdata/index.html new file mode 100644 index 0000000000..1ed9c9b0ac --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onformdata/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.onformdata +slug: Web/API/GlobalEventHandlers/onformdata +translation_of: Web/API/GlobalEventHandlers/onformdata +--- +
{{ApiRef("HTML DOM")}}
+ +
+ +

{{domxref("GlobalEventHandlers")}} 混入对象(mixin)的属性onformdata 是用于处理 {{event("formdata")}} 事件的, 它在整个列表展示所构建的表单数据之后被触发。触发会发生在表单发送时，但也可能由对某个{{domxref("FormData.FormData", "FormData()")}} 结构体的调用所触发。onformdata 在 {{domxref("HTMLFormElement")}}上有效。

+ +

语法

+ +
target.onformdata = functionRef;
+
+ +

Value

+ +

functionRef 是一个函数名或者称为 function expression. 此函数接受一个{{domxref("FormDataEvent")}}对象作为其唯一表达式参数。

+ +

示例

+ +
// grab reference to form
+
+const formElem = document.querySelector('form');
+
+// submit handler
+
+formElem.addEventListener('submit', (e) => {
+  // on form submission, prevent default
+  e.preventDefault();
+
+  // construct a FormData object, which fires the formdata event
+  new FormData(formElem);
+});
+
+// formdata handler to retrieve data
+
+formElem.onformdata = (e) => {
+  console.log('formdata fired');
+
+  // Get the form data from the event object
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // submit the data via XHR
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+};
+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

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

+ +

另见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html new file mode 100644 index 0000000000..84acc36582 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -0,0 +1,115 @@ +--- +title: GlobalEventHandlers.ongotpointercapture +slug: Web/API/GlobalEventHandlers/ongotpointercapture +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +

{{ApiRef("HTML DOM")}}

+ +

ongotpointercapture 事件是GlobalEventHandlers的属性,这个事件返回gotpointercapture类型的事件操作。

+ +

语法

+ +
window.ongotpointercapture = functionReference
+
+ +

例子

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's gotpointercapture handler
+ var gotCaptureHandler = ev.target.ongotpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.ongotpointercapture = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#the-gotpointercapture-event', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}} 
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/oninput/index.html b/files/zh-cn/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..6118a8cc8e --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,81 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +tags: + - API + - Event Handler +translation_of: Web/API/GlobalEventHandlers/oninput +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}}mixin的oninput属性是{{domxref("EventHandler")}}，它处理{{HTMLElement("input")}}，{{HTMLElement("select")}}和 {{HTMLElement("textarea")}} 元素上的 {{event("input")}} 事件。 它还会在{{domxref("HTMLElement.contentEditable", "contenteditable")}} 或 {{domxref("Document.designMode", "designMode")}}打开的元素上处理这些事件。

+ +
+

注意：与oninput不同的是， {{domxref("GlobalEventHandlers.onchange", "onchange")}} 事件处理程序不一定会针对元素值的每次更改而调用。

+
+ +

语法

+ +
target.oninput = functionRef;
+ +

值

+ +

functionRef是一个函数名或函数表达式。该函数接收{{domxref("InputEvent")}} 对象作为唯一参数。

+ +

示例

+ +

HTML

+ +
<input type="text" placeholder="Type something here to see its length."size="50"> <p id="log"></p>
+ +

JavaScript

+ +
let input = document.querySelector('input');
+let log =document.getElementById('log');
+input.oninput = handleInput;
+function handleInput(e) {
+  log.textContent = `The field's value is${e.target.value.length} character(s) long.`;
+}
+ +

结果

+ +

{{EmbedLiveSample("示例")}}

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

浏览器兼容性

+ +

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

+ +

The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:

+ + + +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html b/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html new file mode 100644 index 0000000000..c192d2ee5e --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/oninvalid/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.oninvalid +slug: Web/API/GlobalEventHandlers/oninvalid +tags: + - API + - GlobalEventHandlers + - 事件句柄 + - 属性 + - 引用 +translation_of: Web/API/GlobalEventHandlers/oninvalid +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}} 混合的oninvalid属性 是 {{domxref("EventHandler")}} 处理{{event("invalid")}} 事件。

+ +

invalid 事件被触发当一个从属元素被勾选checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中, 或者在 checkValidity() 方法之后它自己的表单被调用。

+ +

语法

+ +
target.oninvalid = functionRef;
+var functionRef = target.oninvalid;
+
+ +

值

+ +

functionRef是一个函数名称 或者 称为 函数表达式。这个函数需要{{domxref("Event")}} 对象做为它的参数。

+ +

例子

+ +

这个例子用一个表单说明oninvalid 和 {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} 事件 句柄。

+ +

HTML

+ +
<form id="form">
+  <p id="error" hidden>Please fill out all fields.</p>
+
+  <label for="city">City</label>
+  <input type="text" id="city" required>
+
+  <button type="submit">Submit</button>
+</form>
+<p id="thanks" hidden>Your data has been received. Thanks!</p>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+const error = document.getElementById('error');
+const city = document.getElementById('city');
+const thanks = document.getElementById('thanks');
+
+city.oninvalid = invalid;
+form.onsubmit = submit;
+
+function invalid(event) {
+  error.removeAttribute('hidden');
+}
+
+function submit(event) {
+  form.setAttribute('hidden', '');
+  thanks.removeAttribute('hidden');
+
+  // For this example, don't actually submit the form
+  event.preventDefault();
+}
+ +

结果

+ +

{{EmbedLiveSample("Example")}}

+ +

说明

+ + + + + + + + + + + + + + +
说明状态注释
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}{{Spec2('HTML WHATWG')}} 
+ +

支持的浏览器

+ + + +

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

+ +

请参阅

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onkeydown/index.html b/files/zh-cn/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..663b271fbb --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,25 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onkeydown属性用来获取或设置当前元素的keydown事件的事件处理函数.

+ +

语法

+ +
element.onkeydown = event handling code
+
+ +

备注

+ +

当用户按下键盘上的按键时会触发keydown事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown", "en": "en/DOM/element.onkeydown" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onkeypress/index.html b/files/zh-cn/web/api/globaleventhandlers/onkeypress/index.html new file mode 100644 index 0000000000..266091fc28 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onkeypress/index.html @@ -0,0 +1,109 @@ +--- +title: GlobalEventHandlers.onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress +tags: + - API + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +
{{ ApiRef("HTML DOM") }}
+ +

onkeypress 属性用来获取或设置当前元素的keypress事件的事件处理函数.

+ +

语法

+ +
element.onkeypress = event handling code
+
+ +

备注

+ +

当用户在键盘上按下任意键时，应当会触发 keypress 事件。然则有些浏览器不会触发某些键的 kerpress 事件。

+ +

浏览器不兼容性

+ +

Webkit-based 浏览器（如 Google Chrome 及 Safari）不会触发方向键的 keypress 事件。

+ +

Firefox 不会触发如 SHIFT 键等修改键的 keypress 事件。

+ +

示例

+ +

示例1：通过正则表达式在表单域中过滤数字

+ +

下例演示了 onkeypress 事件在一个文本输入框内的用法——将数字输入到表单时过滤输入的内容:

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Example</title>
+<script type="text/javascript">
+  function numbersOnly(oToCheckField, oKeyEvent) {
+    return oKeyEvent.charCode === 0 || /\d/.test(String.fromCharCode(oKeyEvent.charCode));
+  }
+</script>
+</head>
+
+<body>
+<form name="myForm">
+<p>这个文本框只能输入数字(译者注:不用中文输入法的前提下):
+<input type="text" name="myInput" onkeypress="return numbersOnly(this, event);" onpaste="return false;" /></p>
+</form>
+</body>
+</html>
+
+ +

示例2：捕获隐藏单词的输入

+ +

以下示例将在用户在页面的任何位置键入单词“exit”后执行某些操作。

+ +
Note: A more complete framework for capturing the typing of hidden words is available on GitHub.
+ +
/* Type the word "exit" in any point of your page... */
+
+(function () {
+
+  var sSecret = /* chose your hidden word...: */ "exit", nOffset = 0;
+
+  document.onkeypress = function (oPEvt) {
+    var oEvent = oPEvt || window.event, nChr = oEvent.charCode, sNodeType = oEvent.target.nodeName.toUpperCase();
+    if (nChr === 0 || oEvent.target.contentEditable.toUpperCase() === "TRUE" || sNodeType === "TEXTAREA" || sNodeType === "INPUT" && oEvent.target.type.toUpperCase() === "TEXT") { return true; }
+    if (nChr !== sSecret.charCodeAt(nOffset)) {
+      nOffset = nChr === sSecret.charCodeAt(0) ? 1 : 0;
+    } else if (nOffset < sSecret.length - 1) {
+      nOffset++;
+    } else {
+      nOffset = 0;
+      /* do something here... */
+      alert("Yesss!!!");
+      location.assign("http://developer.mozilla.org/");
+    }
+    return true;
+  };
+})();
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeypress','onkeypress')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ +
+ + +

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

+
diff --git a/files/zh-cn/web/api/globaleventhandlers/onkeyup/index.html b/files/zh-cn/web/api/globaleventhandlers/onkeyup/index.html new file mode 100644 index 0000000000..cd9cb7f867 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onkeyup/index.html @@ -0,0 +1,31 @@ +--- +title: GlobalEventHandlers.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +
{{ ApiRef("HTML DOM") }}
+ +

Summary

+ +

onkeyup属性用来获取或设置当前元素的keyup事件的事件处理函数.

+ +

语法

+ +
element.onkeyup = event handling code
+
+ +

例子

+ +
 <input type="text" onKeyUp="keyWasPressed(event)">
+ <script>function keyWasPressed(evt){ alert(evt.keyCode) }</script>
+
+ +

备注

+ +

在当前元素上释放键盘按键时会触发keyup事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup", "en": "en/DOM/element.onkeyup" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onload/index.html b/files/zh-cn/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..a9a56d9c6b --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,79 @@ +--- +title: GlobalEventHandlers.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - DOMContentLoaded + - ES6 + - GlobalEventHandlers.onload + - load + - onload +translation_of: Web/API/GlobalEventHandlers/onload +--- +

{{ ApiRef() }}

+ +

{{domxref("GlobalEventHandlers")}} mixin 的 onload 属性是一个事件处理程序用于处理{{domxref("Window")}}, {{domxref("XMLHttpRequest")}}, {{htmlelement("img")}} 等元素的加载事件，当资源已加载时被触发。

+ +

语法

+ +
window.onload = funcRef;
+
+ + + +

Value

+ +

funcRef 是窗口加载事件触发时调用的处理函数。

+ +

示例

+ +
window.onload = function() {
+  init();
+  doSomethingElse();
+};
+
+ +
<!doctype html>
+<html>
+  <head>
+    <title>onload test</title>
+    // ES5
+    <script>
+      function load() {
+        console.log("load event detected!");
+      }
+      window.onload = load;
+    </script>
+    // ES2015(aka: ES6)
+    <script>
+      const load = () => {
+        console.log("load event detected!");
+      }
+      window.onload = load;
+    </script>
+  </head>
+  <body>
+    <p>The load event fires when the document has finished loading!</p>
+  </body>
+</html>
+ +

注意

+ +

在文档装载完成后会触发  load 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。 

+ +

同时也会有 Gecko-指定 DOM事件，如 DOMContentLoaded 和 DOMFrameContentLoaded (它们可以使用 {{ domxref("EventTarget.addEventListener()") }} 来处理 ) ， 这些事件在页面DOM构建起来后就会触发，而不会等到其他的资源都装载完成。 

+ +

规范

+ +

这个事件处理程序在  HTML 中指定。

+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html new file mode 100644 index 0000000000..a5f43df54a --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onloadeddata/index.html @@ -0,0 +1,51 @@ +--- +title: GlobalEventHandlers.onloadeddata +slug: Web/API/GlobalEventHandlers/onloadeddata +tags: + - API + - 事件句柄 +translation_of: Web/API/GlobalEventHandlers/onloadeddata +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}}的onloadeddata 属性是事件 {{event("loadeddata")}}的处理{{domxref("EventHandler")}} 。

+ +

loadeddata 事件当媒体资源的第一帧加载完成时被触发。

+ +

语法

+ +
element.onloadeddata = handlerFunction;
+var handlerFunction = element.onloadeddata;
+
+ +

handlerFunction is either null or a JavaScript function specifying the handler for the event.

+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onloadeddata','onloadeddata')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容

+ + + +

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

+ +

参考资料

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadedmetadata/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadedmetadata/index.html new file mode 100644 index 0000000000..7f2d977c24 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onloadedmetadata/index.html @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.onloadedmetadata +slug: Web/API/GlobalEventHandlers/onloadedmetadata +tags: + - 事件处理器 + - 全局事件处理器 + - 参考 + - 属性 +translation_of: Web/API/GlobalEventHandlers/onloadedmetadata +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}} mixin的onloadedmetadata属性是处理{{event("loadedmetadata")}}事件的{{domxref("EventHandler")}}。

+ +

loadedmetadata事件在元数据（metadata）被加载完成后触发。

+ +

语法

+ +
element.onloadedmetadata = handlerFunction;
+var handlerFunction = element.onloadedmetadata;
+
+ +

handlerFunction应当是null或是由JavaScript函数声明的事件handler。

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG','#handler-onloadedmetadata','onloadedmetadata')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ + + +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html new file mode 100644 index 0000000000..0f9db1b169 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onloadend/index.html @@ -0,0 +1,47 @@ +--- +title: GlobalEventHandlers.onloadend +slug: Web/API/GlobalEventHandlers/onloadend +translation_of: Web/API/GlobalEventHandlers/onloadend +--- +
{{ApiRef}}
+ +
{{domxref("GlobalEventHandlers")}}的onloadend 属性是用来 表示触发{{event("loadend")}}事件时（资源加载进度停止时）的{{domxref("EventHandler")}}。
+ +

语法

+ +
img.onloadend = funcRef;
+
+ +

Value

+ +

funcRef是在事件源的loadend事件触发时要调用的处理函数。

+ +

范例

+ +

HTML content

+ +
<img src="myImage.jpg">
+ +

JavaScript content

+ +
// 'loadstart' fires first, then 'load', then 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

浏览器兼容性

+ +
+ + +

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

+
diff --git a/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html b/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html new file mode 100644 index 0000000000..33bfbd734a --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onloadstart/index.html @@ -0,0 +1,66 @@ +--- +title: GlobalEventHandlers.onloadstart +slug: Web/API/GlobalEventHandlers/onloadstart +translation_of: Web/API/GlobalEventHandlers/onloadstart +--- +
{{ApiRef}}
+ +

The onloadstart property of the {{domxref("GlobalEventHandlers")}} mixin is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised (when progress has begun on the loading of a resource.)

+ +

Syntax

+ +
img.onloadstart = funcRef;
+
+ +

Value

+ +

funcRef is the handler function to be called when the resource's loadstart event fires.

+ +

Examples

+ +

HTML content

+ +
<img src="myImage.jpg">
+ +

JavaScript content

+ +
// 'loadstart' fires first, then 'load', then 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

Specifications

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}{{Spec2("HTML WHATWG")}}Initial definition
+ +

Browser Compatibility

+ +
+ + +

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

+
diff --git a/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html new file mode 100644 index 0000000000..2f8763c94d --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -0,0 +1,121 @@ +--- +title: GlobalEventHandlers.onlostpointercapture +slug: Web/API/GlobalEventHandlers/onlostpointercapture +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +--- +

{{ApiRef("HTML DOM")}}

+ +

The onlostpointercapture {{domxref("EventHandler")}} property of the {{domxref("GlobalEventHandlers")}} interface returns the event handler (function) for the {{event("lostpointercapture")}} event type.

+ +

语法

+ +
window.onlostpointercapture = functionReference
+
+ +

 

+ +

例子

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Determine the target event's lostpointercapture handler
+ var lostCaptureHandler = ev.target.onlostpointercapture;
+}
+function init() {
+ var el=document.getElementById("target");
+ el.onlostpointercapture = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target"> Touch me ... </div>
+</body>
+</html>
+
+ +

 

+ +

规范

+ + + + + + + + + + + + + + +
规范状态评论
{{SpecName('Pointer Events 2','#the-lostpointercapture-event', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}} 
+ +

 

+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOpera(44)}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(57.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatOperaMobile(44)}}{{CompatUnknown}}{{CompatChrome(57.0)}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onmousedown/index.html b/files/zh-cn/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..9d8d26dbb1 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,25 @@ +--- +title: GlobalEventHandlers.onmousedown +slug: Web/API/GlobalEventHandlers/onmousedown +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onmousedown属性用来获取或设置当前元素的mousedown事件的事件处理函数.

+ +

语法

+ +
element.onmousedown= event handling code
+
+ +

备注

+ +

在当前元素上鼠标按下瞬间会触发mousedown事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown", "en": "en/DOM/element.onmousedown" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onmouseenter/index.html b/files/zh-cn/web/api/globaleventhandlers/onmouseenter/index.html new file mode 100644 index 0000000000..2a554abe9e --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmouseenter/index.html @@ -0,0 +1,50 @@ +--- +title: GlobalEventHandlers.onmouseenter +slug: Web/API/GlobalEventHandlers/onmouseenter +translation_of: Web/API/GlobalEventHandlers/onmouseenter +--- +
{{ ApiRef("HTML DOM") }}
+ +
{{domxref("GlobalEventHandlers")}}的onmouseenter 属性绑定 {{domxref("EventHandler")}} 后来处理{{event("mouseenter")}} 事件.
+ +
 
+ +

元素绑定了监听事件后，当一个指针设备（通常是鼠标）移动到这个元素上时mouseenter事件将会被触发。

+ +

语法

+ +
element.onmouseenter = handlerFunction;
+var handlerFunction = element.onmouseenter;
+
+ +

handlerFunction 可以是 null 或者一个用于处理事件的JavaScript 函数 。

+ +

规格

+ + + + + + + + + + + + + + +
规格状态注释
{{SpecName('HTML WHATWG','#handler-onmouseenter','onmouseenter')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

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

+ +

同样可看

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onmouseleave/index.html b/files/zh-cn/web/api/globaleventhandlers/onmouseleave/index.html new file mode 100644 index 0000000000..0daf4fed44 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmouseleave/index.html @@ -0,0 +1,48 @@ +--- +title: GlobalEventHandlers.onmouseleave +slug: Web/API/GlobalEventHandlers/onmouseleave +translation_of: Web/API/GlobalEventHandlers/onmouseleave +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}} mixin 中的 onmouseleave 属性是用于处理鼠标移出（{{event("mouseleave")}}）事件的事件管理器（{{domxref("EventHandler")}}）。

+ +

mouseleave事件在定点设备(通常来说指的是鼠标) 移出某个元素时触发。

+ +

语法

+ +
element.onmouseleave = handlerFunction;
+var handlerFunction = element.onmouseleave;
+
+ +

handlerFunction 可以是 null ，也可以是一个用以指示如何处理该事件的 JavaScript 函数 。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onmouseleave','onmouseleave')}}{{Spec2('HTML WHATWG')}} 
+ +

Browser compatibility

+ + + +

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

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onmousemove/index.html b/files/zh-cn/web/api/globaleventhandlers/onmousemove/index.html new file mode 100644 index 0000000000..01e56d12b0 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmousemove/index.html @@ -0,0 +1,158 @@ +--- +title: GlobalEventHandlers.onmousemove +slug: Web/API/GlobalEventHandlers/onmousemove +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onmousemove属性用来获取或设置当前元素的mousemove事件的事件处理函数.

+ +

语法

+ +
element.onmousemove = event handling code
+
+ +

备注

+ +

当用户在当前元素上移动鼠标时会触发mousemove事件.

+ +

例子

+ +

下面的例子演示了在显示"提示层"时onmousemove的用法.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Tooltip Example</title>
+<script type="text/javascript">
+var oTooltip = new (function() {
+  var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
+  this.follow = function (oMsEvnt1) {
+    if (bOff) { return; }
+    var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
+    nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
+    oNode.style.left = nLeftPos + "px";
+    oNode.style.top = nTopPos + "px";
+    nOverX = nMoveX; nOverY = nMoveY;
+  };
+  this.remove = function () {
+    if (bOff) { return; }
+    bOff = true; document.body.removeChild(oNode);
+  };
+  this.append = function (oMsEvnt2, sTxtContent) {
+    oNode.innerHTML = sTxtContent;
+    if (bOff) { document.body.appendChild(oNode); bOff = false; }
+    var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
+    nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
+    nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
+    nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
+    oNode.style.left = nLeftPos + "px";
+    oNode.style.top = nTopPos + "px";
+  };
+  this.init = function() {
+    oNode = document.createElement("div");
+    oNode.className = "tooltip";
+    oNode.style.position = "absolute";
+  };
+})();
+</script>
+<style type="text/css">
+div.tooltip {
+  padding: 6px;
+  background: #ffffff;
+  border: 1px #76808C solid;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  z-index: 9999;
+}
+</style>
+</head>
+
+<body onload="oTooltip.init();">
+<p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'提示文字1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">将你的鼠标移动到这里&hellip;</a></p>
+<p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'提示文字2');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">&hellip;或者这里!!</a></p>
+</body>
+</html>
+
+ +

下面的例子演示了在进行拖拽操作时onmousemove的用法.

+ +
<!doctype html>
+<html>
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<title>Draggable objects</title>
+<script type="text/javascript">
+
+var bMouseUp = true, oDragging, nMouseX, nMouseY, nStartX, nStartY, nZFocus = 100 /* the highest z-Index present in your page plus 1 */;
+
+function dragDown(oPssEvt1) {
+  var bExit = true, oMsEvent1 = oPssEvt1 || /* IE */ window.event;
+  for (var iNode = oMsEvent1.target; iNode; iNode = iNode.parentNode) {
+    if (iNode.className === "draggable") { bExit = false; oDragging = iNode; break; }
+  }
+  if (bExit) { return; }
+  bMouseUp = false;
+  nStartX = nStartY = 0;
+  for (var iOffPar = oDragging; iOffPar; iOffPar = iOffPar.offsetParent) {
+    nStartX += iOffPar.offsetLeft;
+    nStartY += iOffPar.offsetTop;
+  }
+  nMouseX = oMsEvent1.clientX;
+  nMouseY = oMsEvent1.clientY;
+  oDragging.style.zIndex = nZFocus++;
+  return false;
+}
+
+function dragMove(oPssEvt2) {
+  if (bMouseUp) { return; }
+  var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
+  oDragging.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
+  oDragging.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
+}
+
+function dragUp() { bMouseUp = true; }
+
+document.onmousedown = dragDown;
+document.onmousemove = dragMove;
+document.onmouseup = dragUp;
+
+</script>
+<style type="text/css">
+.draggable {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: auto;
+  height: auto;
+  cursor: move;
+}
+
+#myDiv {
+  width: 300px;
+  height: 200px;
+  left: 200px;
+  top: 200px;
+  background-color: #00ff00;
+}
+</style>
+</head>
+
+<body>
+
+<div class="draggable" id="myDiv"><p>一个 Hello world!</p></div>
+<div class="draggable" style="background-color:#aaaaaa;">又一个 hello world!</div>
+
+</body>
+</html>
+
+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "pl": "pl/DOM/element.onmousemove", "fr": "fr/DOM/element.onmousemove", "en": "en/DOM/element.onmousemove" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onmouseout/index.html b/files/zh-cn/web/api/globaleventhandlers/onmouseout/index.html new file mode 100644 index 0000000000..3bebf98aa4 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmouseout/index.html @@ -0,0 +1,67 @@ +--- +title: GlobalEventHandlers.onmouseout +slug: Web/API/GlobalEventHandlers/onmouseout +translation_of: Web/API/GlobalEventHandlers/onmouseout +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onmouseout属性用来获取或设置当前元素的mouseout事件的事件处理函数.

+ +

语法

+ +
element.onMouseOut = event handling code
+
+ +

例子

+ +
<!doctype html>
+<html>
+<head>
+<title>onmouseover/onmouseout event example</title>
+<script type="text/javascript">
+    function initElement()
+    {
+        var p = document.getElementById("foo");
+
+        p.onmouseover = showMouseOver;
+        p.onmouseout = showMouseOut;
+    };
+
+    function showMouseOver()
+    {
+        var notice = document.getElementById("notice");
+        notice.innerHTML = '检测到鼠标移进';
+    }
+
+    function showMouseOut()
+    {
+        var notice = document.getElementById("notice");
+        notice.innerHTML = '检测到鼠标移出';
+    }
+
+
+</script>
+<style type="text/css">
+    #foo {
+    border: solid blue 2px;
+    }
+</style>
+</head>
+<body onload="initElement()";>
+    <span id="foo">移动鼠标,在该元素上移进移出</span>
+    <div id="notice"></div>
+</body>
+</html>
+
+ +

备注

+ +

当鼠标离开一个元素时,会在这个元素上触发mouseout事件.

+ +

规范

+ +

DOM Level 0 不属于任何规范.

+ +

{{ languages( {"fr": "fr/DOM/element.onmouseout","en": "en/DOM/element.onmouseout" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onmouseover/index.html b/files/zh-cn/web/api/globaleventhandlers/onmouseover/index.html new file mode 100644 index 0000000000..ed43e31a8a --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmouseover/index.html @@ -0,0 +1,66 @@ +--- +title: GlobalEventHandlers.onmouseover +slug: Web/API/GlobalEventHandlers/onmouseover +translation_of: Web/API/GlobalEventHandlers/onmouseover +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onmouseover属性用来获取或设置当前元素的mouseover事件的事件处理函数.

+ +

语法

+ +
element.onmouseover = event handling code
+
+ +

例子

+ +
<!doctype html>
+<html>
+<head>
+<title>onmouseover/onmouseout event example</title>
+<script type="text/javascript">
+    function initElement()
+    {
+        var p = document.getElementById("foo");
+
+        p.onmouseover = showMouseOver;
+        p.onmouseout = showMouseOut;
+    };
+
+    function showMouseOver()
+    {
+        var notice = document.getElementById("notice");
+        notice.innerHTML = '检测到鼠标移进';
+    }
+
+    function showMouseOut()
+    {
+        var notice = document.getElementById("notice");
+        notice.innerHTML = '检测到鼠标移出';
+    }
+
+
+</script>
+<style type="text/css">
+    #foo {
+    border: solid blue 2px;
+    }
+</style>
+</head>
+<body onload="initElement()";>
+    <span id="foo">移动鼠标,在该元素上移进移出</span>
+    <div id="notice"></div>
+</body>
+</html> 
+ +

备注

+ +

当鼠标移动到一个元素上时,会在这个元素上触发mouseover事件.

+ +

规范

+ +

DOM Level 0 不属于任何规范.

+ +

{{ languages( { "pl": "pl/DOM/element.onmouseover", "fr": "fr/DOM/element.onmouseover" , "en": "en/DOM/element.onmouseover" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onmouseup/index.html b/files/zh-cn/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..cd1749ac69 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,25 @@ +--- +title: GlobalEventHandlers.onmouseup +slug: Web/API/GlobalEventHandlers/onmouseup +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +
{{ ApiRef("HTML DOM") }}
+ +

概述

+ +

onmouseup属性用来获取或设置当前元素的mouseup事件的事件处理函数.

+ +

语法

+ +
element.onMouseUp = event handling code
+
+ +

备注

+ +

当用户在当前元素上放开鼠标某个按键时会触发mouseup事件.

+ +

规范

+ +

不属于任何公开的规范.

+ +

{{ languages( { "fr": "fr/DOM/element.onmouseup" ,"en": "en/DOM/element.onmouseup" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onpause/index.html b/files/zh-cn/web/api/globaleventhandlers/onpause/index.html new file mode 100644 index 0000000000..23bbb9285d --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpause/index.html @@ -0,0 +1,46 @@ +--- +title: GlobalEventHandlers.onpause +slug: Web/API/GlobalEventHandlers/onpause +translation_of: Web/API/GlobalEventHandlers/onpause +--- +

概述

+ +

onpause可以用来获取或设置当前元素的onpause事件的事件处理函数。当媒体播放被暂停时，将触发pause事件。

+ +

语法

+ +
element.onpause = handlerFunction;
+var handlerFunction = element.onpause;
+
+ +

handlerFunction应该是null或指定事件的JavaScript函数。

+ +

说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onpause','onpause')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ + + +

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

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onplay/index.html b/files/zh-cn/web/api/globaleventhandlers/onplay/index.html new file mode 100644 index 0000000000..ea8e8d654f --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onplay/index.html @@ -0,0 +1,67 @@ +--- +title: GlobalEventHandlers.onplay +slug: Web/API/GlobalEventHandlers/onplay +translation_of: Web/API/GlobalEventHandlers/onplay +--- +
{{ ApiRef("HTML DOM") }}
+ +

The onplay property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("play")}} events.

+ +

语法

+ +
element.onplay = handlerFunction;
+var handlerFunction = element.onplay;
+
+ +

handlerFunction 应该是 null 或者 JavaScript function 指定事件的处理程序。

+ +

示例

+ +
<p>此示例演示如何将“onplay”事件分配给视频元素</p>
+
+<video controls onplay="alertPlay()">
+  <source src="mov_bbb.mp4" type="video/mp4">
+  <source src="mov_bbb.ogg" type="video/ogg">
+  Your browser does not support HTML5 video.
+</video>
+
+<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
+
+<script>
+function alertPlay() {
+  alert("视频开始播放啦。");
+}
+</script>
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onplay','onplay')}}{{Spec2('HTML WHATWG')}} +

 

+
+ +

浏览器兼容性

+ + + +

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

+ +

相关知识

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html b/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html new file mode 100644 index 0000000000..25b77afc32 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onplaying/index.html @@ -0,0 +1,50 @@ +--- +title: GlobalEventHandlers.onplaying +slug: Web/API/GlobalEventHandlers/onplaying +translation_of: Web/API/GlobalEventHandlers/onplaying +--- +
{{ApiRef("HTML DOM")}}
+ +

The onplaying property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("playing")}} events.

+ +

playing 事件将会在媒体做好播放准备后（因暂停或网络延迟而导致媒体数据缺失）触发。

+ +

语法

+ +
element.onplaying = handlerFunction;
+var handlerFunction = element.onplaying;
+
+ +

handlerFunction 为 null 或一个函数 指定事件处理程序

+ +

规范

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}}{{Spec2('HTML WHATWG')}}
+ +

 浏览器兼容性

+ + + +

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

+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointercancel/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointercancel/index.html new file mode 100644 index 0000000000..26f5ead6dc --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointercancel/index.html @@ -0,0 +1,129 @@ +--- +title: GlobalEventHandlers.onpointercancel +slug: Web/API/GlobalEventHandlers/onpointercancel +translation_of: Web/API/GlobalEventHandlers/onpointercancel +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("pointercancel")}} event.

+ +

语法

+ +
var cancelHandler = targetElement.onpointercancel;
+
+ +

返回值

+ +
+
cancelHandler
+
元素targetElement 的 pointercancel 事件处理器。
+
+ +

示例

+ +

该示例展示使用 onpointercancel 设置一个元素的 pointercancel 事件处理器的两个方法。

+ +
<html>
+<script>
+function cancelHandler(ev) {
+ // 处理 pointercancel 事件
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointercancel = cancelHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointercancel="cancelHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态注释
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}{{Spec2('Pointer Events 2')}}Non-stable 版本
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}{{Spec2('Pointer Events')}}初始定义
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
特性ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
支持基础{{CompatChrome(55.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("10")}}{{CompatOpera(42)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
特性AndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
支持基础{{CompatNo}}{{CompatChrome(55.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatOperaMobile(42)}}{{CompatNo}}{{CompatChrome(55.0)}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerdown/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerdown/index.html new file mode 100644 index 0000000000..c538841be5 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerdown/index.html @@ -0,0 +1,131 @@ +--- +title: GlobalEventHandlers.onpointerdown +slug: Web/API/GlobalEventHandlers/onpointerdown +translation_of: Web/API/GlobalEventHandlers/onpointerdown +--- +
{{ApiRef("HTML DOM")}}
+ +

 {{event("pointerdown")}} 事件的 {{domxref("GlobalEventHandlers","全局事件处理程序")}} 

+ +

语法

+ +
var downHandler = targetElement.onpointerdown;
+
+ +

返回值

+ +
+
downHandler
+
pointerdown 事件触发对象的事件处理程序.
+
+ +

示例

+ +

当前示例展示两种方式使用 onpointerdown 去设置元素的pointerdown事件处理程序.

+ +
<html>
+<script>
+function downHandler(ev) {
+ // Process the pointerdown event
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerdown = downHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerdown="downHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器支持

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(55.0)}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatIE("10")}}{{CompatOpera(42)}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari MobileChrome for Android
Basic support{{CompatNo}}{{CompatChrome(55.0)}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatOperaMobile(42)}}{{CompatNo}}{{CompatChrome(55.0)}}
+
+ +

 

+ +

参阅

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerenter/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerenter/index.html new file mode 100644 index 0000000000..7f0422197b --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerenter/index.html @@ -0,0 +1,127 @@ +--- +title: GlobalEventHandlers.onpointerenter +slug: Web/API/GlobalEventHandlers/onpointerenter +translation_of: Web/API/GlobalEventHandlers/onpointerenter +--- +
HTML DOM
+ +
pointerenter事件的GlobalEventHandlers（全局事件处理函数）
+ +

 

+ +
var enterHandler = targetElement.onpointerenter;
+
+ +

返回值

+ +
+
enterHandler
+
+ +

      targetElement的pointerenter事件处理函数。

+ +

例子

+ +

这个例子展示了使用onpointerenter来设置元素pointerenter事件处理函数的两种方式。

+ +
<html>
+<script>
+function enterHandler(ev) {
+ // 处理pointerenter 事件
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerenter = enterHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> 点我 ... </div>
+<div id="target2" onpointerenter="enterHandler(event)"> 点我 ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
规范状态备注
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器兼容性

+ +

兼容性表

+ +
+ + + + + + + + + + + + + + + + + + + +
特点ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本支持CompatChrome("35")支持[1]GeckoDesktop(59)支持支持需-ms前缀 
+ 11支持		支持程度未知不支持
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本支持支持程度未知Chrome("35")支持[1]GeckoMobile("29")支持[2]10支持需-ms前缀 支持程度未知不支持
+
+ +

[1] 这是在bug 248918中实现。

+ +

[2] 依赖于dom.w3c_pointer_events.enabled属性, 默认值为 false。

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerleave/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerleave/index.html new file mode 100644 index 0000000000..38e47c7b19 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerleave/index.html @@ -0,0 +1,80 @@ +--- +title: GlobalEventHandlers.onpointerleave +slug: Web/API/GlobalEventHandlers/onpointerleave +translation_of: Web/API/GlobalEventHandlers/onpointerleave +--- +
{{APIRef("HTML DOM")}}
+ +

就像在{{domxref("Element")}}或{{domxref("Window")}}中点击类似，在某目标区域内，发生触点（鼠标指针，触摸等）行为时会触发源于{{event("pointerleave")}}事件{{domxref("GlobalEventHandlers","global event handler", "", 1)}}行为。 这个事件本身属于 Pointer Events API 的一部分。

+ +

语法

+ +
var leaveHandler = EventTarget.onpointerleave;
+
+EventTarget.onpointerleave = leaveHandler;
+ +

返回值

+ +
+
leaveHandler
+
{{event("pointerleave")}} 事件会执行{{domxref("EventListener")}} 监听器会委托执行用以发送给目标。
+
+ +

样例

+ +

这个样例展示了两种使用 onpointerleave 来设置元素 pointerleave 事件处理器的方式。

+ +
<html>
+<script>
+function leaveHandler(ev) {
+ // 执行 pointerleave event 事件
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerleave = leaveHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerleave="leaveHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

查看 Using Pointer Events 以了解更多详情。

+ +

规格

+ + + + + + + + + + + + + + + + + + + +
名称状态备注
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器支持情况

+ + + +

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

+ +

参考

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointermove/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointermove/index.html new file mode 100644 index 0000000000..3407af3671 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointermove/index.html @@ -0,0 +1,134 @@ +--- +title: GlobalEventHandlers.onpointermove +slug: Web/API/GlobalEventHandlers/onpointermove +tags: + - API + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointermove +--- +
{{ApiRef("HTML DOM")}}
+ +

一个{{domxref("GlobalEventHandlers","global event handler")}}(全局事件) {{event("pointermove")}} 事件.

+ +

语法

+ +
var moveHandler = targetElement.onpointermove;
+
+ +

返回值

+ +
+
moveHandler
+
返回 targetElement 元素的pointermove事件处理函数.
+
+ +

示例

+ +

下面展示了两种设置元素pointermove事件处理函数的方法.

+ +
<html>
+<script>
+function moveHandler(ev) {
+ // 此处添加事件处理语句
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointermove = moveHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointermove="moveHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("35")}}[1]{{CompatGeckoDesktop(59)}}10 {{property_prefix("-ms")}}
+ 11		{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome("35")}}[1]{{CompatGeckoMobile("29")}}[2]10 {{property_prefix("-ms")}}
+ 11		{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] This was implemented in bug 248918.

+ +

[2] Supported behind the preference dom.w3c_pointer_events.enabled, defaulting to false.

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerout/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerout/index.html new file mode 100644 index 0000000000..e702faa2a7 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerout/index.html @@ -0,0 +1,79 @@ +--- +title: GlobalEventHandlers.onpointerout +slug: Web/API/GlobalEventHandlers/onpointerout +translation_of: Web/API/GlobalEventHandlers/onpointerout +--- +
{{ApiRef("HTML DOM")}}
+ +

一个{{domxref("GlobalEventHandlers","global event handler")}} 用于处理 {{event("pointerout")}} 事件。

+ +

语法

+ +
var outHandler = targetElement.onpointerout;
+
+ +

返回值

+ +
+
outHandler
+
元素targetElement的指针输出事件处理程序。
+
+ +

例子

+ +

这个例子展示了两种方式来使用onpointerout设置元素的pointerout事件处理程序。

+ +
<html>
+<script>
+function outHandler(ev) {
+ // Process the pointerout event
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerout = outHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerout="outHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器兼容性

+ + + +

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

+ +

相关链接

+ + + +

+ +

diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerover/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerover/index.html new file mode 100644 index 0000000000..01d291f94d --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerover/index.html @@ -0,0 +1,82 @@ +--- +title: 全局事件处理器.onpointerover +slug: Web/API/GlobalEventHandlers/onpointerover +tags: + - HTML DOM + - 全局事件处理器 + - 属性 + - 引用 + - 指针事件 + - 文档 +translation_of: Web/API/GlobalEventHandlers/onpointerover +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("pointerover")}} event.

+ +

语法

+ +
var overHandler = targetElement.onpointerover;
+
+ +

返回值

+ +
+
overHandler
+
 pointerover 事件处理器返回目标元素的overHandler.
+
+ +

案例

+ +

这里使用两种方式展示了如何去使用 onpointerover 去设置一个元素的 pointerover 事件处理器

+ +
<html>
+<script>
+function overHandler(ev) {
+ // Process the pointerover event
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerover = overHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerover="overHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

说明

+ + + + + + + + + + + + + + + + + + + +
说明状态备注
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}{{Spec2('Pointer Events 2')}}不稳定版本
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}{{Spec2('Pointer Events')}}初始定义
+ +

浏览器兼容性

+ + + +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onpointerup/index.html b/files/zh-cn/web/api/globaleventhandlers/onpointerup/index.html new file mode 100644 index 0000000000..c529bc8232 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onpointerup/index.html @@ -0,0 +1,127 @@ +--- +title: GlobalEventHandlers.onpointerup +slug: Web/API/GlobalEventHandlers/onpointerup +translation_of: Web/API/GlobalEventHandlers/onpointerup +--- +
{{ApiRef("HTML DOM")}}
+ +

pointerup是一个全局的事件处理函数.

+ +

语法

+ +
var upHandler = targetElement.onpointerup;
+
+ +

返回值

+ +
+
upHandler
+
返回 targetElement 元素的pointerup事件处理函数.
+
+ +

示例

+ +

如下是两种设置元素pointerup事件处理函数的方法.

+ +
<html>
+<script>
+function upHandler(ev) {
+ // 这里添加元素的pointup事件处理函数
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerup = upHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerup="upHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}{{Spec2('Pointer Events 2')}}Non-stable version
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}{{Spec2('Pointer Events')}}Initial definition
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("35")}}[1]{{CompatGeckoDesktop(59)}}10 {{property_prefix("-ms")}}
+ 11		{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatChrome("35")}}[1]{{CompatGeckoMobile("29")}}[2]10 {{property_prefix("-ms")}}
+ 11		{{CompatUnknown}}{{CompatNo}}
+
+ +

[1] This was implemented in bug 248918.

+ +

[2] Supported behind the preference dom.w3c_pointer_events.enabled, defaulting to false.

+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onreset/index.html b/files/zh-cn/web/api/globaleventhandlers/onreset/index.html new file mode 100644 index 0000000000..7f43a32d5a --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onreset/index.html @@ -0,0 +1,63 @@ +--- +title: GlobalEventHandlers.onreset +slug: Web/API/GlobalEventHandlers/onreset +translation_of: Web/API/GlobalEventHandlers/onreset +--- +

{{ ApiRef() }}

+ +

The GlobalEventHandlers.onreset 属性包含 {{domxref("EventHandler")}} ，当收到一个{{event("reset")}} 事件时触发

+ +

语法

+ +
window.onreset = funcRef;
+
+ +

参数

+ + + +

例子

+ +
<html>
+<script>
+function reg() {
+  window.captureEvents(Event.RESET);
+  window.onreset = hit;
+}
+
+function hit() {
+ alert('hit');
+}
+</script>
+
+<body onload="reg();">
+ <form>
+   <input type="reset" value="reset" />
+ </form>
+ <div id="d"> </div>
+</body>
+</html>
+
+ +

备注

+ +

reset 事件只有在用户点击表单中的reset按钮时才会被触发 (<input type="reset"/>).

+ +

规范

+ + + + + + + + + + + + + + +
规范状态评论
{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}{{Spec2('HTML WHATWG')}} 
diff --git a/files/zh-cn/web/api/globaleventhandlers/onresize/index.html b/files/zh-cn/web/api/globaleventhandlers/onresize/index.html new file mode 100644 index 0000000000..4afad82e58 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onresize/index.html @@ -0,0 +1,71 @@ +--- +title: window.onresize +slug: Web/API/GlobalEventHandlers/onresize +translation_of: Web/API/GlobalEventHandlers/onresize +--- +

{{ ApiRef() }}

+ +

概述

+ +

onresize属性可以用来获取或设置当前窗口的resize事件的事件处理函数

+ +

语法

+ +
window.onresize = funcRef;
+
+ +

参数

+ + + +

例子

+ +
window.onresize = doFunc;
+
+ +
<html>
+<head>
+
+<title>onresize测试</title>
+
+<script type="text/javascript">
+
+window.onresize = resize;
+
+function resize()
+{
+ alert("检测到resize事件!");
+}
+</script>
+</head>
+
+<body>
+<p>改变浏览器窗口的大小来触发resize事件.</p>
+</body>
+</html>
+
+ +

备注

+ +

在窗口大小改变之后,就会触发resize事件.

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}{{Spec2('HTML WHATWG')}} 
+ +

{{ languages( {"en": "en/DOM/window.onresize" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onscroll/index.html b/files/zh-cn/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..83038201e3 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +tags: + - API + - HTML DOM + - 属性 +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ ApiRef("HTML DOM") }}
+ +

元素的 scroll 事件处理函数。

+ +

语法

+ +
element.onscroll = functionReference
+ +

参数

+ +

functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。

+ +
+

注意：不要将onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}混淆。onwheel是鼠标滚轮旋转, 而onscroll 处理的是对象内部内容区的滚动事件。

+
+ +

 

+ +

示例

+ +
<!DOCTYPE html>
+<html lang="en">
+  <head>
+  <meta charset="UTF-8" />
+  <style>
+  #container {
+    position: absolute;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    width: auto;
+    left: 0;
+    right: 0;
+    overflow: auto;
+  }
+
+  #foo {
+    height:1000px;
+    width:1000px;
+    background-color: #777;
+    display: block;
+  }
+
+  </style>
+  </head>
+  <body>
+    <div id="container">
+      <div id="foo"></div>
+    </div>
+
+    <script type="text/javascript">
+      document.getElementById('container').onscroll = function() {
+        console.log("scrolling");
+      };
+    </script>
+  </body>
+</html>
+
+ +

{{ EmbedLiveSample('示例') }}

+ +

Example

+ +

这个示例能说明更多问题

+ +

This example monitors scrolling on a {{HtmlElement("textarea")}}, and logs the element's vertical scroll position accordingly.

+ +

HTML

+ +
<textarea>1 2 3 4 5 6 7 8 9</textarea>
+<p id="log"></p>
+ +

CSS

+ +
textarea {
+  width: 4rem;
+  height: 8rem;
+  font-size: 3rem;
+}
+ +

JavaScript

+ +
const textarea = document.querySelector('textarea');
+const log = document.getElementById('log');
+
+textarea.onscroll = logScroll;
+
+function logScroll(e) {
+  log.textContent = `Scroll position: ${e.target.scrollTop}`;
+}
+ +

Result

+ +

{{EmbedLiveSample("Example", 700, 200)}}

+

注意

+ +

当用户滚动某个元素的内容时 scroll 事件将会被触发。Element.onscroll 同等于 element.addEventListener("scroll" ... )。

+

规范

+ + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}Initial definition
diff --git a/files/zh-cn/web/api/globaleventhandlers/onselect/index.html b/files/zh-cn/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..cba79e9a8f --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,59 @@ +--- +title: GlobalEventHandlers.onselect +slug: Web/API/GlobalEventHandlers/onselect +translation_of: Web/API/GlobalEventHandlers/onselect +--- +

{{ ApiRef() }}

+ +

概述

+ +

onselect用来获取或设置当前窗口的select事件的事件处理函数

+ +

语法

+ +
window.onselect = funcRef;
+
+ + + +

例子

+ +
<html>
+<head>
+
+<title>onselect test</title>
+
+<style type="text/css">
+.text1 { border: 2px solid red; }
+</style>
+
+<script type="text/javascript">
+
+window.onselect = selectText;
+
+function selectText()
+{
+ alert("检测到select事件!");
+}
+</script>
+</head>
+
+<body>
+<textarea class="text1" cols="30" rows="3">
+用鼠标高亮选择一些文本,来触发select事件
+</textarea>
+</body>
+</html>
+
+ +

备注

+ +

只有在文本框和文本域内选择文本才会触发select事件.

+ +

规范

+ +

不属于任何公开规范.

+ +

{{ languages( {"en": "en/DOM/window.onselect" } ) }}

diff --git a/files/zh-cn/web/api/globaleventhandlers/onselectionchange/index.html b/files/zh-cn/web/api/globaleventhandlers/onselectionchange/index.html new file mode 100644 index 0000000000..845410cb97 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onselectionchange/index.html @@ -0,0 +1,104 @@ +--- +title: GlobalEventHandlers.onselectionchange +slug: Web/API/GlobalEventHandlers/onselectionchange +translation_of: Web/API/GlobalEventHandlers/onselectionchange +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

GlobalEventHandlers.onselectionchange  属性表示当一个 {{event("selectstart")}} 事件被触发，比如在页面上选中文字变化时，会执行绑定的事件处理器

+ +

Syntax

+ +
obj.onselectionchange = function;
+
+ +

Example

+ +
var selection;
+
+document.onselectionchange = function() {
+  console.log('New selection made');
+  selection = document.getSelection();
+};
+ +

完整例子请参阅Key quote generator demo.

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API','#dom-globaleventhandlers-onselectionchange','GlobalEventHandlers.onselectionchange')}}{{Spec2('Selection API')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(43)}}[1]
+ {{CompatGeckoDesktop(52)}}[2]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}1.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
onselectionchange{{CompatGeckoMobile(43)}}[1]
+ {{CompatGeckoMobile(52)}}[2]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] This is implemented behind the dom.select_events.enabled preference, which defaults to false except on Nightly.

+ +

[2] This is now fully enabled on Firefox 52 release version.

+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onselectstart/index.html b/files/zh-cn/web/api/globaleventhandlers/onselectstart/index.html new file mode 100644 index 0000000000..370aea1346 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onselectstart/index.html @@ -0,0 +1,104 @@ +--- +title: GlobalEventHandlers.onselectstart +slug: Web/API/GlobalEventHandlers/onselectstart +translation_of: Web/API/GlobalEventHandlers/onselectstart +--- +
{{ApiRef('DOM')}}{{SeeCompatTable}}
+ +

GlobalEventHandlers.onselectstart 表示 {{event("selectstart")}} 事件绑定的事件处理器，比如用户在网页上开始选择任意文本内容时触发。

+ +

译者注：在输入控件中选择文本时，触发的是控件绑定的 {{event("select")}} 事件。

+ +

Syntax

+ +
obj.onselectstart = function;
+
+ +

Example

+ +
document.onselectstart = function() {
+  console.log("Selection started!");
+};
+
+ +

详细用法参见 Key quote generator 示例。

+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Selection API','#dom-globaleventhandlers-onselectstart','GlobalEventHandlers.onselectstart')}}{{Spec2('Selection API')}}Initial definition.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox (Gecko)ChromeInternet ExplorerOperaSafari
Basic support{{CompatGeckoDesktop(43)}}[1]
+ {{CompatGeckoDesktop(52)}}[2]		{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}1.3
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureFirefox Mobile (Gecko)AndroidIE MobileOpera MobileSafari Mobile
onselectionchange{{CompatGeckoMobile(43)}}[1]
+ {{CompatGeckoMobile(52)}}[2]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] This is implemented behind the dom.select_events.enabled preference, which defaults to false except on Nightly.

+ +

[2] This is now fully enabled on Firefox 52 release version.

+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onsubmit/index.html b/files/zh-cn/web/api/globaleventhandlers/onsubmit/index.html new file mode 100644 index 0000000000..1909ba0ef9 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onsubmit/index.html @@ -0,0 +1,101 @@ +--- +title: GlobalEventHandlers.onsubmit +slug: Web/API/GlobalEventHandlers/onsubmit +tags: + - API + - DOM + - Event + - Event Handler + - HTML + - 事件 + - 事件接收器 + - 属性 +translation_of: Web/API/GlobalEventHandlers/onsubmit +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}} 的 onsubmit 属性是一个处理 {{event("submit")}} 的 {{domxref("EventHandler")}}。

+ +

submit 事件会在用户点击提交按钮（<input type="submit"/> 元素）提交表单时触发。

+ +

语法

+ +
target.onsubmit = functionRef;
+ +

参数

+ +

functionRef 是一个函数名或 函数表达式。The function receives a {{domxref("FocusEvent")}} object as its sole argument.

+ + +

例子

+ +

This example demonstrates {{domxref("GlobalEventHandlers.oninvalid", "oninvalid")}} and onsubmit event handlers on a form.

+ +

HTML

+ +
<form id="form">
+  <p id="error" hidden>Please fill out all fields.</p>
+
+  <label for="city">City</label>
+  <input type="text" id="city" required>
+
+  <button type="submit">Submit</button>
+</form>
+<p id="thanks" hidden>Your data has been received. Thanks!</p>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+const error = document.getElementById('error');
+const city = document.getElementById('city');
+const thanks = document.getElementById('thanks');
+
+city.oninvalid = invalid;
+form.onsubmit = submit;
+
+function invalid(event) {
+  error.removeAttribute('hidden');
+}
+
+function submit(event) {
+  form.setAttribute('hidden', '');
+  thanks.removeAttribute('hidden');
+
+  // For this example, don't actually submit the form
+  event.preventDefault();
+}
+ +

Result

+ +

{{EmbedLiveSample("Example")}}

+ +

规范

+ + + + + + + + + + + + + + +
规范状态备注
{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +
+ + +

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

+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ontouchcancel/index.html b/files/zh-cn/web/api/globaleventhandlers/ontouchcancel/index.html new file mode 100644 index 0000000000..faba488dc4 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ontouchcancel/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.ontouchcancel +slug: Web/API/GlobalEventHandlers/ontouchcancel +translation_of: Web/API/GlobalEventHandlers/ontouchcancel +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.

+ +

{{SeeCompatTable}}

+ +
+

Note: 这个属性没有被正式标准化。它在 {{SpecName('Touch Events 2')}} 被指定，{{Spec2('Touch Events 2')}} 规范 并且没有在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}。此属性没有被广泛实现。

+
+ +

语法

+ +
var cancelHandler = someElement.ontouchcancel;
+
+ +

返回值

+ +
+
cancelHandler
+
元素someElement上的touchcancel事件句柄。
+
+ +

例子

+ +

这个例子展示了两种方法在元素touchcancel事件句柄上使用ontouchcancel 事件

+ +
<html>
+<script>
+function cancelTouch(ev) {
+ // 事件执行过程
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchcancel = cancelTouch;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" ontouchcancel="cancelTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchcancel')}}{{Spec2('Touch Events 2')}}Non-stable version.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support     
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support        
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ontouchmove/index.html b/files/zh-cn/web/api/globaleventhandlers/ontouchmove/index.html new file mode 100644 index 0000000000..848f9ac6b7 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ontouchmove/index.html @@ -0,0 +1,128 @@ +--- +title: GlobalEventHandlers.ontouchmove +slug: Web/API/GlobalEventHandlers/ontouchmove +translation_of: Web/API/GlobalEventHandlers/ontouchmove +--- +
{{ApiRef("HTML DOM")}}
+ +

A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.

+ +

{{SeeCompatTable}}

+ +
+

Note: 这个属性没有正式标准化。它在 {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规范中提出，而不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} 中. 这个属性没有被广泛地实现.

+
+ +

语法

+ +
var moveHandler = someElement.ontouchmove;
+
+ +

Return value

+ +
+
moveHandler
+
someElement元素的 touchmove 事件处理句柄/函数。
+
+ +

例子

+ +

这个例子展示了两种通过 ontouchmove 设置元素的 touchmove 事件处理句柄/函数的方式。

+ +
<html>
+<script>
+
+function moveTouch(ev) {
+ // 书剑
+}
+
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchmove = moveTouch;
+}
+
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" ontouchmove="moveTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

Specifications

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}{{Spec2('Touch Events 2')}}Non-stable version.
+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(18.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ontouchstart/index.html b/files/zh-cn/web/api/globaleventhandlers/ontouchstart/index.html new file mode 100644 index 0000000000..58499d061c --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ontouchstart/index.html @@ -0,0 +1,126 @@ +--- +title: GlobalEventHandlers.ontouchstart +slug: Web/API/GlobalEventHandlers/ontouchstart +translation_of: Web/API/GlobalEventHandlers/ontouchstart +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("touchstart")}} 事件的{{domxref("GlobalEventHandlers","全局事件处理器")}}.

+ +

{{SeeCompatTable}}

+ +
+

备注: 这个属性尚未正式标准化。它被定义在{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规格中，但并没有被定义在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性尚未被完成实现。

+
+ +

语法

+ +
var startHandler = someElement.ontouchstart;
+
+ +

返回值

+ +
+
startHandler
+
someElement的touchstart事件处理函数.
+
+ +

例子

+ +

这个例子展示了使用ontouchstart属性的两种方法。

+ +
<html>
+<script>
+function startTouch(ev) {
+ // 处理事件
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.ontouchstart = startTouch;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" ontouchstart="startTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

规范

+ + + + + + + + + + + + + + +
规范状态评论
{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}{{Spec2('Touch Events 2')}}Non-stable version.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatChrome(18.0)}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

相关链接

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html b/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html new file mode 100644 index 0000000000..b6f15f3181 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ontransitioncancel/index.html @@ -0,0 +1,147 @@ +--- +title: GlobalEventHandlers.ontransitioncancel +slug: Web/API/GlobalEventHandlers/ontransitioncancel +translation_of: Web/API/GlobalEventHandlers/ontransitioncancel +--- +
{{APIRef("CSS3 Transitions")}}
+ +

{{domxref("GlobalEventHandlers")}}混合 的 ontransitioncancel  属性 是处理 {{event("transitioncancel")}} 事件的手柄{{domxref("EventHandler")}}.

+ +
+

domxref("GlobalEventHandlers") 与 domxref("EventHandler")： dom修订版本的事件手柄。

+ +

event("transitioncancel")：transitioncancel事件

+
+ +

当CSS转换被取消时，transitioncancel事件被触发。当以下情况时，过渡被取消::

+ + + +

Syntax

+ +
var transitionCancelHandler = target.ontransitioncancel;
+
+target.ontransitioncancel = {{jsxref("Function")}}
+
+ +

Value

+ +

A {{jsxref("Function")}} to be called when a {{event("transitioncancel")}} event occurs indicating that a CSS transition has been cancelled on the target, where the target object is an HTML element ({{domxref("HTMLElement")}}), document ({{domxref("Document")}}), or window ({{domxref("Window")}}). The function receives as input a single parameter: a {{domxref("TransitionEvent")}} object describing the event which occurred; the event's {{domxref("TransitionEvent.elapsedTime")}} property's value should be the same as the value of {{cssxref("transition-duration")}}.

+ +
+

Note: elapsedTime不包括过渡效果开始之前的时间;这意味着{{cssxref("transition-delay")}}的值不会影响elapsedTime的值，elapsedTime在延迟周期结束和动画开始之前都是0。

+
+ +

Example

+ +

在本例中，我们使用{{event("transitionrun")}}和{{event("transitionend")}}事件来检测转换何时开始和结束，从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果，以允许连锁反应。

+ +

除此之外, 我们也使用 {{event("click")}} 事件使盒子消失 (display: none;), 显示如何触发 {{event("transitioncancel")}} 事件.

+ +

HTML content

+ +

这只是简单地创建了一个{{HTMLElement("div")}}，我们将在下面用CSS样式使其成为一个框，调整大小和改变颜色等。

+ +
<div class="box"></div>
+
+ +

CSS content

+ +

下面的CSS样式框和应用一个过渡效果，使框的颜色和大小改变，并导致框旋转，而鼠标光标在它上面。

+ +
.box {
+  margin-left: 70px;
+  margin-top: 30px;
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  color: #FFFFFF;
+  padding: 20px;
+  font: bold 1.6em "Helvetica", "Arial", sans-serif;
+  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
+  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  color: #000000;
+  width: 200px;
+  height: 200px;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+ +

JavaScript content

+ +

然后, 我们需要建立事件处理程序，以便在转换开始和结束时更改框的文本内容。

+ +
let box = document.querySelector(".box");
+box.ontransitionrun = function(event) {
+  box.innerHTML = "Zooming...";
+}
+
+box.ontransitionend = function(event) {
+  box.innerHTML = "Done!";
+}
+
+box.onclick = function() {
+  box.style.display = 'none';
+  timeout = window.setTimeout(appear, 2000);
+  function appear() {
+    box.style.display = 'block';
+  }
+}
+
+box.ontransitioncancel = function(event) {
+  console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
+}
+
+ +

Result

+ +

The resulting content looks like this:

+ +

{{EmbedLiveSample('Example', 600, 280)}}

+ +

Notice what happens when you hover your mouse cursor over the box, then move it away.

+ +

Also note the log that appears in the JavaScript console when you click the box, or move the cursor away before the transition has run to completion.

+ +

Specification

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitioncancel','ontransitioncancel')}}{{Spec2('CSS3 Transitions')}}
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/ontransitionend/index.html b/files/zh-cn/web/api/globaleventhandlers/ontransitionend/index.html new file mode 100644 index 0000000000..5549084e8c --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/ontransitionend/index.html @@ -0,0 +1,120 @@ +--- +title: GlobalEventHandlers.ontransitionend +slug: Web/API/GlobalEventHandlers/ontransitionend +translation_of: Web/API/GlobalEventHandlers/ontransitionend +--- +
{{APIRef("CSS3 Transitions")}}
+ +

{{event("transitionend")}} 事件的事件处理函数，在某个 CSS transition 完成时触发。

+ +
+

如果在 transition 完成前，该 transition 已从目标节点上移除，那么 {{event("transitionend")}} 将不会被触发。一种可能的情况是修改了目标节点的 {{cssxref("transition-property")}} 属性，另一种可能的情况是 {{cssxref("display")}} 属性被设为 "none"。

+
+ +

语法

+ +
var transitionEndHandler = target.ontransitionend;
+
+target.ontransitionend = {{jsxref("Function")}}
+
+ +

值

+ +

一个 {{jsxref("Function")}}，该函数会在 {{event("transitionend")}} 事件发生时被触发，表示目标节点的 CSS transition 已经完成。目标节点可能是一个 HTML 元素 ({{domxref("HTMLElement")}})，document ({{domxref("Document")}})，或者 window ({{domxref("Window")}})。该函数接受一个参数：一个描述该事件的 {{domxref("TransitionEvent")}} 对象；其 {{domxref("TransitionEvent.elapsedTime")}} 属性值与 {{cssxref("transition-duration")}} 的值一致。

+ +
+

elapsedTime 并不包括 transition 效果开始前的时间，也就是说，{{cssxref("transition-delay")}} 属性并不会影响 elapsedTime的值，其在延迟结束、动画开始之时，值为零。

+
+ +

示例

+ +

本例中，我们使用了 {{event("transitionrun")}} 和 {{event("transitionend")}} 事件来监测 transition 的开始和结束，从而在 transition 的过程中更新文本。这也可以被用来触发动画或者其它效果来实现连锁反应。

+ +

HTML 内容

+ +

这里简单地创建了一个 {{HTMLElement("div")}}，我们将使用 CSS 来改变其大小和颜色。

+ +
<div class="box"></div>
+
+ +

CSS 内容

+ +

以下为 CSS 样式，并添加了 transition 属性。当鼠标悬浮时，盒子大小和颜色会发生变化，而且还会转动。

+ +
.box {
+  margin-left: 70px;
+  margin-top: 30px;
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  color: #FFFFFF;
+  padding: 20px;
+  font: bold 1.6em "Helvetica", "Arial", sans-serif;
+  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
+  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  color: #000000;
+  width: 200px;
+  height: 200px;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+ +

JavaScript 内容

+ +

接下来，我们需要事件处理函数以在 transition 发生和结束时修改文本内容。

+ +
let box = document.querySelector(".box");
+box.ontransitionrun = function(event) {
+  box.innerHTML = "Zooming...";
+}
+box.ontransitionend = function(event) {
+  box.innerHTML = "Done!";
+}
+
+ +

效果

+ +

最后的效果如下：

+ +

{{EmbedLiveSample('Example', 600, 280)}}

+ +

注意观察当鼠标悬浮在元素上以及移出时发生的变化。

+ +

规范

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS3 Transitions','#ontransitionend','ontransitionend')}}{{Spec2('CSS3 Transitions')}} 
+ +

浏览器兼容性

+ + + +

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

+ +

另见

+ + diff --git a/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html b/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..b657f2f4b0 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,182 @@ +--- +title: GlobalEventHandlers.onwheel +slug: Web/API/GlobalEventHandlers/onwheel +tags: + - API + - DOM + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - onwheel +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +

{{ ApiRef("DOM") }}

+ +

归纳说明

+ +

{{domxref("GlobalEventHandlers")}} 的 onwheel 特性指向当前元素的滑轮滑动事件函数 {{domxref("EventHandler")}}。

+ +
+

注意：不要混淆 onwheel 和 {{domxref("GlobalEventHandlers.onscroll", "onscroll")}}：onwheel 通常用于处理滑轮的滚动事件，而 onscroll 用于处理某个对象内容的滚动。

+
+ +

语法

+ +
target.onwheel = functionRef;
+
+ +

值

+ +

functionRef 是一个函数名或者函数表达式。该函数接受一个 {{domxref("WheelEvent")}} 对象作为唯一的传入参数。

+ +

举例

+ +

以下例子展示了如何使用鼠标（或其它光标设备）的滚轮来缩放一个元素。

+ +

HTML

+ +
<div>Scale me with your mouse wheel.</div>
+ +

CSS

+ +
body {
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background: #cdf;
+  padding: 5px;
+  transition: transform .3s;
+}
+ +

JavaScript

+ +
function zoom(event) {
+  event.preventDefault();
+
+  if (event.deltaY < 0) {
+    // 放大
+    scale *= event.deltaY * -2;
+  }
+  else {
+    // 缩小
+    scale /= event.deltaY * 2;
+  }
+
+  // 限制缩放
+  scale = Math.min(Math.max(.125, scale), 4);
+
+  // 应用缩放过渡效果
+  el.style.transform = `scale(${scale})`;
+}
+
+let scale = 1;
+const el = document.querySelector('div');
+document.onwheel = zoom;
+ +

结果

+ +

{{EmbedLiveSample("Examples", 700, 400)}}

+ +

详情指南

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidAndroid WebviewChrome for AndroidFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

注意

+ +

当用户在相应元素上滚动滑轮便触发 {{ event("wheel") }} 事件。

+ +

参见

+ + + +

+ +

+ +

+ +

+ +

+ +

diff --git "a/files/zh-cn/web/api/globaleventhandlers/\346\227\266\351\225\277\346\224\271\345\217\230/index.html" "b/files/zh-cn/web/api/globaleventhandlers/\346\227\266\351\225\277\346\224\271\345\217\230/index.html" new file mode 100644 index 0000000000..2c3923fca9 --- /dev/null +++ "b/files/zh-cn/web/api/globaleventhandlers/\346\227\266\351\225\277\346\224\271\345\217\230/index.html" @@ -0,0 +1,52 @@ +--- +title: GlobalEventHandlers.ondurationchange +slug: Web/API/GlobalEventHandlers/时长改变 +tags: + - API + - Audio + - Video +translation_of: Web/API/GlobalEventHandlers/ondurationchange +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("GlobalEventHandlers")}} 的ondurationchange属性是一个处理 {{event("durationchange")}} 事件的{{domxref("EventHandler")}} 。

+ +

durationchange事件会在duration发生变更时触发。

+ +

语法

+ +
element.ondurationchange = handlerFunction;
+var handlerFunction = element.ondurationchange;
+
+ +

handlerFunction可以为null也可以是一个处理该事件的JavaScript方法。

+ +

规范说明

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG','#handler-ondurationchange','ondurationchange')}}{{Spec2('HTML WHATWG')}}
+ +

浏览器兼容

+ + + +

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

+ +

其他

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