From 310fd066e91f454b990372ffa30e803cc8120975 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:56:40 +0100 Subject: unslug zh-cn: move --- files/zh-cn/web/api/element/accesskey/index.html | 23 --- .../web/api/element/activate_event/index.html | 108 ------------ .../element/afterscriptexecute_event/index.html | 57 +++++++ .../element/beforescriptexecute_event/index.html | 57 +++++++ files/zh-cn/web/api/element/blur_event/index.html | 150 +++++++++++++++++ .../api/element/compositionend_event/index.html | 146 +++++++++++++++++ .../api/element/compositionstart_event/index.html | 152 +++++++++++++++++ .../api/element/compositionupdate_event/index.html | 145 +++++++++++++++++ files/zh-cn/web/api/element/copy_event/index.html | 164 +++++++++++++++++++ files/zh-cn/web/api/element/cut_event/index.html | 159 ++++++++++++++++++ .../web/api/element/domactivate_event/index.html | 108 ++++++++++++ files/zh-cn/web/api/element/error_event/index.html | 135 +++++++++++++++ files/zh-cn/web/api/element/focus_event/index.html | 137 ++++++++++++++++ .../web/api/element/focusout_event/index.html | 125 ++++++++++++++ .../web/api/element/mousewheel_event/index.html | 181 +++++++++++++++++++++ files/zh-cn/web/api/element/name/index.html | 71 -------- .../api/element/onafterscriptexecute/index.html | 44 ----- .../web/api/element/ongotpointercapture/index.html | 143 ---------------- files/zh-cn/web/api/element/paste_event/index.html | 103 ++++++++++++ 19 files changed, 1819 insertions(+), 389 deletions(-) delete mode 100644 files/zh-cn/web/api/element/accesskey/index.html delete mode 100644 files/zh-cn/web/api/element/activate_event/index.html create mode 100644 files/zh-cn/web/api/element/afterscriptexecute_event/index.html create mode 100644 files/zh-cn/web/api/element/beforescriptexecute_event/index.html create mode 100644 files/zh-cn/web/api/element/blur_event/index.html create mode 100644 files/zh-cn/web/api/element/compositionend_event/index.html create mode 100644 files/zh-cn/web/api/element/compositionstart_event/index.html create mode 100644 files/zh-cn/web/api/element/compositionupdate_event/index.html create mode 100644 files/zh-cn/web/api/element/copy_event/index.html create mode 100644 files/zh-cn/web/api/element/cut_event/index.html create mode 100644 files/zh-cn/web/api/element/domactivate_event/index.html create mode 100644 files/zh-cn/web/api/element/error_event/index.html create mode 100644 files/zh-cn/web/api/element/focus_event/index.html create mode 100644 files/zh-cn/web/api/element/focusout_event/index.html create mode 100644 files/zh-cn/web/api/element/mousewheel_event/index.html delete mode 100644 files/zh-cn/web/api/element/name/index.html delete mode 100644 files/zh-cn/web/api/element/onafterscriptexecute/index.html delete mode 100644 files/zh-cn/web/api/element/ongotpointercapture/index.html create mode 100644 files/zh-cn/web/api/element/paste_event/index.html (limited to 'files/zh-cn/web/api/element') 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 ---- -
{{APIRef("DOM")}}
- -
 
- -

元素的 Element.accessKey 属性设置了这样一个按键——用户通过敲击这个键把焦点跳转到这个元素上。

- -
-

注:  Element.accessKey 属性很少使用，因为它很容易与现代浏览器自带的快捷键冲突。为了解决这个问题，浏览器约定accessKey键与特定按键一起按（比如 Alt + accessKey）来生效快捷键行为。

-
- -

 

- -

 

diff --git a/files/zh-cn/web/api/element/activate_event/index.html b/files/zh-cn/web/api/element/activate_event/index.html deleted file mode 100644 index 3185540e78..0000000000 --- a/files/zh-cn/web/api/element/activate_event/index.html +++ /dev/null @@ -1,108 +0,0 @@ ---- -title: 'Element: DOMActivate event' -slug: Web/API/Element/Activate_event -tags: - - API - - 事件 - - 参考 -translation_of: Web/API/Element/DOMActivate_event ---- -

{{APIRef}}

- -

{{Deprecated_Header}}

- -

当元素被激活时发生，例如点击鼠标或键盘按键。

- -

当元素被激活，如使用鼠标点击或使用键盘导航并激活至这个元素时， DOMActivate 事件被触发。

- - - - - - - - - - - - - - - - -
-

Bubbles

- 		-

Yes

-
-

Cancelable

- 		-

Yes

-
-

Interface

- 		-

{{domxref("MouseEvent")}}

-
- -

示例

- -
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
-     xmlns:ev="http://www.w3.org/2001/xml-events"
-     width="6cm" height="5cm" viewBox="0 0 600 500">
-
-  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>
-
-  <!-- ECMAScript to change the radius -->
-  <script type="application/ecmascript"><![CDATA[
-    function change(evt) {
-      var circle = evt.target;
-      var currentRadius = circle.getFloatTrait("r");
-      if (currentRadius == 100)
-        circle.setFloatTrait("r", currentRadius * 2);
-      else
-        circle.setFloatTrait("r", currentRadius * 0.5);
-    }
-  ]]></script>
-
-  <!-- Act on each DOMActivate event -->
-  <circle cx="300" cy="225" r="100" fill="red">
-    <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); </handler>
-  </circle>
-
-  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
-    Activate the circle to change its size
-  </text>
-</svg>
-
- - - -

规范

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

浏览器兼容性

- -

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

- -

参见

- - 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 +--- +
{{APIRef}}
+ +
{{Non-standard_header}}
+ +
+

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

+
+ +

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

+ +

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

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

规范

+ +

不属于任何规范。

+ +

浏览器兼容性

+ + + +

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

+ +

参见

+ + 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 +--- +
{{APIRef}}
+ +
{{Non-standard_header}}
+ +
+

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

+
+ +

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

+ +

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

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

规范

+ +

不属于任何规范。

+ +

浏览器兼容性

+ + + +

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

+ +

参见

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

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

+ +

常规信息

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

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

+ +

属性

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

事件代理

+ +

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

+ +

HTML Content

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

JavaScript Content

+ +
var form = document.getElementById("form");
+form.addEventListener("focus", function( event ) {
+  event.target.style.background = "pink";
+}, true);
+form.addEventListener("blur", function( event ) {
+  event.target.style.background = "";
+}, true);
+ +

{{EmbedLiveSample('Event_delegation')}}

+ +

浏览器兼容性

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

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

+ +

相关的事件

+ + diff --git a/files/zh-cn/web/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 +--- +

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

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

Properties

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

Browser compatibility

+ +

{{CompatibilityTable}}

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

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

+ + + + diff --git a/files/zh-cn/web/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 +--- +

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

+ +

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

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

示例

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

动态演示

+ +

HTML

+ +
<div class="control">
+  <label for="name">On macOS, click in the textbox below,<br> then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label>
+  <input type="text" id="example" name="example">
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="25"></textarea>
+  <button class="clear-log">Clear</button>
+</div>
+ +

CSS

+ +
body {
+  padding: .2rem;
+  display: grid;
+  grid-template-areas: "control  log";
+}
+
+.control {
+  grid-area: control;
+}
+
+.event-log {
+  grid-area: log;
+}
+
+.event-log-contents {
+  resize: none;
+}
+
+label, button {
+  display: block;
+}
+
+input[type="text"] {
+  margin: .5rem 0;
+}
+
+kbd {
+  border-radius: 3px;
+  padding: 1px 2px 0;
+  border: 1px solid black;
+}
+
+ +

JS

+ +
const inputElement = document.querySelector('input[type="text"]');
+const log = document.querySelector('.event-log-contents');
+const clearLog = document.querySelector('.clear-log');
+
+clearLog.addEventListener('click', () => {
+    log.textContent = '';
+});
+
+function handleEvent(event) {
+    log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
+}
+
+inputElement.addEventListener('compositionstart', handleEvent);
+inputElement.addEventListener('compositionupdate', handleEvent);
+inputElement.addEventListener('compositionend', handleEvent);
+
+ +

结果

+ +

+ +

规范

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

浏览器兼容性

+ +

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

+ +

参见

+ + diff --git a/files/zh-cn/web/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 +--- +

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

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

属性

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

浏览器兼容性

+ +

{{CompatibilityTable}}

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

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

+ +

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

+ +

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

+ +

参阅

+ + diff --git a/files/zh-cn/web/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 +--- +

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

+ +

基本信息

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

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

+ +
document.addEventListener('copy', function(e){
+    e.clipboardData.setData('text/plain', 'Hello, world!');
+    e.clipboardData.setData('text/html', '<b>Hello, world!</b>');
+    e.preventDefault(); // We want our data, not data from any selection, to be written to the clipboard
+});
+ +

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

+ +

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

+ + + +

属性

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

浏览器兼容性

+ +

{{ CompatibilityTable() }}

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

参见

+ + diff --git a/files/zh-cn/web/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 +--- +
+

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

+
+ +

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

+ +

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

+ +

基本信息

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

属性

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

浏览器兼容性

+ +

{{ CompatibilityTable() }}

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

相关

+ + diff --git a/files/zh-cn/web/api/element/domactivate_event/index.html b/files/zh-cn/web/api/element/domactivate_event/index.html new file mode 100644 index 0000000000..3185540e78 --- /dev/null +++ b/files/zh-cn/web/api/element/domactivate_event/index.html @@ -0,0 +1,108 @@ +--- +title: 'Element: DOMActivate event' +slug: Web/API/Element/Activate_event +tags: + - API + - 事件 + - 参考 +translation_of: Web/API/Element/DOMActivate_event +--- +

{{APIRef}}

+ +

{{Deprecated_Header}}

+ +

当元素被激活时发生，例如点击鼠标或键盘按键。

+ +

当元素被激活，如使用鼠标点击或使用键盘导航并激活至这个元素时， DOMActivate 事件被触发。

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

Bubbles

+ 		+

Yes

+
+

Cancelable

+ 		+

Yes

+
+

Interface

+ 		+

{{domxref("MouseEvent")}}

+
+ +

示例

+ +
<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny"
+     xmlns:ev="http://www.w3.org/2001/xml-events"
+     width="6cm" height="5cm" viewBox="0 0 600 500">
+
+  <desc>Example: invoke an ECMAScript function from a DOMActivate event</desc>
+
+  <!-- ECMAScript to change the radius -->
+  <script type="application/ecmascript"><![CDATA[
+    function change(evt) {
+      var circle = evt.target;
+      var currentRadius = circle.getFloatTrait("r");
+      if (currentRadius == 100)
+        circle.setFloatTrait("r", currentRadius * 2);
+      else
+        circle.setFloatTrait("r", currentRadius * 0.5);
+    }
+  ]]></script>
+
+  <!-- Act on each DOMActivate event -->
+  <circle cx="300" cy="225" r="100" fill="red">
+    <handler type="application/ecmascript" ev:event="DOMActivate"> change(evt); </handler>
+  </circle>
+
+  <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle">
+    Activate the circle to change its size
+  </text>
+</svg>
+
+ + + +

规范

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

浏览器兼容性

+ +

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

+ +

参见

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

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

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

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

+ +

示例

+ +

在线示例

+ +

HTML

+ +
<div class="controls">
+  <button id="img-error" type="button">生成图像error</button>
+  <img class="bad-img" />
+</div>
+
+<div class="event-log">
+  <label>Event log:</label>
+  <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea>
+</div>
+ + + +

JS

+ +
const log = document.querySelector('.event-log-contents');
+
+const badImg = document.querySelector('.bad-img');
+badImg.addEventListener('error', (event) => {
+    log.textContent = log.textContent + `${event.type}: Loading image\n`;
+    console.log(event)
+});
+
+const imgError = document.querySelector('#img-error');
+imgError.addEventListener('click', () => {
+    badImg.setAttribute('src', 'i-dont-exist');
+});
+
+ +

结果

+ +

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

+ +

规范

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

浏览器兼容性

+ + + +

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

+ +

参阅

+ + diff --git a/files/zh-cn/web/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 +--- +

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

+ +

基本信息

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

属性

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

事件委托

+ +

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

+ +

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

+ +

(Sample code from blur (event))

+ +

浏览器兼容性

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

相关事件

+ + diff --git a/files/zh-cn/web/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 +--- +

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

+ +

基本信息

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

属性

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

浏览器兼容性

+ +

{{CompatibilityTable}}

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

相关事件

+ + diff --git a/files/zh-cn/web/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 +--- +

{{ Non-standard_header() }}

+ +

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

+ +
+

Do not use this wheel event.

+ +

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

+
+ + + +

Specification

+ +

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

+ +

Browser compatibility

+ +

{{ CompatibilityTable() }}

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

detail value

+ +

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

+ +

Opera (Presto) sets almost the same value as Firefox (Gecko)'s DOMMouseScroll event's detail value which indicates the scroll amount by line. Negative value indicates to scroll to bottom or right. Positive value indicates to scroll to top or left.

+ +

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

+ +

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

+ +

wheelDelta, wheelDeltaX and wheelDeltaY value

+ +

The wheelDelta attribute value is an abstract value which indicates how far the wheel turned. If the wheel has rotated away from the user, it's positive, otherwise negative. This means that the delta value sign is different from DOM Level 3 Event's wheel. However, the meaning of the amount of these values is not the same between browsers. See following explanation for the detail.

+ +

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

+ +

The wheelDeltaX attribute value indicates the wheelDelta attribute value along the horizontal axis. When a user operates the device for scrolling to right, the value is negative. Otherwise, i.e., if it's to left, the value is positive.

+ +

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

+ +

IE

+ +

The value is the same as the delta value of WM_MOUSEWHEEL or WM_MOUSEHWHEEL. It means that if the mouse wheel doesn't support high resolution scroll, the value is 120 per notch. The value isn't changed even if the scroll amount of system settings is page scroll.

+ +

Chrome

+ +

On Windows, the value is the same as the delta value of WM_MOUSEWHEEL or WM_MOUSEHWHEEL. And also, the value isn't changed even if the scroll amount of system settings is page scroll, i.e., the value is the same as IE on Windows.

+ +

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

+ +

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

+ +

If the device supports continuous scroll (e.g., trackpad of MacBook or mouse wheel which can be turned smoothly), the value is computed from accelerated scroll amount. In this case, the value is the same as Safari.

+ +

If the device does not support continuous scroll (typically, old mouse wheel which cannot be turned smoothly), the value is computed from non-accelerated scroll amount (120 per notch). In this case, the value is different from Safari.

+ +

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

+ +

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

+ +

Safari

+ +

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

+ +

Note: tested with the Windows package, the earliest available version was Safari 3.0 from 2007. It could be that earlier versions (on Mac) support the properties too.

+ +

Opera (Presto)

+ +

The value is always the detail attribute value ✕ 40.

+ +

On Windows, since the detail attribute value is computed from actual scroll amount, the value is different from other browsers except the scroll amount per notch is 3 lines in system settings or a page.

+ +

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

+ +

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

+ +

See also

+ + diff --git a/files/zh-cn/web/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 ---- -

{{ APIRef() }}

- -

概述

- -

name 获取或设置一个 DOM 对象的 name 属性；它只能应用于下列元素：{{ 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") }}.

- -
-

需要注意的是，name 属性在其他类型元素上不存在。它不是 {{domxref("Element")}} 或 {{domxref("HTMLElement")}} 接口的一个属性。

-
- -

Name 可被使用于 {{ domxref("document.getElementsByName()") }} 方法，form 以及 the form elements collection。当使用于表单（form）或表单元素（form elements collection）时，可能返回一个单独的元素或一个元素集合。

- -

语法

- -
HTMLElement.name = string;
-var elName = HTMLElement.name;
-
-var fControl = HTMLFormElement.elementName;
-var controlCollection = HTMLFormElement.elements.elementName;
-
- -

例子

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

备注

- -

在 IE6 中，使用 {{domxref("document.createElement()")}} 方法创建的 DOM 对象的 name 属性不能被更改。

- -

规范

- -

W3C DOM 2 HTML Specification:

- - 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 ---- -
{{ApiRef}}{{gecko_minversion_header("2")}}
- -

概述

- -

当HTML文档中的{{HTMLElement("script")}}标签内的代码执行完毕时触发该事件,如果这个script标签是用appendChild()等方法动态添加上去的,则不会触发该事件.

- -

语法

- -
document.onafterscriptexecute = funcRef;
-
- -

当afterscriptexecute事件触发时,funcRef函数就会被调用. 传入参数event的target属性指向触发该事件的那个script元素.

- -

例子

- -
function finished(e) {
-  logMessage("Finished script with ID: " + e.target.id);
-}
-
-document.addEventListener("afterscriptexecute", finished, true);
-
- -

查看在线演示

- -

规范

- - - -

相关链接

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

{{ ApiRef("DOM") }}

- -

ongotpointercapture 是一个{{domxref("Element")}} 接口的{{domxref("EventHandler")}} 属性，返回一个{{event("gotpointercapture")}} 事件类型的事件句柄 (function) .

- -

语法

- -
var gotCaptureHandler = target.ongotpointercapture;
-
- -

Return value

- -
-
gotCaptureHandler
-
元素 target 的gotpointercapture 事件句柄。 .
-
- -

Example

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

Specifications

- - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('Pointer Events 2','#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}无稳定版
{{SpecName('Pointer Events', '#widl-Element-ongotpointercapture', 'ongotpointercapture')}}{{Spec2('Pointer Events')}}Initial definition.
- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - -
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}} [1]{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidAndroid WebviewChrome for AndroidEdgeFirefox Mobile (Gecko)Firefox OSIE MobileOpera MobileSafari Mobile
Basic support{{CompatNo}}{{CompatNo}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatNo}}{{CompatIE("10")}}{{CompatNo}}{{CompatNo}}
-
- -

[1] Implementation withdrawn. See {{Bug("1166347")}}.

- -

See also

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

 {{APIRef}}

+ +

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

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

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

+ +

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

+ +

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

+ +

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

+ +

举例

+ +

Live example

+ +

HTML

+ +
<div class="source" contenteditable="true">Try copying text from this box...</div>
+<div class="target" contenteditable="true">...and pasting it into this one</div>
+ +

CSS

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

JS

+ +
const target = document.querySelector('div.target');
+
+target.addEventListener('paste', (event) => {
+    let paste = (event.clipboardData || window.clipboardData).getData('text');
+    paste = paste.toUpperCase();
+
+    const selection = window.getSelection();
+    if (!selection.rangeCount) return false;
+    selection.deleteFromDocument();
+    selection.getRangeAt(0).insertNode(document.createTextNode(paste));
+
+    event.preventDefault();
+});
+
+ +

Result

+ +

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

+ +

规范

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

浏览器兼容性

+ + + +

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

+ +

另见

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