diff options
Diffstat (limited to 'files/zh-cn/web/api/element')
18 files changed, 1711 insertions, 281 deletions
diff --git a/files/zh-cn/web/api/element/accesskey/index.html b/files/zh-cn/web/api/element/accesskey/index.html deleted file mode 100644 index 4f76e7f784..0000000000 --- a/files/zh-cn/web/api/element/accesskey/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Element.accessKey -slug: Web/API/Element/accessKey -tags: - - API接口 - - 属性 - - 需要丰富内容 -translation_of: Web/API/HTMLElement/accessKey -translation_of_original: Web/API/Element/accessKey ---- -<div>{{APIRef("DOM")}}</div> - -<div> </div> - -<p><font face="Consolas, Monaco, Andale Mono, monospace">元素的<strong> Element.accessKey</strong></font> 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。</p> - -<div class="note"> -<p>注: <em> <strong>Element.accessKey </strong>属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。</em></p> -</div> - -<p> </p> - -<p> </p> diff --git a/files/zh-cn/web/api/element/afterscriptexecute_event/index.html b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html new file mode 100644 index 0000000000..b2f4f0d980 --- /dev/null +++ b/files/zh-cn/web/api/element/afterscriptexecute_event/index.html @@ -0,0 +1,57 @@ +--- +title: Element：afterscriptexecute 事件 +slug: Web/Events/afterscriptexecute +tags: + - 事件 + - 参考 + - 非标准 +translation_of: Web/API/Element/afterscriptexecute_event +--- +<div>{{APIRef}}</div> + +<div>{{Non-standard_header}}</div> + +<div class="warning"> +<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> +</div> + +<p><strong><code>afterscriptexecute</code></strong> 事件在一个脚本执行完毕后触发。</p> + +<p>这是一个 Gecko（Firefox）特有的私有事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.afterscriptexecute_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><code><a href="/zh-CN/docs/Web/API/Element/beforescriptexecute_event">beforescriptexecute</a></code> 事件</li> +</ul> diff --git a/files/zh-cn/web/api/element/beforescriptexecute_event/index.html b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html new file mode 100644 index 0000000000..00aa4120c1 --- /dev/null +++ b/files/zh-cn/web/api/element/beforescriptexecute_event/index.html @@ -0,0 +1,57 @@ +--- +title: Element：beforescriptexecute 事件 +slug: Web/Events/beforescriptexecute +tags: + - DOM + - 参考 + - 非标准 +translation_of: Web/API/Element/beforescriptexecute_event +--- +<div>{{APIRef}}</div> + +<div>{{Non-standard_header}}</div> + +<div class="warning"> +<p>此事件是早期版本的规范中的一个提案。不要依赖它。</p> +</div> + +<p><strong><code>beforescriptexecute</code></strong> 事件在一个脚本被执行前触发，取消此事件可以阻止该脚本的执行。</p> + +<p>这是一个 Gecko（Firefox）特有的私有事件。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">是否冒泡</th> + <td>是</td> + </tr> + <tr> + <th scope="row">是否可取消</th> + <td>是</td> + </tr> + <tr> + <th scope="row">接口</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">事件处理器属性</th> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范。</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Element.beforescriptexecute_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li><code><a href="/zh-CN/docs/Web/API/Element/afterscriptexecute_event">afterscriptexecute</a></code> 事件</li> +</ul> diff --git a/files/zh-cn/web/api/element/blur_event/index.html b/files/zh-cn/web/api/element/blur_event/index.html new file mode 100644 index 0000000000..a57cc5b995 --- /dev/null +++ b/files/zh-cn/web/api/element/blur_event/index.html @@ -0,0 +1,150 @@ +--- +title: blur (event) +slug: Web/Events/blur +translation_of: Web/API/Element/blur_event +--- +<p>当一个元素失去焦点的时候 blur 事件被触发。它和 <a href="/en-US/docs/Mozilla_event_reference/focusout"><code>focusout</code></a> 事件的主要区别是 focusout 支持冒泡。</p> + +<h2 id="常规信息">常规信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-blur">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">元素（Element）</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无</dd> +</dl> + +<p>{{NoteStart}}{{domxref("Document.activeElement")}} 的值随浏览器的不同而不同 ({{bug(452307)}}): IE10把值设为焦点将要移向的对象 , 而Firefox和Chrome 往往把值设为<code>body</code> .{{NoteEnd}}</p> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">属性</th> + <th scope="col">类型</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>产生该事件的对象(DOM树中最顶级的那个对象).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否冒泡.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>该事件是否可取消默认行为.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM 元素)</td> + <td>无</td> + </tr> + </tbody> +</table> + +<h2 id="事件代理">事件代理</h2> + +<p>有两种方法来为这个事件实现事件代理：在支持 <code>focusout</code> 事件的浏览器中使用 focusout 事件（除了 FireFox 以外的浏览器都支持 focusout）或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 方法的第三个参数 "useCapture" 为 <code>true：</code></p> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush:html;"><form id="form"> + <input type="text" placeholder="text input"> + <input type="password" placeholder="password"> +</form></pre> + +<h3 id="JavaScript_Content">JavaScript Content</h3> + +<pre class="brush: js">var form = document.getElementById("form"); +form.addEventListener("focus", function( event ) { + event.target.style.background = "pink"; +}, true); +form.addEventListener("blur", function( event ) { + event.target.style.background = ""; +}, true);</pre> + +<p>{{EmbedLiveSample('Event_delegation')}}</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>5</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>6</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.0</td> + <td>53</td> + <td>{{CompatUnknown}}</td> + <td>10.0</td> + <td>12.1</td> + <td>5.1</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 Gecko 24 {{geckoRelease(24)}} 之前，事件的接口为 {{domxref("Event")}}，而不是 {{domxref("FocusEvent")}}。参考 ({{bug(855741)}}).</p> + +<h2 id="相关的事件">相关的事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionend_event/index.html b/files/zh-cn/web/api/element/compositionend_event/index.html new file mode 100644 index 0000000000..4a023fc0e5 --- /dev/null +++ b/files/zh-cn/web/api/element/compositionend_event/index.html @@ -0,0 +1,146 @@ +--- +title: compositionend +slug: Web/Events/compositionend +tags: + - 事件 +translation_of: Web/API/Element/compositionend_event +--- +<p>当文本段落的组成完成或取消时, compositionend 事件将被触发 (具有特殊字符的触发, 需要一系列键和其他输入, 如语音识别或移动中的字词建议)。</p> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>Yes</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("TouchEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>聚焦元素处理成分</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件类型</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>事件是否冒泡</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>是否可以取消该事件</td> + </tr> + <tr> + <td><code>view</code> {{ReadOnlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (<code>window</code> of the document)</td> + </tr> + <tr> + <td><code>detail</code> {{ReadOnlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>data </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>正在编辑的原始字符串, 否则为空字符串。只读。</td> + </tr> + <tr> + <td><code>locale</code></td> + <td>{{domxref("DOMString")}} (string)</td> + <td>组合事件的语言代码 (如果可用);否则, 为空字符串。只读。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("9.0")}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 该事件是在9.0 之前的Gecko版本中已经可以使用, 但没有 DOM 级3属性和方法。Gecko还不支持给受信任事件的locale属性设置值。但是, 当创建不受信任的事件时，此值可以通过<code>initCompositionEvent()</code> 设置。</p> + +<h2 id="Related_events">Related events</h2> + +<ul> + <li>{{Event("compositionstart")}}</li> + <li>{{Event("compositionupdate")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionstart_event/index.html b/files/zh-cn/web/api/element/compositionstart_event/index.html new file mode 100644 index 0000000000..71aa9f1f0d --- /dev/null +++ b/files/zh-cn/web/api/element/compositionstart_event/index.html @@ -0,0 +1,152 @@ +--- +title: compositionstart +slug: Web/Events/compositionstart +tags: + - Element + - Event + - Input method + - compositionstart + - 事件 + - 参考 +translation_of: Web/API/Element/compositionstart_event +--- +<p>文本合成系统如 {{glossary("input method editor")}}（即输入法编辑器）开始新的输入合成时会触发 <strong><code>compositionstart</code></strong> 事件。</p> + +<p>例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。</p> + +<table class="properties"> + <tbody> + <tr> + <td><strong>Bubbles</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Cancelable</strong></td> + <td>Yes</td> + </tr> + <tr> + <td><strong>Interface</strong></td> + <td>{{domxref("CompositionEvent")}}</td> + </tr> + <tr> + <td><strong>Event handler property</strong></td> + <td> + <table> + <tbody> + <tr> + <td>None</td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="示例">示例</h2> + +<pre>const inputElement = document.querySelector('input[type="text"]'); + +inputElement.addEventListener('compositionstart', (event) => { + console.log(`generated characters were: ${event.data}`); +});</pre> + +<h3 id="动态演示">动态演示</h3> + +<h4 id="HTML">HTML</h4> + +<pre><div class="control"> + <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label> + <input type="text" id="example" name="example"> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea> + <button class="clear-log">Clear</button> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre>body { + padding: .2rem; + display: grid; + grid-template-areas: "control log"; +} + +.control { + grid-area: control; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +input[type="text"] { + margin: .5rem 0; +} + +kbd { + border-radius: 3px; + padding: 1px 2px 0; + border: 1px solid black; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre>const inputElement = document.querySelector('input[type="text"]'); +const log = document.querySelector('.event-log-contents'); +const clearLog = document.querySelector('.clear-log'); + +clearLog.addEventListener('click', () => { + log.textContent = ''; +}); + +function handleEvent(event) { + log.textContent = log.textContent + `${event.type}: ${event.data}\n`; +} + +inputElement.addEventListener('compositionstart', handleEvent); +inputElement.addEventListener('compositionupdate', handleEvent); +inputElement.addEventListener('compositionend', handleEvent); +</pre> + +<h4 id="结果">结果</h4> + +<p><iframe class="live-sample-frame sample-code-frame" frameborder="0" height="180px" id="frame_Live_example" src="https://mdn.mozillademos.org/en-US/docs/Web/API/Element/compositionstart_event$samples/Live_example?revision=1606277" width="100%"></iframe></p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-compositionstart')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Element.compositionstart_event")}}</p> + +<h2 id="参见">参见</h2> + +<ul> + <li>相关事件：{{domxref("Element/compositionend_event", "compositionend")}}, {{domxref("Element/compositionupdate_event", "compositionupdate")}}.</li> +</ul> diff --git a/files/zh-cn/web/api/element/compositionupdate_event/index.html b/files/zh-cn/web/api/element/compositionupdate_event/index.html new file mode 100644 index 0000000000..11952af506 --- /dev/null +++ b/files/zh-cn/web/api/element/compositionupdate_event/index.html @@ -0,0 +1,145 @@ +--- +title: compositionupdate +slug: Web/Events/compositionupdate +translation_of: Web/API/Element/compositionupdate_event +--- +<p><strong><code>compositionupdate</code></strong> 事件触发于字符被输入到一段文字的时候（这些可见字符的输入可能需要一连串的键盘操作、语音识别或者点击输入法的备选词）</p> + +<table class="properties"> + <tbody> + <tr> + <td>Bubbles</td> + <td>Yes</td> + </tr> + <tr> + <td>Cancelable</td> + <td>No</td> + </tr> + <tr> + <td>Target objects</td> + <td>{{domxref("Element")}}</td> + </tr> + <tr> + <td>Interface</td> + <td>{{domxref("TouchEvent")}}</td> + </tr> + </tbody> +</table> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{ReadOnlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>焦点所在的，处理文字输入的元素。</td> + </tr> + <tr> + <td><code>type</code> {{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>Does the event normally bubble?</td> + </tr> + <tr> + <td><code>cancelable</code> {{ReadOnlyInline}}</td> + <td><code>boolean</code></td> + <td>Is it possible to cancel the event?</td> + </tr> + <tr> + <td><code>view</code> {{ReadOnlyInline}}</td> + <td>{{domxref("WindowProxy")}}</td> + <td>{{domxref("Document.defaultView")}} (the <code>window</code> of the document).</td> + </tr> + <tr> + <td><code>detail</code> {{ReadOnlyInline}}</td> + <td><code>long</code> (<code>float</code>)</td> + <td>0.</td> + </tr> + <tr> + <td><code>data </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>要被替换掉的字符串，如果输入时没有字符串被选，则为空字符串。只读。</td> + </tr> + <tr> + <td><code>locale </code>{{ReadOnlyInline}}</td> + <td>{{domxref("DOMString")}} (string)</td> + <td>输入事件的语言代号，或者空字符串。只读。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatGeckoDesktop("9.0")}}<sup>[2]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoMobile("9.0")}}<sup>[2]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] 在 <code>compositionstart</code> 事件之后不会立即执行。</p> + +<p>[2] <code>compositionupdate</code> 事件在编辑器里的内容改变之前就会触发。自从 Gecko 12.0 {{geckoRelease("12.0")}} 开始 <code>input</code> 事件在输入过程中、内容变化后就触发。使用它可以在输入过程中就获得新的内容。</p> + +<p>Gecko 在可信事件（trusted events）中还不支持 <code>locale</code> 属性。但是开发者可以在使用 <code>initCompositionEvent()</code> 创建不可信事件时指定一个值。</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>{{Event("compositionstart")}}</li> + <li>{{Event("compositionupdate")}}</li> + <li>{{Event("compositionend")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/copy_event/index.html b/files/zh-cn/web/api/element/copy_event/index.html new file mode 100644 index 0000000000..ac249f5055 --- /dev/null +++ b/files/zh-cn/web/api/element/copy_event/index.html @@ -0,0 +1,164 @@ +--- +title: copy +slug: Web/Events/copy +tags: + - Clipboard API + - Event + - Reference +translation_of: Web/API/Element/copy_event +--- +<p>当用户通过浏览器UI（例如，使用 <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>C</kbd> 键盘快捷方式或从菜单中选择“复制”）启动复制操作并响应允许的{{domxref("Document.execCommand","document.execCommand('copy')")}}调用时触发<code>copy</code>事件。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="https://www.w3.org/TR/clipboard-apis/#the-copy-action">Clipboard</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("Element")}}：获得焦点的元素（如{{domxref("HTMLElement.contentEditable","contentEditable")}}内容能编辑或者可以选中的元素），或{{HTMLElement("body")}}。</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">见下文。</dd> +</dl> + +<p>调用{{domxref("DataTransfer.setData","setData(format, data)")}}可以修改{{domxref("ClipboardEvent.clipboardData")}}事件的默认行为：</p> + +<pre class="brush: js">document.addEventListener('copy', function(e){ + e.clipboardData.setData('text/plain', 'Hello, world!'); + e.clipboardData.setData('text/html', '<b>Hello, world!</b>'); + e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard +});</pre> + +<p>不能使用{{domxref("DataTransfer.getData", "clipboardData.getData()")}}在事件处理函数中获取剪切板数据。</p> + +<p>事件的默认行为与事件的来源和事件处理函数相关：</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">synthetic</a> copy事件没有默认行为，除非：</li> + <li>如果默认事件没有取消，就复制到选区（如果有选中内容）到剪切板；</li> + <li>如果取消了默认事件，但是调用了<code>setData()</code>方法：就复制<code>clipboardData</code>的内容到到剪切板；</li> + <li>如果取消了默认行为，而且没有调用<code>setData()</code>方法，就没有任何行为。</li> +</ul> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>The event target (the topmost target in the DOM tree).</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(22) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(22) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="参见">参见</h2> + +<ul> + <li>{{domxref("HTMLElement.oncopy")}}</li> + <li>Related events + <ul> + <li>{{event("cut")}}</li> + <li>{{event("paste")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/cut_event/index.html b/files/zh-cn/web/api/element/cut_event/index.html new file mode 100644 index 0000000000..48c024451a --- /dev/null +++ b/files/zh-cn/web/api/element/cut_event/index.html @@ -0,0 +1,159 @@ +--- +title: cut +slug: Web/Events/cut +tags: + - 事件 + - 剪贴板API + - 参考 +translation_of: Web/API/Element/cut_event +--- +<div class="warning"> +<p>This page needs to be updated to match the currently specified behaviour. In the meantime please refer to the specification: <a href="https://www.w3.org/TR/clipboard-apis/#the-paste-action">https://www.w3.org/TR/clipboard-apis/#the-cut-action</a></p> +</div> + +<p><span class="seoSummary"><strong><code>cut</code></strong> 事件在将选中内容从文档中删除并将其添加到剪贴板后触发。</span></p> + +<p><font><font>如果用户尝试对不可编辑内容执行剪切操作，则</font></font><code>cut</code><font><font>事件仍会触发，但事件对象不包含任何数据。</font></font></p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/clipboard-apis/#cut-event">Clipboard</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("ClipboardEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">可取消默认行为</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">目标对象</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("DefaultView")}}, {{domxref("Document")}}, {{domxref("Element")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">None</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>事件对象（DOM树的顶层对象）。</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>事件的类型。</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否冒泡。</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>事件是否可以取消。</td> + </tr> + <tr> + <td>clipboardData {{readonlyInline}}</td> + <td>{{domxref("DataTransfer")}}</td> + <td><font>剪贴板的内容。</font><font>不仅仅是文本，还有文件和图片。</font></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoDesktop(22) }}</td> + <td>{{ CompatNo() }}</td> + <td>{{CompatOpera(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android Webview</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{compatChrome(58)}}</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatVersionUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>clipboardData</code></td> + <td>{{compatChrome(58)}}</td> + <td>{{compatChrome(58)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatGeckoMobile(22) }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatOperaMobile(45)}}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关">相关</h2> + +<ul> + <li>{{domxref("HTMLElement.oncut")}}</li> + <li>Related events + <ul> + <li>{{event("copy")}}</li> + <li>{{event("paste")}}</li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/element/activate_event/index.html b/files/zh-cn/web/api/element/domactivate_event/index.html index 3185540e78..3185540e78 100644 --- a/files/zh-cn/web/api/element/activate_event/index.html +++ b/files/zh-cn/web/api/element/domactivate_event/index.html diff --git a/files/zh-cn/web/api/element/error_event/index.html b/files/zh-cn/web/api/element/error_event/index.html new file mode 100644 index 0000000000..913caf76bf --- /dev/null +++ b/files/zh-cn/web/api/element/error_event/index.html @@ -0,0 +1,135 @@ +--- +title: error +slug: Web/Events/error +translation_of: Web/API/Element/error_event +--- +<div>{{APIRef}}</div> + +<p>当一个资源加载失败或无法使用时，会在{{domxref("Element")}}对象上触发<code>error</code>事件。例如当脚本执行错误、或图片无法找到或图片无效时。</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Bubbles（支持冒泡）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Cancelable（可撤销）</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Interface（接口）</th> + <td>{{domxref("Event")}} 或{{domxref("UIEvent")}}</td> + </tr> + <tr> + <th scope="row">Event handler property（事件处理程序属性）</th> + <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td> + </tr> + </tbody> +</table> + +<p>如果事件对象是从用户界面元素生成的，则它是一个{{domxref("UIEvent")}}实例;反之，它是一个{{domxref("Event")}}实例。</p> + +<h2 id="示例">示例</h2> + +<h3 id="在线示例"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/blur_event#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B">在线示例</a></h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><div class="controls"> + <button id="img-error" type="button">生成图像error</button> + <img class="bad-img" /> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></pre> + +<div class="hidden"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">body { + display: grid; + grid-template-areas: "control log"; +} + +.controls { + grid-area: control; + display: flex; + align-items: center; + justify-content: center; +} + +.event-log { + grid-area: log; +} + +.event-log-contents { + resize: none; +} + +label, button { + display: block; +} + +button { + height: 2rem; + margin: .5rem; +} + +img { + width: 0; + height: 0; +} +</pre> +</div> + +<h4 id="JS">JS</h4> + +<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents'); + +const badImg = document.querySelector('.bad-img'); +badImg.addEventListener('error', (event) => { + log.textContent = log.textContent + `${event.type}: Loading image\n`; + console.log(event) +}); + +const imgError = document.querySelector('#img-error'); +imgError.addEventListener('click', () => { + badImg.setAttribute('src', 'i-dont-exist'); +}); +</pre> + +<h4 id="结果">结果</h4> + +<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('UI Events', '#event-type-error')}}</td> + <td>{{Spec2('UI Events')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送请求请求。</div> + +<p>{{Compat("api.Element.error_event")}}</p> + +<h2 id="参阅">参阅</h2> + +<ul> + <li>This event on <code>Window</code> targets: {{domxref("Window/error_event", "error")}} event</li> +</ul> diff --git a/files/zh-cn/web/api/element/focus_event/index.html b/files/zh-cn/web/api/element/focus_event/index.html new file mode 100644 index 0000000000..4a93ee7726 --- /dev/null +++ b/files/zh-cn/web/api/element/focus_event/index.html @@ -0,0 +1,137 @@ +--- +title: focus +slug: Web/Events/focus +translation_of: Web/API/Element/focus_event +--- +<p>focus事件在元素获取焦点时触发. 这个事件和 <a href="/en-US/docs/Mozilla_event_reference/focusin"><code>focusin</code></a> 最大的区别仅仅在于后者会事件冒泡.</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">规范</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">接口</dt> + <dd style="margin: 0 0 0 120px;">{{ domxref("FocusEvent") }}</dd> + <dt style="float: left; text-align: right; width: 120px;">是否冒泡</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">能否取消默认</dt> + <dd style="margin: 0 0 0 120px;">否</dd> + <dt style="float: left; text-align: right; width: 120px;">事件目标</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">默认行为</dt> + <dd style="margin: 0 0 0 120px;">无.</dd> +</dl> + +<div class="note">注释: 这里的接口是指 {{ domxref("Event") }} prior to Gecko 24 {{ geckoRelease(24) }}. ({{ bug(855741) }})</div> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target (DOM element)</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>null</td> + </tr> + </tbody> +</table> + +<h2 id="事件委托">事件委托</h2> + +<p>此事件有两个可以实现事件委托的方法 : 通过在支持的浏览器上使用 <code>focusin</code> 事件 (除了Firefox之外的所有浏览器), 或者通过设置 <a href="/en-US/docs/DOM/element.addEventListener"><code>addEventListener</code></a> 的参数"useCapture" 值为true:</p> + +<p>{{ EmbedLiveSample('Event_delegation', '', '', '', 'Web/Events/blur') }}</p> + +<p>(Sample code from <a href="/en-US/docs/Web/Events/blur">blur (event)</a>)</p> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Featrue</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + <td>{{CompatVersionUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + <td>{{CompatUnknown()}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/focusout_event/index.html b/files/zh-cn/web/api/element/focusout_event/index.html new file mode 100644 index 0000000000..87a8a9bd48 --- /dev/null +++ b/files/zh-cn/web/api/element/focusout_event/index.html @@ -0,0 +1,125 @@ +--- +title: focusout +slug: Web/Events/focusout +translation_of: Web/API/Element/focusout_event +--- +<p>当元素即将失去焦点时，focusout 事件被触发。focusout 事件和 <a href="https://developer.mozilla.org/zh-CN/docs/Web/Events/blur">blur</a> 事件之间的主要区别在于后者不会冒泡。</p> + +<h2 id="基本信息">基本信息</h2> + +<dl> + <dt style="float: left; text-align: right; width: 120px;">Specification</dt> + <dd style="margin: 0 0 0 120px;"><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3</a></dd> + <dt style="float: left; text-align: right; width: 120px;">Interface</dt> + <dd style="margin: 0 0 0 120px;">{{domxref("FocusEvent")}}</dd> + <dt style="float: left; text-align: right; width: 120px;">Bubbles</dt> + <dd style="margin: 0 0 0 120px;">Yes</dd> + <dt style="float: left; text-align: right; width: 120px;">Cancelable</dt> + <dd style="margin: 0 0 0 120px;">No</dd> + <dt style="float: left; text-align: right; width: 120px;">Target</dt> + <dd style="margin: 0 0 0 120px;">Element</dd> + <dt style="float: left; text-align: right; width: 120px;">Default Action</dt> + <dd style="margin: 0 0 0 120px;">None.</dd> +</dl> + +<h2 id="属性">属性</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Property</th> + <th scope="col">Type</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>target</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}}</td> + <td>Event target losing focus.</td> + </tr> + <tr> + <td><code>type</code> {{readonlyInline}}</td> + <td>{{domxref("DOMString")}}</td> + <td>The type of event.</td> + </tr> + <tr> + <td><code>bubbles</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event normally bubbles or not.</td> + </tr> + <tr> + <td><code>cancelable</code> {{readonlyInline}}</td> + <td>{{jsxref("Boolean")}}</td> + <td>Whether the event is cancellable or not.</td> + </tr> + <tr> + <td><code>relatedTarget</code> {{readonlyInline}}</td> + <td>{{domxref("EventTarget")}} (DOM element)</td> + <td>Event target receiving focus.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="相关事件">相关事件</h2> + +<ul> + <li>{{event("focus")}}</li> + <li>{{event("blur")}}</li> + <li>{{event("focusin")}}</li> + <li>{{event("focusout")}}</li> +</ul> diff --git a/files/zh-cn/web/api/element/mousewheel_event/index.html b/files/zh-cn/web/api/element/mousewheel_event/index.html new file mode 100644 index 0000000000..599f17edbb --- /dev/null +++ b/files/zh-cn/web/api/element/mousewheel_event/index.html @@ -0,0 +1,181 @@ +--- +title: mousewheel +slug: Web/Events/mousewheel +translation_of: Web/API/Element/mousewheel_event +--- +<p>{{ Non-standard_header() }}</p> + +<p>The <code>mousewheel</code> event is fired asynchronously when a mouse wheel or similar device is operated. It's represented by the {{ domxref("MouseWheelEvent") }} interface.</p> + +<div class="note"> +<p><strong>Do not use this wheel event.</strong></p> + +<p>This interface is non-standard and deprecated. It was used in non-Gecko browsers only. Instead use the standard <em>{{event("wheel")}} event.</em></p> +</div> + +<ul style="display: table; padding: 0; border-left: 2px solid; margin-left: 0.5em;"> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Interface :</dfn>{{ domxref('MouseWheelEvent') }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Synchronicity :</dfn>asynchronous</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Bubbles :</dfn> yes (Though, MSDN documents "No")</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Target :</dfn> {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Cancelable :</dfn> yes (Though, MSDN documents "No")</li> + <li style="display: table-row; padding: 3px; margin: 0;"><dfn>Default action :</dfn> Scroll, moving history, or zooming in/out</li> +</ul> + +<h2 id="Specification">Specification</h2> + +<p>The document in MSDN: {{ spec("http://msdn.microsoft.com/en-us/library/ie/ms536951%28v=vs.85%29.aspx","onmousewheel event") }}</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatIE("6.0") }}</td> + <td>{{ CompatOpera("10.00") }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + <tr> + <td><code>wheelDeltaX</code></td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + <tr> + <td><code>wheelDeltaY</code></td> + <td>{{ CompatChrome("1.0") }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatSafari("3.0") }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>wheelDeltaX</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + <tr> + <td><code>wheelDeltaY</code></td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatNo() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="detail_value">detail value</h2> + +<p>The <code>detail</code> attribute value is always 0 except Opera (Presto).</p> + +<p>Opera (Presto) sets almost the same value as Firefox (Gecko)'s <code>DOMMouseScroll</code> event's detail value which indicates the scroll amount by line. Negative value indicates to scroll to bottom or right. Positive value indicates to scroll to top or left.</p> + +<p>On Mac, the value is computed from accelerated scroll amount.</p> + +<p>On Linux, <code>2</code> or <code>-2</code> is set per native wheel event.</p> + +<h2 id="wheelDelta_wheelDeltaX_and_wheelDeltaY_value">wheelDelta, wheelDeltaX and wheelDeltaY value</h2> + +<p>The <code>wheelDelta</code> attribute value is an abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive, otherwise negative. This means that the delta value sign is different from DOM Level 3 Event's <code>wheel</code>. However, the meaning of the amount of these values is not the same between browsers. See following explanation for the detail.</p> + +<p>IE and Opera (Presto) only support <code>wheelDelta</code> attribute and do <strong>not</strong> support horizontal scroll.</p> + +<p>The <code>wheelDeltaX</code> attribute value indicates the <code>wheelDelta</code> attribute value along the horizontal axis. When a user operates the device for scrolling to right, the value is negative. Otherwise, i.e., if it's to left, the value is positive.</p> + +<p>The <code>wheelDeltaY</code> attribute value indicates the <code>wheelDelta</code> attribute value along the vertical axis. The sign of the value is the same as the <code>wheelDelta</code> attribute value.</p> + +<h3 id="IE">IE</h3> + +<p>The value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. It means that if the mouse wheel doesn't support high resolution scroll, the value is 120 per notch. The value isn't changed even if the scroll amount of system settings is page scroll.</p> + +<h3 id="Chrome">Chrome</h3> + +<p>On Windows, the value is the same as the delta value of <code>WM_MOUSEWHEEL</code> or <code>WM_MOUSEHWHEEL</code>. And also, the value isn't changed even if the scroll amount of system settings is page scroll, i.e., the value is the same as IE on Windows.</p> + +<p>On Linux, the value is <code>120</code> or <code>-120</code> per native wheel event. This makes the same behavior as IE and Chrome for Windows.</p> + +<p>On Mac, the value is complicated. The value is changed if the <strong>device</strong> that causes the native wheel event supports continuous scroll.</p> + +<p>If the device supports continuous scroll (e.g., trackpad of MacBook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. In this case, the value is the same as Safari.</p> + +<p>If the device does <strong>not</strong> support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is computed from non-accelerated scroll amount (120 per notch). In this case, the value is different from Safari.</p> + +<p>This difference makes a serious issue for web application developers. That is, web developers cannot know if <code>mousewheel</code> event is caused by which device.</p> + +<p>See <code>WebInputEventFactory::mouseWheelEvent</code> of the <a href="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/WebInputEventFactoryMac.mm" title="http://mxr.mozilla.org/chromium/source/src/third_party/WebKit/Source/web/mac/WebInputEventFactory.mm">Chromium's source code</a> for the detail.</p> + +<h3 id="Safari">Safari</h3> + +<p>The value is always computed from accelerated scroll amount. This is really different from other browsers except Chrome with continuous scroll supported device.</p> + +<p>Note: tested with the Windows package, the earliest available version was Safari 3.0 from 2007. It could be that earlier versions (on Mac) support the properties too.</p> + +<h3 id="Opera_(Presto)">Opera (Presto)</h3> + +<p>The value is always the <code>detail</code> attribute value ✕ <code>40</code>.</p> + +<p>On Windows, since the <code>detail</code> attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page.</p> + +<p>On Linux, the value is <code>80</code> or <code>-80</code> per native wheel event. This is different from other browsers.</p> + +<p>On Mac, the <code>detail</code> attribute value is computed from accelerated scroll amout of native event. The value is usually much bigger than Safari's or Chrome's value.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ domxref("MouseWheelEvent") }}</li> + <li>Gecko's legacy mouse wheel events: <code>DOMMouseScroll</code>, <code>MozMousePixelScroll</code></li> + <li>Standardized wheel event: <code>wheel</code></li> +</ul> diff --git a/files/zh-cn/web/api/element/name/index.html b/files/zh-cn/web/api/element/name/index.html deleted file mode 100644 index f1a247fd70..0000000000 --- a/files/zh-cn/web/api/element/name/index.html +++ /dev/null @@ -1,71 +0,0 @@ ---- -title: Element.name -slug: Web/API/Element/name -translation_of: Web/API -translation_of_original: Web/API/Element/name ---- -<p>{{ APIRef() }}</p> - -<h2 id="Summary" name="Summary">概述</h2> - -<p><strong>name</strong> 获取或设置一个 DOM 对象的 <code>name</code> 属性；它只能应用于下列元素：{{ HTMLelement("a") }}, {{ HTMLelement("applet") }}, {{ HTMLelement("button") }}, {{ HTMLelement("form") }}, {{ HTMLelement("frame") }}, {{ HTMLelement("iframe") }}, {{ HTMLelement("img") }}, {{ HTMLelement("input") }}, {{ HTMLelement("map") }}, {{ HTMLelement("meta") }}, {{ HTMLelement("object") }}, {{ HTMLelement("param") }}, {{ HTMLelement("select") }}, and {{ HTMLelement("textarea") }}.</p> - -<div class="note"> -<p>需要注意的是，<code>name</code> 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。</p> -</div> - -<p>Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，<a href="/en/DOM/HTMLFormElement" title="en/DOM/form">form</a> 以及 the form <a href="/en/DOM/form.elements" title="en/DOM/form.elements">elements</a> collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval"><em>HTMLElement</em>.name = <em>string</em>; -var elName = <em>HTMLElement</em>.name; - -var fControl = <em>HTMLFormElement</em>.<em>elementName</em>; -var controlCollection = <em>HTMLFormElement</em>.elements.<em>elementName</em>; -</pre> - -<h2 id="Example" name="Example">例子</h2> - -<pre class="eval"><form action="" name="formA"> - <input type="text" value="foo"> -</form> - -<script type="text/javascript"> - - // 获取表单中第一个元素的引用 - var formElement = document.forms['formA'].elements[0]; - - // 设置一个 name - formElement.name = 'inputA'; - - // 显示 input 的 value 值 - alert(document.forms['formA'].elements['inputA'].value); - -</script> -</pre> - -<h2 id="Notes" name="Notes">备注</h2> - -<p>在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。</p> - -<h2 id="Specification" name="Specification">规范</h2> - -<p>W3C DOM 2 HTML Specification:</p> - -<ul> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-32783304">Anchor</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-39843695">Applet</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-34812697">Button</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-22051454">Form</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-91128709">Frame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-96819659">iFrame</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-47534097">Image</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-89658498">Input</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-52696514">Map</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-31037081">Meta</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-20110362">Object</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-59871447">Param</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-41636323">Select</a></li> - <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-70715578">Textarea</a></li> -</ul> diff --git a/files/zh-cn/web/api/element/onafterscriptexecute/index.html b/files/zh-cn/web/api/element/onafterscriptexecute/index.html deleted file mode 100644 index f1e976522e..0000000000 --- a/files/zh-cn/web/api/element/onafterscriptexecute/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: element.onafterscriptexecute -slug: Web/API/Element/onafterscriptexecute -tags: - - DOM - - onafterscriptexecute -translation_of: Web/API/Document/onafterscriptexecute ---- -<div>{{ApiRef}}{{gecko_minversion_header("2")}}</div> - -<h2 id="概述">概述</h2> - -<p>当HTML文档中的{{HTMLElement("script")}}标签内的代码执行完毕时触发该事件,如果这个<code>script</code>标签是用<code>appendChild()</code>等方法动态添加上去的,则不会触发该事件.</p> - -<h2 id="语法">语法</h2> - -<pre class="syntaxbox"><em>document.onafterscriptexecute = funcRef;</em> -</pre> - -<p>当<code>afterscriptexecute</code>事件触发时,<code>funcRef</code>函数就会被调用. 传入参数<code>event</code>的<code>target</code>属性指向触发该事件的那个<code>script</code>元素.</p> - -<h2 id="例子">例子</h2> - -<pre class="brush:js">function finished(e) { - logMessage("Finished script with ID: " + e.target.id); -} - -document.addEventListener("afterscriptexecute", finished, true); -</pre> - -<p><a href="/samples/html/currentScript.html">查看在线演示</a></p> - -<h2 id="规范">规范</h2> - -<ul> - <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element" title="http://www.whatwg.org/specs/web-apps/current-work/#the-script-element">HTML5</a></li> -</ul> - -<h2 id="相关链接">相关链接</h2> - -<ul> - <li>{{domxref("element.onbeforescriptexecute")}}</li> - <li>{{domxref("document.currentScript")}}</li> -</ul> diff --git a/files/zh-cn/web/api/element/ongotpointercapture/index.html b/files/zh-cn/web/api/element/ongotpointercapture/index.html deleted file mode 100644 index 2ff983926f..0000000000 --- a/files/zh-cn/web/api/element/ongotpointercapture/index.html +++ /dev/null @@ -1,143 +0,0 @@ ---- -title: Element.ongotpointercapture -slug: Web/API/Element/ongotpointercapture -tags: - - API - - DOM - - Element - - Event Handler - - Pointer Events - - Property - - Reference - - 事件句柄 - - 元素 - - 属性 - - 引用 - - 指针事件 -translation_of: Web/API/GlobalEventHandlers/ongotpointercapture -translation_of_original: Web/API/Element/ongotpointercapture ---- -<p>{{ ApiRef("DOM") }}</p> - -<p><code>ongotpointercapture</code> 是一个{{domxref("Element")}} 接口的{{domxref("EventHandler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .</p> - -<h2 id="Syntax" name="Syntax">语法</h2> - -<pre class="eval">var gotCaptureHandler = target.ongotpointercapture; -</pre> - -<h3 id="Return_Value" name="Return_Value">Return value</h3> - -<dl> - <dt><code>gotCaptureHandler</code></dt> - <dd>元素 <code>target</code> 的gotpointercapture 事件句柄。 .</dd> -</dl> - -<h2 id="Example">Example</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.onpointerover = 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','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events 2')}}</td> - <td>无稳定版</td> - </tr> - <tr> - <td>{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}</td> - <td>{{Spec2('Pointer Events')}}</td> - <td>Initial definition.</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>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}} <sup>[1]</sup></td> - <td>{{CompatIE("10")}}</td> - <td>{{CompatNo}}</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>Edge</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>{{CompatVersionUnknown}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatIE("10")}}</td> - <td>{{CompatNo}}</td> - <td>{{CompatNo}}</td> - </tr> - </tbody> -</table> -</div> - -<p>[1] Implementation withdrawn. See {{Bug("1166347")}}.</p> - -<h2 id="See_also" name="See_also">See also</h2> - -<ul> - <li>{{ event("gotpointercapture") }}</li> -</ul> diff --git a/files/zh-cn/web/api/element/paste_event/index.html b/files/zh-cn/web/api/element/paste_event/index.html new file mode 100644 index 0000000000..1fb088eddf --- /dev/null +++ b/files/zh-cn/web/api/element/paste_event/index.html @@ -0,0 +1,103 @@ +--- +title: 'Element: paste事件' +slug: Web/Events/paste +tags: + - Clipboard API + - Event + - Reference +translation_of: Web/API/Element/paste_event +--- +<p> {{APIRef}}</p> + +<p>当用户在浏览器用户界面发起“粘贴”操作时，会触发<strong><code>paste</code></strong>事件。</p> + +<pre class="syntaxbox"><strong>冒泡</strong> 是 + +<strong>可取消</strong> 是 + +<strong>接口</strong> {{domxref("ClipboardEvent")}} + +<strong>事件处理属性</strong> {{domxref("HTMLElement/onpaste", "onpaste")}} +</pre> + +<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">如果光标位于可编辑的上下文中（例如，在 {{HTMLElement("textarea")}} 或者 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;"><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></code><span style="font-size: 1rem; letter-spacing: -0.00278rem;"> 属性设置为 </span><code style="font-style: normal; font-size: 1rem; letter-spacing: -0.00278rem;">true的元素</code><span style="font-size: 1rem; letter-spacing: -0.00278rem;">），则默认操作是将剪贴板的内容插入光标所在位置的文档中。</span></p> + +<p>事件处理程序可以通过调用事件的 <code>clipboardData</code> 属性上的 {{domxref("DataTransfer/getData", "getData()")}}访问剪贴板内容。</p> + +<p>要覆盖默认行为（例如，插入一些不同的数据或转换剪贴板的内容），事件处理程序必须使用 {{domxref("Event/preventDefault", "event.preventDefault()")}}，取消默认操作，然后手动插入想要的数据。</p> + +<p>可以构造和分派<a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Events/Creating_and_triggering_events">合成的</a><code>paste</code>事件，但这不会影响文档内容。</p> + +<h2 id="举例">举例</h2> + +<h3 id="Live_example">Live example</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><div class="source" contenteditable="true">Try copying text from this box...</div> +<div class="target" contenteditable="true">...and pasting it into this one</div></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">div.source, div.target { + border: 1px solid gray; + margin: .5rem; + padding: .5rem; + height: 1rem; + background-color: #e9eef1; +} +</pre> + +<h4 id="JS">JS</h4> + +<pre class="brush: js">const target = document.querySelector('div.target'); + +target.addEventListener('paste', (event) => { + let paste = (event.clipboardData || window.clipboardData).getData('text'); + paste = paste.toUpperCase(); + + const selection = window.getSelection(); + if (!selection.rangeCount) return false; + selection.deleteFromDocument(); + selection.getRangeAt(0).insertNode(document.createTextNode(paste)); + + event.preventDefault(); +}); +</pre> + +<h4 id="Result">Result</h4> + +<p> {{EmbedLiveSample('Live_example', '100%', '100px')}}</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Clipboard API', '#clipboard-event-paste')}}</td> + <td>{{Spec2('Clipboard API')}}</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("api.Element.paste_event")}}</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>Related events: {{domxref("Element/cut_event", "cut")}}, {{domxref("Element/copy_event", "copy")}}</li> + <li>This event on {{domxref("Document")}} targets: {{domxref("Document/paste_event", "paste")}}</li> + <li>This event on {{domxref("Window")}} targets: {{domxref("Window/paste_event", "paste")}}</li> +</ul> |