diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/globaleventhandlers | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/globaleventhandlers')
68 files changed, 6601 insertions, 0 deletions
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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</p> + +<div class="note"> +<p><strong>注意：这个属性还没有正式的标准。它在 </strong>{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 说明书里被规定且不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性没有被广泛应用。</p> +</div> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="eval">var moveHandler = someElement.ontouchmove; +</pre> + +<h3 id="Return_Value" name="Return_Value">Return value</h3> + +<dl> + <dt><code>moveHandler</code></dt> + <dd>The <em>touchmove</em> event handler for element <code>someElement</code>.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>This example shows two ways to use <em>ontouchmove</em> to set an element's <em>touchmove</em> event handler.</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Non-stable version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ event("touchmove") }}</li> +</ul> 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 +--- +<div> +<div>{{ ApiRef("HTML DOM") }}</div> +</div> + +<p><strong><code>GlobalEventHandlers</code></strong> 描述了一系列web worker的事件接口 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}, 或 {{domxref("WorkerGlobalScope")}}。这里面的每一个接口都可以添加更多的事件句柄。</p> + +<div class="blockIndicator note"> +<p>Note:<code>GlobalEventHandlers</code> 是一个混入对象(mixin)而不是一个真正的接口，所以无法创建直接基于<code>GlobalEventHandlers</code> 的对象。</p> +</div> + +<h2 id="属性">属性</h2> + +<p>除了下面的事件句柄外，此接口不包含任何其他属性。</p> + +<h3 id="Event_handlers">Event handlers</h3> + +<p>这些事件定义在 {{domxref("GlobalEventHandlers")}} 中, 并被混入和实现在{{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}上，任意html元素、document对象，window对象上均可以使用它提供的属性， 即时是全局的{{domxref("WorkerGlobalScope")}}。</p> + +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>这是一个事件句柄 {{domxref("EventHandler")}} ，当停止{{event("abort")}} 事件触发时会被调用。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> + <dd>这是一个事件句柄 {{domxref("EventHandler")}} ，当 CSS 动画取消{{event("animationcancel")}}事件触发时被调用，这表示某个正在执行的CSS动画被取消了。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> + <dd>这是一个事件句柄 {{domxref("EventHandler")}} ，当 CSS 动画播放完成{{event("animationend")}} 事件触发时被调用，这表示某个CSS动画已经播放完成了。</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>这是一个事件句柄 {{domxref("EventHandler")}} ，当失去焦点 {{event("blur")}} 事件触发时会被调用。</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>这是一个错误发生时的事件句柄 {{domxref("EventHandler")}} ，当发生错误{{event("error")}} 事件时会被调用。</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("focus")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplay")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("canplaythrough")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("change")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("click")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("close")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("contextmenu")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("cuechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dblclick")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drag")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragexit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("dragstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("drop")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("durationchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("emptied")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ended")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("input")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("invalid")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keydown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keypress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("keyup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("load")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadeddata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadedmetadata")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("loadstart")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousedown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseenter")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousemove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mouseup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("mousewheel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenchange")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandler.onmozfullscreenerror")}} {{non-standard_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("fullscreenerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pause")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("play")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("playing")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerdown")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointermove")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerup")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointercancel")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerover")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerout")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerevent")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerleave")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockchange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("pointerlockerror")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("progress")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("ratechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("reset")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("scroll")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeked")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("seeking")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("select")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("show")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("sort")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("stalled")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("submit")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("suspend")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("timeupdate")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("volumechange")}} event is raised.</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>Is an {{domxref("EventHandler")}} representing the code to be called when the {{event("waiting")}} event is raised.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<p><em>This interface defines no method.</em></p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>Adds <code>onpointerlockchange</code> and <code>onpointerlockerror</code> on {{domxref("Document")}}. It is experimentally implemented on <code>GlobalEventHandlers</code>.</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>No change since the latest snapshot, {{SpecName("HTML5.1")}}.</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Added <code>onsort</code> since the {{SpecName("HTML 5")}} snapshot.</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>Snapshot of {{SpecName("HTML WHATWG")}}. Creation of <code>GlobalEventHandlers</code> (properties where on the target before it).</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoDesktop(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoDesktop(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoDesktop(10)}}</td> + <td>30.0</td> + <td>5.5</td> + <td>17</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code> {{experimental_inline}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoDesktop(10)}} as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code></td> + <td>{{CompatVersionUnknown}} as <code>onwebkitpointerlockchange</code>, <code>onwebkitpointerlockerror</code></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code>, <code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatVersionUnknown}} behind the <code>dom.w3c_pointer_events.enabled</code> pref (disabled by default)</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondrag</code>, <code>ondragend</code>, <code>ondragenter</code>, <code>ondragleave</code>, <code>ondragover</code>, <code>ondragstart</code>, <code>ondrop</code></td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncanplay</code>, <code>oncanplaythrough</code>, <code>ondurationchange</code>, <code>onemptied</code>, <code>onended</code>, <code>onloadeddata</code>, <code>onloadedmetadata</code>, <code>onloadstart</code>, <code>onpause</code>, <code>onplay</code>, <code>onplaying</code>, <code>onprogress</code>, <code>onratechange</code>, <code>onseeked</code>, <code>onseeking</code>, <code>onstalled</code>, <code>ontimeupdate</code>, <code>onvolumechange</code>, <code>onwaiting</code></td> + <td>{{CompatGeckoMobile(1.9.1)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmouseenter</code>, <code>onmouseleave</code></td> + <td>{{CompatGeckoMobile(10)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsuspend</code></td> + <td>{{CompatGeckoMobile(1.9.2)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncancel</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onclose</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>oncuechange</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>ondragexit</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmousewheel</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onsort</code></td> + <td>{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onmozfullscreenchange</code>, <code>onmozfullscreenerror</code> {{non-standard_inline}}</td> + <td>{{CompatVersionUnknown}}</td> + <td rowspan="1">{{CompatNo}}</td> + <td rowspan="1">{{CompatNo}}</td> + <td rowspan="1">{{CompatNo}}</td> + <td rowspan="1">{{CompatNo}}</td> + </tr> + <tr> + <td><code>onpointerlockchange</code>, <code>onpointerlockerror</code></td> + <td>{{CompatGeckoMobile(10)}} as <code>onmozpointerlockchange</code>, <code>onmozpointerlockerror</code></td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + </tr> + <tr> + <td><code>onpointercancel</code>, <code>onpointerdown</code>, <code>onpointerup</code>, <code>onpointermove</code>, <code>onpointerout</code>, <code>onpointerover</code>, <code>onpointerenter</code>, <code>onpointerleave</code>, <code>ongotpointercapture</code>, <code>onlostpointercapture</code></td> + <td>{{CompatVersionUnknown}} behind the <code>dom.w3c_pointer_events.enabled</code> pref (disabled by default)</td> + <td rowspan="1">{{CompatNo}}</td> + <td rowspan="1">{{CompatUnknown}}</td> + <td rowspan="1">{{CompatNo}}</td> + <td rowspan="1">{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("Element")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h2 id="Summary" name="Summary">摘要</h2> + +<p>一个中断事件的事件处理器发送到window全局对象。（Firefox 2 和Safari不可用）</p> + +<p>TODO 要定义什么是“abort”。通过窗口管理关掉窗口么？停止页面的加载？有什么意图和理由（用户，网络或服务器）？在哪一步被发起或被捕获？对于IE浏览器，onabort只可用于<code>img</code>标签。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">window.onabort =<em>funcRef</em> +</pre> + +<ul> + <li><code>funcRef</code>是一个函数引用</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush:js">window.onabort = function() { + alert("Load aborted."); +}</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onabort','onabort')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"> 浏览器兼容性</h2> + +<article> +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> +</article> 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 +--- +<div>{{APIRef("CSS3 Animations")}}</div> + +<p>animationcancel是一个事件处理操作,这个事件在<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a>属性意外中断时派发出来(换句话说，任何时候animation停止运行不会发出一个animationend 事件，比如，当animation-name改变以后，animation 就会被移除，或者动画节点隐藏—当前元素或者任何包含的节点隐藏)—使用css时.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>animCancelHandler</em> = <em>target</em>.onanimationcancel; + +<em>target</em>.onanimationcancel = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="Value">Value</h3> + +<p>A {{jsxref("Function")}} to be called when an {{event("animationcancel")}} event occurs indicating that a CSS animation has begun on the <em><code>target</code></em>, 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.</p> + +<h2 id="Example" name="Example">Example</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><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></pre> + +<h3 id="CSS_content">CSS content</h3> + +<div class="hidden"> +<pre class="brush: css">:root { + --boxwidth:50px; +} + +.main { + width: 300px; + height:300px; + border: 1px solid black; +} + +.button { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 0; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +} + +#text { + width: 46px; + padding: 10px; + position: relative; + text-align: center; + align-self: center; + color: white; + font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif; +} + + </pre> +</div> + +<p>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.</p> + +<pre class="brush: css">#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; +} + +</pre> + +<p>The animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner.</p> + +<pre class="brush: css">@keyframes slideBox { + from { + left:0; + top:0; + } + to { + left:calc(100% - var(--boxwidth)); + top:calc(100% - var(--boxwidth)) + } +} +</pre> + +<p>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.</p> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<p>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.</p> + +<pre class="brush: js">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"; +}; + + +</pre> + +<p>Then we set up the <code>handleCancelEvent()</code> 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.</p> + +<pre class="brush: js">function handleCancelEvent(event) { + log("Animation canceled", event); +}; + +</pre> + +<p>Then we add a method to handle toggle {{cssxref("display")}} between <code>"</code><code>flex"</code> and <code>"</code><code>none"</code> and establish it as the handler for a {{event("click")}} event on the "Hide/Show" the Box button:</p> + +<pre class="brush: js">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"; + } +}</pre> + +<p>Toggling the box to <code>display: none</code> has the effect of aborting its animation. In browsers that support {{event("animationcancel")}}, the event is fired and this handler is called.</p> + +<div class="note"> +<p>At this time, no major browser supports <code>animationcancel</code>.</p> +</div> + +<h3 id="Result">Result</h3> + +<p>Assembled together, you get this:</p> + +<p>{{ EmbedLiveSample('Example', 500, 400) }}</p> + +<p>If your browser supports <code>animationcancel</code>, hiding the box using the button will cause a message to be displayed about the event.</p> + +<h2 id="Specification">Specification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationcancel','onanimationcancel')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] For details on the status of implementation in Firefox, see {{bug(1302648)}}.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{event("animationcancel")}} event this event handler is triggered by.</li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> 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 +--- +<h2 id="概述">概述</h2> + +<p>事件处理程序。 当CSS动画到达其活动期的结束时发送此事件</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>animEndHandler</em> = <em>target</em>.onanimationend; + +<em>target</em>.onanimationend = <em>事件处理函数</em> +</pre> + +<h3 id="值">值</h3> + +<p>当<em><code>target</code></em>(HTML元素， document 或者 window)的CSS动画已经开始，{{event("animationend")}}事件会触发同时<code>事件处理函数</code>会被调用。<code>事件处理函数</code>会接收到唯一的参数：{{domxref("AnimationEvent")}} 描述发生的事件。</p> + +<h2 id="例子">例子</h2> + +<p>{{Page("/en-US/docs/Web/API/GlobalEventHandlers/onanimationstart", "Example")}}</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationend','onanimationend')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li>The {{event("animationend")}} event this event handler is triggered by</li> + <li>{{domxref("AnimationEvent")}}</li> + <li>The {{event("animationstart")}} event</li> +</ul> 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 +--- +<div>{{APIRef("CSS3 Animations")}}{{Draft}}</div> + +<p> {{event("animationiteration")}}事件的处理器 . 当 <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animation</a> 运动到最后一帧时触发。 An iteration ends when a single pass through the sequence of animation instructions is completed by executing the last animation step.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>animIterationHandler</em> = <em>target</em>.onanimationiteration; + +<em>target</em>.onanimationiteration = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="Value">Value</h3> + +<p>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 <em><code>target</code></em>, 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.</p> + +<h2 id="Example" name="Example">实例</h2> + +<p>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.</p> + +<div class="hidden"> +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><div class="main"> + <div id="box"> + <div id="text">Box</div> + </div> +</div> + +<div class="button" id="play"> + Begin Demonstration +</div></pre> +</div> + +<h3 id="CSS_content">CSS content</h3> + +<div class="hidden"> +<pre class="brush: css">:root { + --boxwidth:50px; +} + +.main { + width: 300px; + height:300px; + border: 1px solid black; +} + +.button { + cursor: pointer; + width: 300px; + border: 1px solid black; + font-size: 16px; + text-align: center; + margin-top: 0; + padding-top: 2px; + padding-bottom: 4px; + color: white; + background-color: darkgreen; + font: 14px "Open Sans", "Arial", sans-serif; +} + +#text { + width: 46px; + padding: 10px; + position: relative; + text-align: center; + align-self: center; + color: white; + font: bold 1.4em "Lucida Grande", "Open Sans", sans-serif; +} + + </pre> +</div> + +<p>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.</p> + +<pre class="brush: css">#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; +} + +</pre> + +<p>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.</p> + +<pre class="brush: css">@keyframes slideBox { + from { + left:0; + top:0; + } + to { + left:calc(100% - var(--boxwidth)); + top:calc(100% - var(--boxwidth)) + } +} +</pre> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<p>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.</p> + +<pre class="brush: js">var box = document.getElementById("box"); +var iterationCounter = 0; + +box.onanimationiteration = function(event) { + box.style.animationPlayState = "paused"; + document.getElementById("play").innerHTML = "Start Iteration #" + (iterationCounter+1); +}; +</pre> + +<p>This sets up two global variables: <code>box</code>, which references the <code>"box"</code> element that we're animating, and <code>iterationCounter</code>, which is initially zero, which indicates how many iterations of the animation have occurred.</p> + +<p>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.</p> + +<p>Finally, we set up a handler for a click on the button that runs the animation:</p> + +<pre class="brush: js">document.getElementById("play").addEventListener("click", function(event) { + box.style.animationPlayState = "running"; + iterationCounter++; +}, false);</pre> + +<p>This sets the box element's {{cssxref("animation-play-state")}} to "running" and increments the iteration counter. That's all there is to it!</p> + +<h3 id="Result">Result</h3> + +<p>Assembled together, you get this:</p> + +<p>{{ EmbedLiveSample('Example', 500, 400) }}</p> + +<p>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.</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Animations','#eventdef-animationevent-animationiteration','onanimationiteration')}}</td> + <td>{{Spec2('CSS3 Animations')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="兼容性">兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Microsoft Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoDesktop(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + <td>{{CompatGeckoMobile(51)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}<br> + {{CompatVersionUnknown}} (unprefixed)</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>The {{event("animationiteration")}} event this event handler is triggered by.</li> + <li>{{domxref("AnimationEvent")}}</li> +</ul> 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 +--- +<div> +<div>{{SeeCompatTable}}{{ ApiRef("HTML DOM") }}</div> +</div> + +<div> </div> + +<p><strong>onauxclick</strong> 属性是一个 {{domxref("EventHandler")}}，当 {{event("auxclick")}} 事件发生时被调用，例如按下了输入设备上的非主按钮 (e.g. 鼠标中键)。</p> + +<p>实现该属性的一个目标是，提高浏览器与按钮行为之间的兼容性 - 事件行为正在更新，以便 {{Event("click")}} 只触发主按钮点击（例如，鼠标左键）。然后开发人员可以使用 {{Event("auxclick")}} 来为非主按钮点击提供明确的行为。在此之前，{{Event("click")}} 通常会针对所有输入设备按钮点击，浏览器行为有些不一致。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><var>element</var>.onauxclick = <var>functionRe<em>f</em></var><em>(e);</em> +</pre> + +<p>事件处理函数是一个 {{domxref("MouseEvent")}} 对象。只有事件被触发的按钮不同，该事件和普通点击事件的行为是完全相同的。</p> + +<h2 id="Example" name="Example">示例</h2> + +<p>在这个例子中我们定义了两个事件处理函数：<code>onclick</code> 和 <code>onauxclick</code>。前者改变按钮背景的颜色，而后者改变按钮前景（文本）的颜色。您可以通过使用多按钮鼠标尝试演示来查看这两种功能(<a href="https://mdn.github.io/dom-examples/auxclick/">see it live on GitHub</a>; also <a href="https://github.com/mdn/dom-examples/blob/master/auxclick/index.html">see the source code</a>)。</p> + +<pre class="brush: js">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; +}</pre> + +<div class="note"> +<p><strong>Note</strong>: 如果您使用的是三键鼠标，您会注意到在单击任一非鼠标左键时该 <code>onauxclick</code> 处理程序会运行。</p> +</div> + +<h2 id="Notes" name="Notes">Notes</h2> + +<p>当用户点击一个元素时，将引发该 <code>click</code> 事件。之后的 click 事件将发生在 <code>mousedown</code> 和 <code>mouseup</code> 事件之后。</p> + +<p>每次只有一个 <code>click</code> 处理程序可以通过此属性分配给一个对象。您可能倾向于使用{{domxref("EventTarget.addEventListener()")}} 方法，因为它更灵活并且是 DOM Events 规范的一部分。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<p><code>onauxclick</code> 不是任何官方规范的一部分，它被定义在 <a href="https://wicg.github.io/auxclick/">auxclick Draft Community Group Report</a>.</p> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><strong>onblur</strong>属性用来获取或设置当前元素的onBlur事件的事件处理函数</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">element.onblur = function; +</pre> + +<ul> + <li><code>function</code> 是一个函数名, 没有括号()和任何参数,也可以是一个匿名函数,如下:</li> +</ul> + +<pre class="eval">element.onblur = function() { alert("检测到onblur事件!"); }; +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<pre><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> +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>当一个元素失去焦点时会触发<code>blur</code>事件.</p> + +<p>在IE中,几乎所有类型的元素都可以触发blur事件,但在基于gecko的浏览器中,大部分元素都不能触发blur事件.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>DOM Level 0不属于任何规范.</p> + +<p>{{ languages( {"fr": "fr/DOM/element.onblur","en": "en/DOM/element.onblur" } ) }}</p> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} 的<code><strong>oncancel</strong></code> 属性是一个{{domxref("EventHandler")}}，它是用来处理发送给{{HTMLElement("dialog")}}元素的{{event("cancel")}} 事件的。</p> + +<p>当用户需要离开一个<dialog>元素的时候就会触发 <code>cancel</code> 事件. 这个事件处理器会防止事件向上传递,因此任何父处理器都不会接受到该事件。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.oncancel = <em>functionRef</em>; +</pre> + +<h3 id="参数">参数</h3> + +<p><code>functionRef</code> 是一个函数名 或者 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>. 这个函数接收一个 {{domxref("Event")}} 对象作为它唯一的参数.</p> + +<p>每次只有一个 <code>oncancel</code> 处理器可以被赋值给一个对象. 你可能更喜欢用 {{domxref("EventTarget.addEventListener()")}} 方法, 因为它更灵活.</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncancel','oncancel')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">本页的兼容性表格由结构化的数据生成，如果你想贡献这些数据你可以检出<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并且发送一个 pull request给我们。</div> + +<p>{{Compat("api.GlobalEventHandlers.oncancel")}}</p> + +<h2 id="另请参阅">另请参阅</h2> + +<ul> + <li>{{event("cancel")}}事件</li> + <li>HTML {{HTMLElement("dialog")}}元素</li> + <li>相关的事件处理函数：{{domxref("GlobalEventHandlers.onclose")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}}的<strong><code>oncanplay</code></strong> 属性是{{domxref("EventHandler")}} 处理 {{event("canplay")}} 事件。</p> + +<p><code>当用户代理能够播放媒体时canplay</code> 事件被触发 , 但是预估没有加载全部的数据以支持媒体播放完毕。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.oncanplay = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.oncanplay; +</pre> + +<p><code>handlerFunction</code>或者是 <code>null</code> 或者是一个 <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript function</a> 指定事件的处理句柄。</p> + +<h2 id="说明">说明</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oncanplay")}}</p> + +<h2 id="参考资料">参考资料</h2> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>全局事件处理器（{{domxref("GlobalEventHandlers")}} )之一的 {{event("canplaythrough")}} 属性，是处理当前元素{{event("canplaythrough")}} 事件的事件处理器{{domxref("EventHandler")}} .</p> + +<p>当用户代理可以播放媒体资源并且可以播放至其结束而不必进一步缓冲内容时，触发<code>canplaythrough</code>事件。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.oncanplaythrough = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.oncanplaythrough; +</pre> + +<p> </p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("canplaythrough")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><code>onchange</code>可以用来获取或设置当前元素的<code>change</code>事件的事件处理函数.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">element.onchange = 事件处理函数 +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>下面的伪代码演示了,在Mozilla中,onchange事件是如何触发的:</p> + +<pre> control.onfocus = focus; + control.onblur = blur; + function focus () { + original_value = control.value; + } + + function blur () { + if (control.value != original_value) + control.onchange(); + } +</pre> + +<p>因此,如果你在你的<code>focus</code>或<code>blur事件的处理函数里修改一个控件的值的话,</code>你可能遇到一些关于<code>change</code>事件意想不到的现象.另外, <code>change</code>事件是在<code>blur</code>事件发生之后才触发的. 这一点和IE不同.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>DOM Level 0不属于任何标准</p> + +<h3 id="See_Also" name="See_Also">相关链接</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents">DOM Level 2: HTML event types</a></p> + +<p>{{ languages( { "fr": "fr/DOM/element.onchange" ,"en": "en/DOM/element.onchange" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>全局事件处理器（{{domxref("GlobalEventHandlers")}}）之一的 <code><strong>onclick</strong></code> 属性，是处理当前元素的 {{event("click")}} 事件的事件处理器（{{domxref("EventHandler")}}）。</p> + +<p>当用户点击一个元素时，会触发 <code>click</code> 事件。在每次点击的整个过程中，<code>click</code> 事件的运行顺序在 {{event("mousedown")}} 和 {{event("mouseup")}} 事件之后。</p> + +<div class="note"><strong>注意：</strong>当你使用 <code>click</code> 事件去触发一个动作时，也要考虑向 {{event("keydown")}} 事件添加此动作，以便允许不使用鼠标或触摸屏的用户进行同样的操作。</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js"><var>element</var>.onclick = <var>functionRef</var>; +</pre> + +<p><code><em>functionRef</em></code> 是一个函数名称，或一个<a href="/zh-CN//docs/Web/JavaScript/Reference/Operators/function">函数</a>表达式。该函数接收 {{domxref("MouseEvent")}} 对象作为其唯一参数。在函数内，<code><a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/this">this</a></code> 是触发当前事件的元素。</p> + +<p>同一时刻，每个 <code>onclick</code> 接收器只能指向唯一一个对象。所以，你可能更倾向于使用{{domxref("EventTarget.addEventListener()")}} 的方法，这种方法更加灵活，同时也是 DOM 事件规范格式。</p> + +<h2 id="例子">例子</h2> + +<p>这个例子会记录每次点击的坐标。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush:html"><p>请随意点击本例子。</p> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let log = document.getElementById('log'); + +document.onclick = inputChange; + +function inputChange(e) { + log.textContent = `Position: (${e.clientX}, ${e.clientY})`; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<p>也可以使用匿名函数：</p> + +<pre class="brush:js">p.onclick = function() { alert("moot!"); }; +</pre> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onclick")}}</p> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("click")}} 事件</li> + <li>与 <code>onclick</code> 有关的事件处理器 + <ul> + <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li> + <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p>{{domxref("GlobalEventHandlers")}} mixin 的 <code><strong>onclose</strong></code> 属性是一个 {{domxref("EventHandler")}}, 用来处理发送给 {{HTMLElement("dialog")}} 元素的 {{event("close")}} 事件。</p> + +<p>当用户关闭一个 <code><dialog></code> 时，<code>close</code> 事件将被触发。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>如果要处理 window 的关闭，使用 {{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} 或 {{domxref("WindowEventHandlers.onunload", "onunload")}}.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="notranslate"><em>target</em>.onclose = <em>functionRef</em>;</pre> + +<h3 id="参数">参数</h3> + +<p><code>functionRef</code> 是一个函数名称或 <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>。 该函数接受一个 {{domxref("Event")}} 对象作为它唯一的参数。</p> + +<p>每次只能给一个对象添加 <code>onclose</code> 回调。 你可能更喜欢使用 {{domxref("EventTarget.addEventListener()")}} 方法，因为它更加灵活。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">文档</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.GlobalEventHandlers.onclose")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("close")}} 事件</li> + <li>HTML {{HTMLElement("dialog")}} 元素</li> + <li>相关事件回调： {{domxref("GlobalEventHandlers.oncancel")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>获取或设置当前窗口contextmenu事件的事件处理函数。除非默认行为已经阻止了(看下面的例子是如何阻止的)，否则右键菜单会被激活。注意此事件会发生在没有阻止右键事件的情况下而且这不取决于此元素是否拥有了<a href="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/" title="http://hacks.mozilla.org/2011/11/html5-context-menus-in-firefox-screencast-and-code/">"contextmenu"属性</a>.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.oncontextmenu = funcRef; +//funcRef是个函数引用 +</pre> + +<h3 id="Example" name="Example">例子</h3> + +<p>这个例子会取消页面右键的功能：</p> + +<pre class="eval">window.oncontextmenu = function () { + return false; +} +//该窗口禁止使用右键 +</pre> + +<p>{{ languages( {"en": "en/DOM/window.oncontextmenu" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<div><strong><code>oncuechange</code></strong> 属性属于{{domxref("GlobalEventHandlers")}}，是一个处理{{event("cuechange")}}事件的{{domxref("EventHandler")}}。</div> + +<div>当{{domxref("TextTrack")}}更改了当前显示的提示时，<code>cuechange</code> 事件将会触发。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.oncuechange = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.oncuechange; +</pre> + +<p><code>handlerFunction</code> 可以为 <code>null</code>，也可以是一个处理指定事件的<a href="/zh-CN/docs/Web/JavaScript/Reference/Functions">JavaScript函数</a>。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oncuechange','oncuechange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页上的兼容性表是由结构化数据生成的。如果您想提供数据, 请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>并pull request给我们。</div> + +<p>{{Compat("api.GlobalEventHandlers.oncuechange")}}</p> + +<h2 id="查看更多">查看更多</h2> + +<ul> + <li>{{event("cuechange")}}</li> + <li><a href="/zh-CN/docs/Web/Guide/Events/Event_handlers">DOM事件处理函数</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>ondblclick</strong>属性用来获取或设置当前元素的<code>dblclick</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.ondblclick = function; +</pre> + +<ul> + <li><code>function</code> 是一个函数名,后面没有括号(),或者是一个匿名的函数表达式,比如</li> +</ul> + +<pre class="eval">element.ondblclick = function() { alert("触发了dblclick事件!"); }; +</pre> + +<h3 id="例子">例子</h3> + +<pre class="brush: html"><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> +</pre> + +<h3 id="备注">备注</h3> + +<p>在当前元素上双击鼠标左键会触发<code>dblclick</code>事件.</p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.ondblclick","zh-cn": "zh-cn/DOM/element.ondblclick" } ) }}</p> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>一个{{event("drag")}}事件的{{domxref("GlobalEventHandlers","global event handler")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>dragHandler</var> = <var>targetElement</var>.ondrag; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>dragHandler</code></dt> + <dd>元素 <code>targetElement</code>的<em>drag</em>事件handler。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了使用<em>ondrag</em>属性handler设置一个元素的<em>drag</em>事件handler。</p> + +<pre class="brush: js"><!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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ondrag")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{event("drag")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("dragleave")}} event.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <var>dragleaveHandler</var> = <var>targetElement</var>.ondragleave; +</pre> + +<h3 id="Return_value">Return value</h3> + +<dl> + <dt><code>dragleaveHandler</code></dt> + <dd>The <em>dragleave</em> event handler for element <code>targetElement</code>.</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>This example demonstrates using the {{domxref("GlobalEventHandlers.ondragleave","ondragleave")}} attribute handler to set an element's {{event("dragleave")}} event handler.</p> + +<pre class="brush: js"><!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> + +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("dragleave")}}</li> +</ul> 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 +--- +<div>drop 事件的全局处理函数</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>dropHandler</var> = <var>targetElement</var>.ondrop; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>dropHandler</code></dt> + <dd>目标元素的 drop 事件处理函数。</dd> +</dl> + +<h2 id="Example">Example</h2> + +<p>下面这个示例演示了 ondrop 属性的用法来指定 drop 事件的处理函数。</p> + +<pre class="brush: js"><!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> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>4</td> + <td>{{CompatGeckoDesktop("1.9.1")}}</td> + <td>10</td> + <td>12</td> + <td>3.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("drop")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>The <strong><code>onended</code></strong> property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("ended")}} events.</p> + +<p>The <code>ended</code> event is fired when playback has stopped because the end of the media was reached.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onended = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onended; +</pre> + +<p><code>handlerFunction</code> 可以为 <code>null</code> 或者具体的事件响应函数。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onended','onended')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"> 浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onended")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{event("ended")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<div>混合事件 {{domxref("GlobalEventHandlers")}} 的 onerror 属性是用于处理 {{event("error")}} 的事件</div> + +<div></div> + +<p><code><a href="/en-US/docs/Web/Events/error">Error</a></code>事件的<a href="/zh-CN/docs/Web/Guide/Events/Event_handlers">事件处理程序</a>，在各种目标对象的不同类型错误被触发：</p> + +<ul> + <li>当<strong>JavaScript运行时错误</strong>（包括语法错误）发生时，{{domxref("window")}}会触发一个{{domxref("ErrorEvent")}}接口的<code><a href="/en-US/docs/Web/Events/error">error</a></code>事件，并执行<code>window.onerror()</code>。</li> + <li>当一项资源（如{{HTMLElement("img")}}或{{HTMLElement("script")}}）<strong>加载失败</strong>，加载资源的元素会触发一个{{domxref("Event")}}接口的<code><a href="/en-US/docs/Web/Events/error">error</a></code>事件，并执行该元素上的<code>onerror()</code>处理函数。这些error事件不会向上冒泡到window，不过（至少在Firefox中）能被单一的{{domxref("window.addEventListener")}}捕获。</li> +</ul> + +<p>加载一个全局的<code>error</code>事件处理函数可用于自动收集错误报告。</p> + +<h2 id="语法">语法</h2> + +<p>由于历史原因，<code>window.onerror</code>和<code>element.onerror</code>接受不同的参数。</p> + +<h3 id="window.onerror">window.onerror</h3> + +<pre class="brush: js">window.onerror = function(message, source, lineno, colno, error) { ... } +</pre> + +<p>函数参数：</p> + +<ul> + <li><code>message</code>：错误信息（字符串）。可用于HTML <code>onerror=""</code>处理程序中的<code>event</code>。</li> + <li><code>source</code>：发生错误的脚本URL（字符串）</li> + <li><code>lineno</code>：发生错误的行号（数字）</li> + <li><code>colno</code>：发生错误的列号（数字）{{gecko_minversion_inline("31.0")}}</li> + <li><code>error</code>：<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error">Error对象</a>（对象）{{gecko_minversion_inline("31.0")}}</li> +</ul> + +<p>若该函数返回<code>true</code>，则阻止执行默认事件处理函数。</p> + +<h3 id="window.addEventListenererror">window.addEventListener('error')</h3> + +<pre><code>window.addEventListener('error', function(event) { ... })</code> +</pre> + +<p>{{domxref("ErrorEvent")}} 类型的<code>event</code>包含有关事件和错误的所有信息。</p> + +<h3 id="element.onerror">element.onerror</h3> + +<pre class="brush: js">element.onerror = function(event) { ... } +</pre> + +<p><code>element.onerror</code>使用单一{{domxref("Event")}}参数的函数作为其处理函数。</p> + +<h2 id="注意事项">注意事项</h2> + +<p>当加载自<a href="/en-US/docs/Web/Security/Same-origin_policy">不同域</a>的脚本中发生语法错误时，为避免信息泄露（参见{{bug("363897")}}），语法错误的细节将不会报告，而代之简单的<code><strong>"Script error."</strong></code>。在某些浏览器中，通过在{{HTMLElement("script")}}使用<code>{{htmlattrxref("crossorigin","script")}}</code>属性并要求服务器发送适当的 <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> HTTP 响应头，该行为可被覆盖。一个变通方案是单独处理"Script error."，告知错误详情仅能通过浏览器控制台查看，无法通过JavaScript访问。</p> + +<pre class="brush: js">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; +};</pre> + +<p>当使用行内HTML标签（<code><body onerror="alert('an error occurred')"></code>）时，HTML规范要求传递给<code>onerror</code>的参数命名为<code>event</code>、<code>source</code>、<code>lineno</code>、<code>colno</code>、<code>error</code>。针对不满足此要求的浏览器，传递的参数仍可使用<code>arguments[0]</code>到<code>arguments[2]</code>来获取。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onerror','onerror')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>在Firefox 14之前，当{{HTMLElement("script")}}加载失败时，<code>window.onerror</code>被传入<strong>"Error loading script"</strong>信息。该bug已在{{bug("737087")}}修复，取而代之，在这种情况下，<code>scriptElement.onerror</code>将被触发。</p> + +<p>自Firefox 31始加入最后两个参数（<code>colno</code> and <code>error</code>），意味着通过提供的<code>Error</code>对象，你可以从<code>window.onerror</code>访问脚本错误的stack trace（{{bug("355430")}}。）</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="http://blog.getsentry.com/2016/01/04/client-javascript-reporting-window-onerror.html">Capture and report JavaScript errors with window.onerror (blog.getsentry.com, 2016)</a></li> + <li><a href="https://danlimerick.wordpress.com/2014/01/18/how-to-catch-javascript-errors-with-window-onerror-even-on-chrome-and-firefox/">How to catch JavaScript Errors with window.onerror (even on Chrome and Firefox) (danlimerick.wordpress.com, 2014)</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onfocus</strong> 属性用来获取或设置当前元素的<code>focus</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onfocus = <em>event handling code</em> +</pre> + +<h3 id="备注">备注</h3> + +<p>当前元素获得键盘焦点时会触发<code>focus</code>事件.</p> + +<p>在IE中,几乎所有类型的元素都会触发<code>focus</code>事件, 但在Gecko中,只有少数几种类型的元素会触发<code>focus</code>事件.</p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.onfocus","en": "en/DOM/element.onfocus" } ) }}</p> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<div></div> + +<p>{{domxref("GlobalEventHandlers")}} 混入对象(mixin)的属性<code><strong>onformdata</strong></code> 是用于处理 {{event("formdata")}} 事件的, 它在整个列表展示所构建的表单数据之后被触发。触发会发生在表单发送时，但也可能由对某个{{domxref("FormData.FormData", "FormData()")}} 结构体的调用所触发。<code>onformdata</code> 在 {{domxref("HTMLFormElement")}}上有效。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>target</em>.onformdata = <em>functionRef</em>; +</pre> + +<h3 id="Value">Value</h3> + +<p><code>functionRef</code> 是一个函数名或者称为 <a href="/zh-CN/docs/Web/JavaScript/Reference/Operators/function">function expression</a>. 此函数接受一个{{domxref("FormDataEvent")}}对象作为其唯一表达式参数。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">// 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); +};</pre> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table" style="height: 168px; width: 644px;"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onformdata")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/HTMLFormElement/formdata_event"><code>formdata</code> event</a></li> + <li>{{domxref("FormDataEvent")}}</li> + <li> + <p><a href="/en-US/docs/Web/API/FormData/Using_FormData_Objects">Using FormData Objects</a></p> + </li> +</ul> 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 +--- +<p>{{ApiRef("HTML DOM")}}</p> + +<p><strong><code>ongotpointercapture</code></strong> 事件是GlobalEventHandlers的属性,这个事件返回gotpointercapture类型的事件操作。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>window.<strong><code>ongotpointercapture</code></strong> = functionReference +</pre> + +<h2 id="Return_Value" name="Return_Value">例子</h2> + +<pre class="brush: js"><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.<strong><code>ongotpointercapture</code></strong> = overHandler; +} +</script> +<body onload="init();"> +<div id="target"> Touch me ... </div> +</body> +</html> +</pre> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#the-gotpointercapture-event', 'onlostpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{ event("gotpointercapture") }}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}}mixin的<code><strong>oninput</strong></code>属性是{{domxref("EventHandler")}}，它处理{{HTMLElement("input")}}，{{HTMLElement("select")}}和 {{HTMLElement("textarea")}} 元素上的 {{event("input")}} 事件。 它还会在{{domxref("HTMLElement.contentEditable", "contenteditable")}} 或 {{domxref("Document.designMode", "designMode")}}打开的元素上处理这些事件。</p> + +<div class="blockIndicator note"> +<p>注意：与<code>oninput</code>不同的是， {{domxref("GlobalEventHandlers.onchange", "onchange")}} 事件处理程序不一定会针对元素值的每次更改而调用。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>target</em>.oninput = <em>functionRef</em>;</pre> + +<h3 id="值">值</h3> + +<p><code>functionRef</code>是一个函数名或函数表达式。该函数接收{{domxref("InputEvent")}} 对象作为唯一参数。</p> + +<h2 id="示例">示例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" placeholder="Type something here to see its length."size="50"> <p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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.`; +}</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("示例")}}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.GlobalEventHandlers.oninput")}}</p> + +<p>The following links discuss compatibility issues and fixes that may be helpful when working with older browsers:</p> + +<ul> + <li><a href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">A HTML5 Browser maze, oninput support</a></li> + <li><a href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Fixing oninput in IE Using html5Widgets</a> includes polyfill for IE6-8</li> + <li>Mathias Bynens suggests <a href="http://mathiasbynens.be/notes/oninput">binding to both input and keydown</a></li> + <li><a href="http://help.dottoro.com/ljhxklln.php">oninput event | dottoro</a> has notes about bugginess in IE9</li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312094">Bug 312094 - Add support for <select oninput></a></li> +</ul> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("input")}} </li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}} 混合的<code><strong>oninvalid</strong></code>属性 是 {{domxref("EventHandler")}} 处理{{event("invalid")}} 事件。</p> + +<p><code>invalid</code> 事件被触发当一个从属元素被勾选checked 并且与之前的选中方式不同。 有效的从属元素在表单之前被选中, 或者在 <code><a href="/en-US/docs/Learn/HTML/Forms/Form_validation">checkValidity()</a></code> 方法之后它自己的表单被调用。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em>target</em>.oninvalid = <em>functionRef</em>; +var <em>functionRef</em> = <em>target</em>.oninvalid; +</pre> + +<h3 id="值">值</h3> + +<p><code>functionRef</code>是一个函数名称 或者 称为 函数表达式。这个函数需要{{domxref("Event")}} 对象做为它的参数。</p> + +<h2 id="例子">例子</h2> + +<p>这个例子用一个表单说明<code>oninvalid</code> 和 {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} 事件 句柄。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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(); +}</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="说明">说明</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="支持的浏览器">支持的浏览器</h2> + +<div class="hidden">这个兼容性表格是通过一组结构化数据生成的。如果你想贡献自己的数据，请下载并提交<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>。</div> + +<p>{{Compat("api.GlobalEventHandlers.oninvalid")}}</p> + +<h2 id="请参阅">请参阅</h2> + +<ul> + <li>{{event("invalid")}} event</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM on-event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onkeydown</strong>属性用来获取或设置当前元素的<code>keydown</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onkeydown = <em>event handling code</em> +</pre> + +<h3 id="备注">备注</h3> + +<p>当用户按下键盘上的按键时会触发<code>keydown</code>事件.</p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.onkeydown", "pl": "pl/DOM/element.onkeydown", "en": "en/DOM/element.onkeydown" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong>onkeypress</strong> 属性用来获取或设置当前元素的keypress事件的事件处理函数.</p> + +<h2 id="语法">语法</h2> + +<pre class="eval">element.onkeypress = <em>event handling code</em> +</pre> + +<h2 id="备注">备注</h2> + +<p>当用户在键盘上按下任意键时，<strong>应当</strong>会触发 keypress 事件。然则有些浏览器不会触发某些键的 kerpress 事件。</p> + +<h3 id="浏览器不兼容性">浏览器不兼容性</h3> + +<p>Webkit-based 浏览器（如 Google Chrome 及 Safari）不会触发方向键的 keypress 事件。</p> + +<p>Firefox 不会触发如 SHIFT 键等修改键的 keypress 事件。</p> + +<h2 id="示例">示例</h2> + +<h3 id="示例1：通过正则表达式在表单域中过滤数字">示例1：通过正则表达式在表单域中过滤数字</h3> + +<p>下例演示了 <code>onkeypress </code>事件在一个文本输入框内的用法——将数字输入到表单时过滤输入的内容:</p> + +<pre class="brush: html"><!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> +</pre> + +<h3 id="示例2：捕获隐藏单词的输入">示例2：捕获隐藏单词的输入</h3> + +<p>以下示例将在用户在页面的任何位置键入单词“exit”后执行某些操作。</p> + +<div class="note"><strong>Note:</strong> A more complete framework for capturing the typing of hidden words is <a class="external external-icon" href="https://github.com/madmurphy/spell.js/">available on GitHub</a>.</div> + +<pre class="brush: js">/* 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; + }; +})();</pre> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeypress','onkeypress')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onkeypress")}}</p> +</div> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="Summary">Summary</h3> + +<p><strong>onkeyup</strong>属性用来获取或设置当前元素的<code>keyup</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onkeyup = <em>event handling code</em> +</pre> + +<h3 id="例子">例子</h3> + +<pre class="eval"> <input type="text" onKeyUp="keyWasPressed(event)"> + <script>function keyWasPressed(evt){ alert(evt.keyCode) }</script> +</pre> + +<h3 id="备注">备注</h3> + +<p>在当前元素上释放键盘按键时会触发<code>keyup事件.</code></p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.onkeyup", "pl": "pl/DOM/element.onkeyup", "en": "en/DOM/element.onkeyup" } ) }}</p> 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 +--- +<p>{{ ApiRef() }}</p> + +<p>{{domxref("GlobalEventHandlers")}} mixin 的 <code>onload</code> 属性是一个事件处理程序用于处理{{domxref("Window")}}, {{domxref("XMLHttpRequest")}}, {{htmlelement("img")}} 等元素的加载事件，当资源已加载时被触发。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.onload = <em>funcRef</em>; +</pre> + +<ul> + <li> 当 window <code style="font-style: normal;">load</code> 事件触发时，<span style="font-family: 'Courier New','Andale Mono',monospace;">funcRef</span> 方法会被调用。</li> +</ul> + +<h3 id="Value">Value</h3> + +<p>funcRef 是窗口加载事件触发时调用的处理函数。</p> + +<h3 id="Example" name="Example">示例</h3> + +<pre class="brush: js">window.onload = function() { + init(); + doSomethingElse(); +}; +</pre> + +<pre><code><!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></code></pre> + +<h3 id="Notes" name="Notes">注意</h3> + +<p>在文档装载完成后会触发 <code>load</code> 事件。此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。 </p> + +<p>同时也会有 <a href="/en/Gecko-Specific_DOM_Events">Gecko-指定 DOM事件</a>，如 <code>DOMContentLoaded</code> 和 <code>DOMFrameContentLoaded</code> (它们可以使用 {{ domxref("EventTarget.addEventListener()") }} 来处理 ) ， 这些事件在页面DOM构建起来后就会触发，而不会等到其他的资源都装载完成。 </p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>这个事件处理程序在 <a class="external" href="http://www.whatwg.org/html/#handler-window-onload" title="http://www.whatwg.org/html/#handler-window-onload">HTML</a> 中指定。</p> + +<h3 id="参见">参见</h3> + +<ul> + <li><code><a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">监听事件：简单的DOM事件</a>中的 DOMContentLoaded</code> 事件 </li> + <li><code>DOMContentLoaded</code> event in <a href="https://developer.mozilla.org/en-US/docs/Listening_to_events_in_Firefox_extensions#Simple_DOM_events">Listening to events: Simple DOM events</a></li> + <li>IIEF <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression" rel="nofollow noreferrer">Immediately-invoked function expression</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></li> + <li> </li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}}的<strong><code>onloadeddata</code></strong> 属性是事件 {{event("loadeddata")}}的处理{{domxref("EventHandler")}} 。</p> + +<p><code>loadeddata</code> 事件当媒体资源的第一帧加载完成时被触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onloadeddata = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onloadeddata; +</pre> + +<p><code>handlerFunction</code> is either <code>null</code> or a <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript function</a> specifying the handler for the event.</p> + +<h2 id="说明">说明</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onloadeddata','onloadeddata')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onloadeddata")}}</p> + +<h2 id="参考资料">参考资料</h2> + +<ul> + <li>{{event("loadeddata")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}} mixin的<strong><code>onloadedmetadata</code></strong>属性是处理{{event("loadedmetadata")}}事件的{{domxref("EventHandler")}}。</p> + +<p><code>loadedmetadata</code>事件在元数据（metadata）被加载完成后触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onloadedmetadata = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onloadedmetadata; +</pre> + +<p><code>handlerFunction</code>应当是<code>null</code>或是由<a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript函数</a>声明的事件handler。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onloadedmetadata','onloadedmetadata')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">该页面上的兼容性表是由结构化数据生成的。如果您想对数据做出贡献，请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> ，并向我们发送一个pull request。</div> + +<p>{{Compat("api.GlobalEventHandlers.onloadedmetadata")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{event("loadedmetadata")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM事件句柄</a></li> +</ul> 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 +--- +<div>{{ApiRef}}</div> + +<div>{{domxref("GlobalEventHandlers")}}的<strong><code>onloadend</code></strong> 属性是用来 表示触发{{event("loadend")}}事件时（资源加载进度停止时）的{{domxref("EventHandler")}}。</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>img</var>.onloadend = <var>funcRef</var>; +</pre> + +<h3 id="Value">Value</h3> + +<p><code>funcRef是在事件源的loadend事件触发时要调用的处理函数。</code></p> + +<h2 id="范例">范例</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html notranslate"><img src="myImage.jpg"></pre> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<pre class="brush: js notranslate">// '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'); +});</pre> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onloadend")}}</p> +</div> 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 +--- +<div>{{ApiRef}}</div> + +<p>The <strong><code>onloadstart</code></strong> 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.)</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>img</var>.onloadstart = <var>funcRef</var>; +</pre> + +<h3 id="Value">Value</h3> + +<p><code>funcRef</code> is the handler function to be called when the resource's <code>loadstart</code> event fires.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="HTML_content">HTML content</h3> + +<pre class="brush: html"><img src="myImage.jpg"></pre> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<pre class="brush: js">// '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'); +});</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "webappapis.html#handler-onloadstart", "onloadstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility">Browser Compatibility</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onloadstart")}}</p> +</div> 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 +--- +<p>{{ApiRef("HTML DOM")}}</p> + +<p><span class="seoSummary">The <strong><code>onlostpointercapture</code></strong> {{domxref("EventHandler")}} property of the {{domxref("GlobalEventHandlers")}} interface returns the event handler (function) for the {{event("lostpointercapture")}} event type.</span></p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>语法</strong></span></font></p> + +<pre class="syntaxbox">window.onlostpointercapture = functionReference +</pre> + +<p> </p> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="brush: js"><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> +</pre> + +<p> </p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>规范</strong></span></font></p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#the-lostpointercapture-event', 'onlostpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>浏览器兼容性</strong></span></font></p> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOpera(44)}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(57.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatOperaMobile(44)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(57.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>{{ event("lostpointercapture") }}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onmousedown</strong>属性用来获取或设置当前元素的<code>mousedown</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onmousedown= <em>event handling code</em> +</pre> + +<h3 id="备注">备注</h3> + +<p>在当前元素上鼠标按下瞬间会触发<code>mousedown事件.</code></p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.onmousedown", "pl": "pl/DOM/element.onmousedown", "en": "en/DOM/element.onmousedown" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<div>{{domxref("GlobalEventHandlers")}}的<strong><code>onmouseenter</code></strong> 属性绑定 {{domxref("EventHandler")}} 后来处理{{event("mouseenter")}} 事件.</div> + +<div> </div> + +<p>元素绑定了监听事件后，当一个指针设备（通常是鼠标）移动到这个元素上时<code>mouseenter</code>事件将会被触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onmouseenter = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseenter; +</pre> + +<p><code>handlerFunction</code> 可以是 <code>null</code> 或者一个用于处理事件的<a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript 函数</a> 。</p> + +<h2 id="规格">规格</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onmouseenter','onmouseenter')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">本页的兼容性表是从结构化数据中生成的，如果要贡献数据,请查看 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 并发给我们一个拉请求。</div> + +<p>{{Compat("api.GlobalEventHandlers.onmouseenter")}}</p> + +<h2 id="同样可看">同样可看</h2> + +<ul> + <li>{{event("mouseenter")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}} mixin 中的 <strong><code>onmouseleave</code></strong> 属性是用于处理鼠标移出（{{event("mouseleave")}}）事件的事件管理器（{{domxref("EventHandler")}}）。</p> + +<p><code>mouseleave</code>事件在定点设备(通常来说指的是鼠标) 移出某个元素时触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onmouseleave = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseleave; +</pre> + +<p><code>handlerFunction</code> 可以是 <code>null</code> ，也可以是一个用以指示如何处理该事件的 <a href="/zh-CN/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript 函数</a> 。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onmouseleave','onmouseleave')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onmouseleave")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{event("mouseleave")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onmousemove</strong>属性用来获取或设置当前元素的<code>mousemove</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onmousemove = <em>event handling code</em> +</pre> + +<h3 id="备注">备注</h3> + +<p>当用户在当前元素上移动鼠标时会触发<code>mousemove</code>事件.</p> + +<h3 id="例子">例子</h3> + +<p>下面的例子演示了在显示"提示层"时<code>onmousemove的用法.</code></p> + +<pre class="brush: html"><!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> +</pre> + +<p>下面的例子演示了在进行拖拽操作时<code>onmousemove的用法.</code></p> + +<pre class="brush: html"><!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> +</pre> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "pl": "pl/DOM/element.onmousemove", "fr": "fr/DOM/element.onmousemove", "en": "en/DOM/element.onmousemove" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onmouseout</strong>属性用来获取或设置当前元素的mouseout事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onMouseOut = <em>event handling code</em> +</pre> + +<h3 class="editable" id="例子"><span><span>例子</span></span></h3> + +<pre class="brush: html"><!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> +</pre> + +<h3 id="备注">备注</h3> + +<p>当鼠标离开一个元素时,会在这个元素上触发mouseout事件.</p> + +<h3 id="规范">规范</h3> + +<p>DOM Level 0 不属于任何规范.</p> + +<p>{{ languages( {"fr": "fr/DOM/element.onmouseout","en": "en/DOM/element.onmouseout" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onmouseover</strong>属性用来获取或设置当前元素的mouseover事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onmouseover = <em>event handling code</em> +</pre> + +<h3 class="editable" id="例子"><span>例子</span></h3> + +<pre class="brush: html"><!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> </pre> + +<h3 id="备注">备注</h3> + +<p>当鼠标移动到一个元素上时,会在这个元素上触发mouseover事件.</p> + +<h3 id="规范">规范</h3> + +<p>DOM Level 0 不属于任何规范.</p> + +<p>{{ languages( { "pl": "pl/DOM/element.onmouseover", "fr": "fr/DOM/element.onmouseover" , "en": "en/DOM/element.onmouseover" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<h3 id="概述">概述</h3> + +<p><strong>onmouseup</strong>属性用来获取或设置当前元素的<code>mouseup</code>事件的事件处理函数.</p> + +<h3 id="语法">语法</h3> + +<pre class="eval">element.onMouseUp = <em>event handling code</em> +</pre> + +<h3 id="备注">备注</h3> + +<p>当用户在当前元素上放开鼠标某个按键时会触发<code>mouseup</code>事件.</p> + +<h3 id="规范">规范</h3> + +<p>不属于任何公开的规范.</p> + +<p>{{ languages( { "fr": "fr/DOM/element.onmouseup" ,"en": "en/DOM/element.onmouseup" } ) }}</p> 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 +--- +<h2 id="概述">概述</h2> + +<p><strong><code>onpause</code></strong>可以用来获取或设置当前元素的<code>onpause</code>事件的事件处理函数。当媒体播放被暂停时，将触发pause事件。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onpause = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onpause; +</pre> + +<p>handlerFunction应该是null或指定事件的JavaScript函数。</p> + +<h2 id="说明">说明</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onpause','onpause')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onpause")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{event("pause")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>The <code><strong>onplay</strong></code><em> </em>property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("play")}} events.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.onplay = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onplay; +</pre> + +<p><code>handlerFunction</code> 应该是 <code>null</code> 或者 <a href="/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript function</a> 指定事件的处理程序。</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onplay','onplay')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> + <p> </p> + </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onplay")}}</p> + +<h2 id="相关知识">相关知识</h2> + +<ul> + <li>{{event("play")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers">Information on working with event handlers</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>The <strong><code>onplaying</code></strong> property of the {{domxref("GlobalEventHandlers")}} mixin is the {{domxref("EventHandler")}} for processing {{event("playing")}} events.</p> + +<p><code>playing</code> 事件将会在媒体做好播放准备后（因暂停或网络延迟而导致媒体数据缺失）触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>element</var>.onplaying = <var>handlerFunction</var>; +var <var>handlerFunction</var> = <var>element</var>.onplaying; +</pre> + +<p><code>handlerFunction</code> 为 <code>null</code> 或一个函数 指定事件处理程序</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性"> 浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onplaying")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{domxref("HTMLMediaElement/playing_event", "playing")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers">DOM event handlers</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("pointercancel")}} event.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>cancelHandler</var> = <var>targetElement</var>.onpointercancel; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>cancelHandler</code></dt> + <dd>元素<code>targetElement</code> 的 <em>pointercancel</em> 事件处理器。</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>该示例展示使用 <em>onpointercancel 设置一个元素的</em> <em>pointercancel</em> 事件处理器的两个方法。</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable 版本</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table" style="height: 127px; width: 847px;"> + <tbody> + <tr> + <th>特性</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>支持基础</td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特性</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>支持基础</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatOperaMobile(42)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ event("pointercancel") }}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p> {{event("pointerdown")}} 事件的 {{domxref("GlobalEventHandlers","全局事件处理程序")}} </p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>downHandler</var> = <var>targetElement</var>.onpointerdown; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>downHandler</code></dt> + <dd><em>pointerdown</em> 事件触发对象的事件处理程序.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>当前示例展示两种方式使用 <em>onpointerdown </em>去设置元素的pointerdown事件处理程序.</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatOpera(42)}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatIE("10")}}</td> + <td>{{CompatOperaMobile(42)}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(55.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="sect1"> </h2> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{ event("pointerdown") }}</li> +</ul> 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 +--- +<div>HTML DOM</div> + +<div>pointerenter事件的GlobalEventHandlers（全局事件处理函数）</div> + +<p> </p> + +<pre class="syntaxbox">var <var>enterHandler</var> = <var>targetElement</var>.onpointerenter; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>enterHandler</code></dt> +</dl> + +<p> <code>targetElement</code>的pointerenter事件处理函数。</p> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了使用onpointerenter来设置元素pointerenter事件处理函数的两种方式<em>。</em></p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>兼容性表</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特点</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本支持</td> + <td>CompatChrome("35")支持<sup>[1]</sup></td> + <td>GeckoDesktop(59)支持</td> + <td>支持需-ms前缀 <br> + 11支持</td> + <td>支持程度未知</td> + <td>不支持</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本支持</td> + <td>支持程度未知</td> + <td>Chrome("35")支持<sup>[1]</sup></td> + <td>GeckoMobile("29")支持<sup>[2]</sup></td> + <td>10支持需-ms前缀 </td> + <td>支持程度未知</td> + <td>不支持</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 这是在<a href="http://crbug.com/248918">bug 248918</a>中实现。</p> + +<p>[2] 依赖于<code>dom.w3c_pointer_events.enabled</code>属性, 默认值为 <code>false</code>。</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{ event("pointerenter") }}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">就像在{{domxref("Element")}}或{{domxref("Window")}}中点击类似，在某目标区域内，发生触点（鼠标指针，触摸等）行为时会触发源于{{event("pointerleave")}}事件{{domxref("GlobalEventHandlers","global event handler", "", 1)}}行为。 这个事件本身属于 <a href="/en-US/docs/Web/API/Pointer_events">Pointer Events API</a> 的一部分。</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>leaveHandler</var> = <em>EventTarget</em>.onpointerleave; + +<em>EventTarget</em>.onpointerleave = <em>leaveHandler</em>;</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>leaveHandler</code></dt> + <dd>{{event("pointerleave")}} 事件会执行{{domxref("EventListener")}} 监听器会委托执行用以发送给目标。</dd> +</dl> + +<h2 id="样例">样例</h2> + +<p>这个样例展示了两种使用 <code>onpointerleave</code> 来设置元素 <code>pointerleave</code> 事件处理器的方式。</p> + +<pre class="brush: js"><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> +</pre> + +<p>查看 <a href="/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events">Using Pointer Events</a> 以了解更多详情。</p> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">名称</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持情况">浏览器支持情况</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onpointerleave")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Pointer_events">Pointer events</a></li> + <li><a href="/en-US/docs/Web/API/Pointer_events/Using_Pointer_Events">Using pointer events</a></li> + <li>{{event("pointerleave")}} 以及它实现的 {{domxref("PointerEvent")}} 接口</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>一个{{domxref("GlobalEventHandlers","global event handler")}}(全局事件) {{event("pointermove")}} 事件.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>moveHandler</var> = <var>targetElement</var>.onpointermove; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>moveHandler</code></dt> + <dd>返回 <code>targetElement</code> 元素的pointermove事件处理函数.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>下面展示了两种设置元素pointermove事件处理函数的方法.</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("35")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(59)}}</td> + <td>10 {{property_prefix("-ms")}}<br> + 11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome("35")}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td> + <td>10 {{property_prefix("-ms")}}<br> + 11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This was implemented in <a href="http://crbug.com/248918">bug 248918</a>.</p> + +<p>[2] Supported behind the preference <code>dom.w3c_pointer_events.enabled</code>, defaulting to <code>false</code>.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("pointermove")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>一个{{domxref("GlobalEventHandlers","global event handler")}} 用于处理 {{event("pointerout")}} 事件。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>outHandler</var> = <var>targetElement</var>.onpointerout; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>outHandler</code></dt> + <dd>元素<code>targetElement</code>的指针输出事件处理程序。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了两种方式来使用onpointerout设置元素的pointerout事件处理程序。</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onpointerout")}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{event("pointerout")}}</li> +</ul> + +<p> + <audio style="display: none;"> </audio> +</p> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("pointerover")}} event.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>overHandler</var> = <var>targetElement</var>.onpointerover; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>overHandler</code></dt> + <dd> pointerover 事件处理器返回目标元素的<code>overHandler.</code></dd> +</dl> + +<h2 id="案例">案例</h2> + +<p>这里使用两种方式展示了如何去使用 <em>onpointerover</em> 去设置一个元素的 <em>pointerover </em>事件处理器</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">说明</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不稳定版本</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onpointerover")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("pointerover")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code>pointerup</code>是一个全局的事件处理函数.</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <var>upHandler</var> = <var>targetElement</var>.onpointerup; +</pre> + +<h3 id="返回值">返回值</h3> + +<dl> + <dt><code>upHandler</code></dt> + <dd>返回 <code>targetElement</code> 元素的<code>pointerup</code>事件处理函数.</dd> +</dl> + +<h2 id="示例">示例</h2> + +<p>如下是两种设置元素<code>pointerup</code>事件处理函数的方法.</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2','#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>Non-stable version</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("35")}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop(59)}}</td> + <td>10 {{property_prefix("-ms")}}<br> + 11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome("35")}}<sup>[1]</sup></td> + <td>{{CompatGeckoMobile("29")}}<sup>[2]</sup></td> + <td>10 {{property_prefix("-ms")}}<br> + 11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This was implemented in <a href="http://crbug.com/248918">bug 248918</a>.</p> + +<p>[2] Supported behind the preference <code>dom.w3c_pointer_events.enabled</code>, defaulting to <code>false</code>.</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en-US/docs/Web/Events/pointerup">{{event("pointerup")}}</a></li> +</ul> 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 +--- +<p>{{ ApiRef() }}</p> + +<p>The <code><strong>GlobalEventHandlers.onreset</strong></code> 属性包含 {{domxref("EventHandler")}} ，当收到一个{{event("reset")}} 事件时触发</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre>window.onreset = funcRef; +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>funcRef</code> 是一个函数的引用.</li> +</ul> + +<h2 id="Example" name="Example">例子</h2> + +<pre class="eval"><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> +</pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>reset 事件只有在用户点击表单中的reset按钮时才会被触发 (<code><input type="reset"/></code>).</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onreset','onreset')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><code>onresize</code>属性可以用来获取或设置当前窗口的resize事件的事件处理函数</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.onresize = <em>funcRef</em>; +</pre> + +<h3 id="Parameters" name="Parameters">参数</h3> + +<ul> + <li><code>funcRef</code> 是一个函数引用</li> +</ul> + +<h3 id="Example" name="Example">例子</h3> + +<pre>window.onresize = doFunc; +</pre> + +<pre><html> +<head> + +<title>onresize测试</title> + +<script type="text/javascript"> + +window.onresize = resize; + +function resize() +{ + alert("检测到resize事件!"); +} +</script> +</head> + +<body> +<p>改变浏览器窗口的大小来触发resize事件.</p> +</body> +</html> +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>在窗口大小改变之后,就会触发resize事件.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onresize','onresize')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<p>{{ languages( {"en": "en/DOM/window.onresize" } ) }}</p> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>元素的 <code>scroll </code>事件处理函数。</p> + +<h3 id="语法">语法</h3> + +<pre class="syntaxbox">element.onscroll = <var>functionReference</var></pre> + +<h3 id="参数">参数</h3> + +<p>functionReference 是一个函数的引用。当该元素滚动时，会执行该函数。</p> + +<div class="blockIndicator note"> +<p>注意：不要将onscroll 与 {{domxref("GlobalEventHandlers.onwheel", "onwheel")}}<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">混淆。</span></font>onwheel<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">是</span></font>鼠标滚轮旋转, 而onscroll 处理的是对象内部内容区的滚动事件。</p> +</div> + +<p> </p> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!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> +</pre> + +<p>{{ EmbedLiveSample('示例') }}</p> + +<h2 id="Example">Example</h2> + +<p>这个示例能说明更多问题</p> + +<p>This example monitors scrolling on a {{HtmlElement("textarea")}}, and logs the element's vertical scroll position accordingly.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><textarea>1 2 3 4 5 6 7 8 9</textarea> +<p id="log"></p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">textarea { + width: 4rem; + height: 8rem; + font-size: 3rem; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const textarea = document.querySelector('textarea'); +const log = document.getElementById('log'); + +textarea.onscroll = logScroll; + +function logScroll(e) { + log.textContent = `Scroll position: ${e.target.scrollTop}`; +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> +<h2 id="注意">注意</h2> + +<p>当用户滚动某个元素的内容时 <code>scroll</code> 事件将会被触发。<code>Element.onscroll 同等于</code> <code>element.addEventListener("scroll" ... )。</code></p> +<h2 id="规范">规范</h2> + + + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> 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 +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Summary" name="Summary">概述</h3> + +<p><strong>onselect</strong>用来获取或设置当前窗口的select事件的事件处理函数</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval">window.onselect = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef是个函数引用</code>.</li> +</ul> + +<h3 id="Example" name="Example">例子</h3> + +<pre><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> +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>只有在文本框和文本域内选择文本才会触发select事件.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p>不属于任何公开规范.</p> + +<p>{{ languages( {"en": "en/DOM/window.onselect" } ) }}</p> 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 +--- +<div>{{ApiRef('DOM')}}{{SeeCompatTable}}</div> + +<p><code><strong>GlobalEventHandlers.onselectionchange</strong></code> 属性表示当一个 {{event("selectstart")}} 事件被触发，比如在页面上选中文字变化时，会执行绑定的事件处理器</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>obj</em>.onselectionchange = <em>function</em>; +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: js">var selection; + +document.onselectionchange = function() { + console.log('New selection made'); + selection = document.getSelection(); +};</pre> + +<p>完整例子请参阅<a href="https://github.com/chrisdavidmills/selection-api-examples/#key-quote-generator-see-it-running-live">Key quote generator</a> demo.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API','#dom-globaleventhandlers-onselectionchange','GlobalEventHandlers.onselectionchange')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup><br> + {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoMobile(43)}}<sup>[1]</sup><br> + {{CompatGeckoMobile(52)}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This is implemented behind the <code>dom.select_events.enabled</code> preference, which defaults to <code>false</code> except on Nightly.</p> + +<p>[2] This is now fully enabled on Firefox 52 release version.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("selectionchange")}}</li> + <li>{{domxref("GlobalEventHandlers.onselectstart")}}</li> +</ul> 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 +--- +<div>{{ApiRef('DOM')}}{{SeeCompatTable}}</div> + +<p><code><strong>GlobalEventHandlers.onselectstart</strong></code> 表示 {{event("selectstart")}} 事件绑定的事件处理器，比如用户在网页上开始选择任意文本内容时触发。</p> + +<p><em>译者注：在输入控件中选择文本时，触发的是控件绑定的 {{event("select")}} 事件。</em></p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><em>obj</em>.onselectstart = <em>function</em>; +</pre> + +<h2 id="Example">Example</h2> + +<pre class="brush: html">document.onselectstart = function() { + console.log("Selection started!"); +}; +</pre> + +<p>详细用法参见 <a href="https://github.com/chrisdavidmills/selection-api-examples/#key-quote-generator-see-it-running-live">Key quote generator</a> 示例。</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Selection API','#dom-globaleventhandlers-onselectstart','GlobalEventHandlers.onselectstart')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatGeckoDesktop(43)}}<sup>[1]</sup><br> + {{CompatGeckoDesktop(52)}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>1.3</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td><code>onselectionchange</code></td> + <td>{{CompatGeckoMobile(43)}}<sup>[1]</sup><br> + {{CompatGeckoMobile(52)}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] This is implemented behind the <code>dom.select_events.enabled</code> preference, which defaults to <code>false</code> except on Nightly.</p> + +<p>[2] This is now fully enabled on Firefox 52 release version.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{event("selectstart")}}</li> + <li>{{domxref("GlobalEventHandlers.onselectionchange")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}} 的 <code><strong>onsubmit</strong></code> 属性是一个处理 {{event("submit")}} 的 {{domxref("EventHandler")}}。</p> + +<p><code>submit</code> 事件会在用户点击提交按钮（<code><input type="submit"/></code> 元素）提交表单时触发。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>target</em>.onsubmit = <em>functionRef</em>;</pre> + +<h3 id="参数">参数</h3> + +<p><code>functionRef</code> 是一个函数名或 <a href="/xh-CN/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>。The function receives a {{domxref("FocusEvent")}} object as its sole argument.</p> + + +<h2 id="例子">例子</h2> + +<p>This example demonstrates {{domxref("GlobalEventHandlers.oninvalid", "oninvalid")}} and <code>onsubmit</code> event handlers on a form.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: 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></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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(); +}</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onsubmit','onsubmit')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onsubmit")}}</p> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{event("submit")}} 事件</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchcancel")}} event.</p> + +<p>{{SeeCompatTable}}</p> + +<div class="note"> +<p><strong>Note:</strong> 这个属性没有被正式标准化。它在 {{SpecName('Touch Events 2')}} 被指定，{{Spec2('Touch Events 2')}} 规范 并且没有在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}。此属性没有被广泛实现。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var cancelHandler = someElement.ontouchcancel; +</pre> + +<h3 id="Return_Value" name="Return_Value">返回值</h3> + +<dl> + <dt><code>cancelHandler</code></dt> + <dd><code>元素someElement上的</code><em>touchcancel</em>事件句柄。</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了两种方法在元素<em>touchcancel</em>事件句柄上使用<em>ontouchcancel</em> 事件</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchcancel')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Non-stable version.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{ event("touchcancel") }}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>A {{domxref("GlobalEventHandlers","global event handler")}} for the {{event("touchmove")}} event.</p> + +<p>{{SeeCompatTable}}</p> + +<div class="note"> +<p><strong>Note:</strong> 这个属性没有正式标准化。它在 {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规范中提出，而不在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} 中. 这个属性没有被广泛地实现.</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var moveHandler = someElement.ontouchmove; +</pre> + +<h3 id="Return_Value" name="Return_Value">Return value</h3> + +<dl> + <dt><code>moveHandler</code></dt> + <dd><code>someElement</code>元素的 <em>touchmove 事件处理句柄/函数。</em></dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了两种通过 <em>ontouchmove </em>设置元素的 <em>touchmove 事件处理句柄/函数的方式。</em></p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchmove')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Non-stable version.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(18.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ event("touchmove") }}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("touchstart")}} 事件的{{domxref("GlobalEventHandlers","全局事件处理器")}}.</p> + +<p>{{SeeCompatTable}}</p> + +<div class="note"> +<p><strong>备注:</strong> 这个属性尚未正式标准化。它被定义在{{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 规格中，但并没有被定义在 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}}中。这个属性尚未被完成实现。</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval">var startHandler = someElement.ontouchstart; +</pre> + +<h3 id="Return_Value" name="Return_Value">返回值</h3> + +<dl> + <dt><code>startHandler</code></dt> + <dd><code>someElement的touchstart事件处理函数</code>.</dd> +</dl> + +<h2 id="例子">例子</h2> + +<p>这个例子展示了使用ontouchstart属性的两种方法。</p> + +<pre class="brush: js"><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> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">评论</th> + </tr> + <tr> + <td>{{SpecName('Touch Events 2','#widl-GlobalEventHandlers-ontouchstart')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>Non-stable version.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(18.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{ event("touchstart") }}</li> +</ul> 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 +--- +<div>{{APIRef("CSS3 Transitions")}}</div> + +<p>{{domxref("GlobalEventHandlers")}}混合 的 <code><strong>ontransitioncancel</strong></code> 属性 是处理 {{event("transitioncancel")}} 事件的手柄{{domxref("EventHandler")}}.</p> + +<div class="blockIndicator note"> +<p>domxref("GlobalEventHandlers") 与 domxref("EventHandler")： dom修订版本的事件手柄。</p> + +<p>event("transitioncancel")：transitioncancel事件</p> +</div> + +<p>当CSS转换被取消时，transitioncancel事件被触发。当以下情况时，过渡被取消::</p> + +<ul> + <li>应用于目标的{{cssxref(“transition-property”)}}属性的值被更改</li> + <li>{{cssxref("display")}}属性被设置为"none"。</li> + <li>转换在运行到完成之前就停止了，例如通过将鼠标移出悬浮过渡元素。</li> +</ul> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">var <em>transitionCancelHandler</em> = <em>target</em>.ontransitioncancel; + +<em>target</em>.ontransitioncancel = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="Value">Value</h3> + +<p>A {{jsxref("Function")}} to be called when a {{event("transitioncancel")}} event occurs indicating that a CSS transition has been cancelled on the <em><code>target</code></em>, 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")}}.</p> + +<div class="note"> +<p><strong>Note</strong>: elapsedTime不包括过渡效果开始之前的时间;这意味着{{cssxref("transition-delay")}}的值不会影响elapsedTime的值，elapsedTime在延迟周期结束和动画开始之前都是0。</p> +</div> + +<h2 id="Example">Example</h2> + +<p>在本例中，我们使用{{event("transitionrun")}}和{{event("transitionend")}}事件来检测转换何时开始和结束，从而导致在转换期间发生文本更新。这也可以用来触发动画或其他效果，以允许连锁反应。</p> + +<p>除此之外, 我们也使用 {{event("click")}} 事件使盒子消失 (<code>display: none;</code>), 显示如何触发 {{event("transitioncancel")}} 事件.</p> + +<h3 id="HTML_content">HTML content</h3> + +<p>这只是简单地创建了一个{{HTMLElement("div")}}，我们将在下面用CSS样式使其成为一个框，调整大小和改变颜色等。</p> + +<pre class="brush: html;"><div class="box"></div> +</pre> + +<h3 id="CSS_content">CSS content</h3> + +<p>下面的CSS样式框和应用一个过渡效果，使框的颜色和大小改变，并导致框旋转，而鼠标光标在它上面。</p> + +<pre class="brush: css; highlight:[13,14]">.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); +} +</pre> + +<h3 id="JavaScript_content">JavaScript content</h3> + +<p>然后, 我们需要建立事件处理程序，以便在转换开始和结束时更改框的文本内容。</p> + +<pre class="brush: js">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'; + <code class="language-js">timeout <span class="operator token">=</span> window<span class="punctuation token">.</span><span class="function token">setTimeout</span><span class="punctuation token">(appear</span><span class="punctuation token">,</span> <span class="number token">2000</span><span class="punctuation token">)</span><span class="punctuation token">; + function appear() { + </span></code>box.style.display = 'block'; +<code class="language-js"><span class="punctuation token"> }</span></code> +} + +box.ontransitioncancel = function(event) { + console.log('transitioncancel fired after ' + event.<code>elapsedTime + ' seconds.'</code>); +} +</pre> + +<h3 id="Result">Result</h3> + +<p>The resulting content looks like this:</p> + +<p>{{EmbedLiveSample('Example', 600, 280)}}</p> + +<p>Notice what happens when you hover your mouse cursor over the box, then move it away.</p> + +<p>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.</p> + +<h2 id="Specification">Specification</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitioncancel','ontransitioncancel')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ontransitioncancel")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>The {{event("transitioncancel")}} event this event handler is triggered by</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>The {{event("transitionrun")}} event, which occurs when the transition begins</li> +</ul> 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 +--- +<div>{{APIRef("CSS3 Transitions")}}</div> + +<p>{{event("transitionend")}} 事件的事件处理函数，在某个 <a href="/en-US/docs/Web/CSS/CSS_Transitions">CSS transition</a> 完成时触发。</p> + +<div class="note"> +<p>如果在 transition 完成前，该 transition 已从目标节点上移除，那么 {{event("transitionend")}} 将不会被触发。一种可能的情况是修改了目标节点的 {{cssxref("transition-property")}} 属性，另一种可能的情况是 {{cssxref("display")}} 属性被设为 <code>"none"</code>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>transitionEndHandler</em> = <em>target</em>.ontransitionend; + +<em>target</em>.ontransitionend = <em>{{jsxref("Function")}}</em> +</pre> + +<h3 id="值">值</h3> + +<p>一个 {{jsxref("Function")}}，该函数会在 {{event("transitionend")}} 事件发生时被触发，表示目标节点的 CSS transition 已经完成。目标节点可能是一个 HTML 元素 ({{domxref("HTMLElement")}})，document ({{domxref("Document")}})，或者 window ({{domxref("Window")}})。该函数接受一个参数：一个描述该事件的 {{domxref("TransitionEvent")}} 对象；其 {{domxref("TransitionEvent.elapsedTime")}} 属性值与 {{cssxref("transition-duration")}} 的值一致。</p> + +<div class="note"> +<p><code>elapsedTime</code> 并不包括 transition 效果开始前的时间，也就是说，{{cssxref("transition-delay")}} 属性并不会影响 <code>elapsedTime</code>的值，其在延迟结束、动画开始之时，值为零。</p> +</div> + +<h2 id="示例">示例</h2> + +<p>本例中，我们使用了 {{event("transitionrun")}} 和 {{event("transitionend")}} 事件来监测 transition 的开始和结束，从而在 transition 的过程中更新文本。这也可以被用来触发动画或者其它效果来实现连锁反应。</p> + +<h3 id="HTML_内容">HTML 内容</h3> + +<p>这里简单地创建了一个 {{HTMLElement("div")}}，我们将使用 CSS 来改变其大小和颜色。</p> + +<pre class="brush: html;"><div class="box"></div> +</pre> + +<h3 id="CSS_内容">CSS 内容</h3> + +<p>以下为 CSS 样式，并添加了 transition 属性。当鼠标悬浮时，盒子大小和颜色会发生变化，而且还会转动。</p> + +<pre class="brush: css; highlight:[13,14]">.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); +} +</pre> + +<h3 id="JavaScript_内容">JavaScript 内容</h3> + +<p>接下来，我们需要事件处理函数以在 transition 发生和结束时修改文本内容。</p> + +<pre class="brush: js">let box = document.querySelector(".box"); +box.ontransitionrun = function(event) { + box.innerHTML = "Zooming..."; +} +box.ontransitionend = function(event) { + box.innerHTML = "Done!"; +} +</pre> + +<h3 id="效果">效果</h3> + +<p>最后的效果如下：</p> + +<p>{{EmbedLiveSample('Example', 600, 280)}}</p> + +<p>注意观察当鼠标悬浮在元素上以及移出时发生的变化。</p> + +<h2 id="规范">规范</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('CSS3 Transitions','#ontransitionend','ontransitionend')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ontransitionend")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>触发此事件处理函数的 {{event("transitionend")}} 事件。</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>在transition 开始时触发的 {{event("transitionrun")}} 事件。</li> +</ul> 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 +--- +<p>{{ ApiRef("DOM") }}</p> + +<h2 id="归纳说明">归纳说明</h2> + +<p>{{domxref("GlobalEventHandlers")}} 的 <code>onwheel</code> 特性指向当前元素的滑轮滑动事件函数 {{domxref("EventHandler")}}。</p> + +<div class="blockIndicator note"> +<p><strong>注意：</strong>不要混淆 <code>onwheel</code><strong> </strong>和 {{domxref("GlobalEventHandlers.onscroll", "onscroll")}}：<code>onwheel</code> 通常用于处理滑轮的滚动事件，而 <code>onscroll</code> 用于处理某个对象内容的滚动。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="brush: js">target.onwheel = <em>functionRef;</em> +</pre> + +<h3 id="值">值</h3> + +<p><code>functionRef</code> 是一个函数名或者<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/function">函数表达式</a>。该函数接受一个 {{domxref("WheelEvent")}} 对象作为唯一的传入参数。</p> + +<h2 id="举例">举例</h2> + +<p>以下例子展示了如何使用鼠标（或其它光标设备）的滚轮来缩放一个元素。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>Scale me with your mouse wheel.</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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;</pre> + +<h3 id="结果">结果</h3> + +<p>{{EmbedLiveSample("Examples", 700, 400)}}</p> + +<h2 id="Specification" name="Specification">详情指南</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h3 id="注意">注意</h3> + +<p>当用户在相应元素上滚动滑轮便触发 {{ event("wheel") }} 事件。</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/wheel_event">Document: <code>wheel</code> event</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/wheel_event">Element: <code>wheel</code> event</a></li> +</ul> + +<p> + <audio style="display: none;"></audio> +</p> + +<p> + <audio style="display: none;"></audio> +</p> + +<p> + <audio style="display: none;"></audio> +</p> 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..2c3923fca9 --- /dev/null +++ b/files/zh-cn/web/api/globaleventhandlers/时长改变/index.html @@ -0,0 +1,52 @@ +--- +title: GlobalEventHandlers.ondurationchange +slug: Web/API/GlobalEventHandlers/时长改变 +tags: + - API + - Audio + - Video +translation_of: Web/API/GlobalEventHandlers/ondurationchange +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("GlobalEventHandlers")}} 的<strong><code>ondurationchange</code></strong>属性是一个处理 {{event("durationchange")}} 事件的{{domxref("EventHandler")}} 。</p> + +<p><code><strong>durationchange</strong></code>事件会在<code>duration</code>发生变更时触发。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><em><var>element</var></em>.ondurationchange = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.ondurationchange; +</pre> + +<p><code>handlerFunction</code>可以为<code>null</code>也可以是一个处理该事件的<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions" title="/en-US/docs/JavaScript/Reference/Functions_and_function_scope">JavaScript方法</a>。</p> + +<h2 id="规范说明">规范说明</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-ondurationchange','ondurationchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<div class="hidden">该页面的兼容性表是通过格式化数据生成的，如果您想贡献数据，请check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>修改后向我们发送pull请求。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondurationchange")}}</p> + +<h2 id="其他">其他</h2> + +<ul> + <li>{{event("durationchange")}}</li> + <li><a href="/en-US/docs/Web/Guide/Events/Event_handlers" title="/en-US/docs/Web/Guide/DOM/Events/Event_handlers">DOM event handlers</a></li> +</ul> |