diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/api/event | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/zh-cn/web/api/event')
24 files changed, 2230 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/event/bubbles/index.html b/files/zh-cn/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..0d3c205003 --- /dev/null +++ b/files/zh-cn/web/api/event/bubbles/index.html @@ -0,0 +1,27 @@ +--- +title: event.bubbles +slug: Web/API/Event/bubbles +translation_of: Web/API/Event/bubbles +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">概述</h3> +<p>返回一个布尔值,表明当前事件是否会向DOM树上层元素冒泡.</p> +<h3 id="语法">语法</h3> +<pre><em>var bool</em> = event.bubbles; +</pre> +<h3 id="Notes" name="Notes">备注</h3> +<p>一些特定的事件类型会冒泡.这时,该事件对象的<code>bubbles</code>属性为<code>true</code>. 你可以检查该属性的值来判断一个事件对象是否冒泡.</p> +<h3 id="Example" name="Example">例子</h3> +<pre class="brush: js"> function goInput(e) { + // 检查事件对象是否冒泡 + if (!e.bubbles) { + // 如果不冒泡,则手动传递事件 + passItOn(e); + } + // 如果冒泡的话 + doOutput(e) +} +</pre> +<h3 id="规范">规范</h3> +<p><a class="external" href="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-event-bubbles" title="http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#dom-event-bubbles">event.bubbles</a></p> +<p>{{ languages( { "es": "es/DOM/event.bubbles", "ja": "ja/DOM/event.bubbles", "pl": "pl/DOM/event.bubbles" , "zh-cn": "zh-cn/DOM/event.bubbles" } ) }}</p> diff --git a/files/zh-cn/web/api/event/cancelable/index.html b/files/zh-cn/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..260da1a336 --- /dev/null +++ b/files/zh-cn/web/api/event/cancelable/index.html @@ -0,0 +1,74 @@ +--- +title: event.cancelable +slug: Web/API/Event/cancelable +translation_of: Web/API/Event/cancelable +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>{{domxref("Event")}} 实例的只读属性 <strong><dfn><code>cancelable</code></dfn></strong> 表明该事件是否可以被取消，当事件被阻止之后，该事件就好像没有被触发一样。如果事件<strong>不能</strong>被取消，则其 cancelable 属性的值为 false，且事件发生时无法在事件监听回调中停止事件。</p> + +<p>在许多事件的监听回调中调用{{domxref("event.preventDefault", "preventDefault()")}}前，都需要检查 cancelable 属性的值。</p> + +<p>大部分由用户与页面交互产生的原生浏览器事件都可以被取消。取消{{event("click")}}，{{event("scroll")}} 或 {{event("beforeunload")}} 事件将分别阻止用户点击某些元素，滚动页面或跳离页面。</p> + +<p>使用其它 JavaScript 代码创建的 <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Event/Event">Custom events</a> ，可以在初始化事件的时候控制该事件是否可以被取消。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval"><em>bool = event</em>.cancelable；</pre> + +<h3 id="Syntax" name="Syntax">值</h3> + +<p>返回结果为 {{domxref("Boolean")}}，如果事件可以被取消将返回 true。</p> + +<h2 id="示例">示例</h2> + +<p>例如，浏览器厂商提议 {{event("wheel")}} 事件只能在<a href="https://github.com/WICG/interventions/issues/33">事件监听回调第一次执行</a>时被取消，接下来的 wheel 事件都不能被取消。</p> + +<pre><code>function preventScrollWheel(event) { + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + // The event can be canceled, so we do so. + event.preventDefault(); + } else { + // The event cannot be canceled, so it is not safe + // to call preventDefault() on it. + console.warn(`The following event couldn't be canceled:`); + console.dir(event); + } +} + +document.addEventListener('wheel', preventScrollWheel);</code></pre> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>事件能否被取消取决于该事件初始化时的状态。</p> + +<p>要取消一个事件的默认行为，可以调用该事件的 <code><a href="/zh-cn/DOM/event.preventDefault" title="zh-cn/DOM/event.preventDefault">preventDefault()</a></code>方法。与该事件关联的默认行为仍将会保留。</p> + +<h2 id="规范">规范</h2> + +<table> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<p>{{Compat("api.Event.cancelable")}}</p> diff --git a/files/zh-cn/web/api/event/comparison_of_event_targets/index.html b/files/zh-cn/web/api/event/comparison_of_event_targets/index.html new file mode 100644 index 0000000000..4efbf5931c --- /dev/null +++ b/files/zh-cn/web/api/event/comparison_of_event_targets/index.html @@ -0,0 +1,166 @@ +--- +title: Comparison of Event Targets +slug: Web/API/Event/Comparison_of_Event_Targets +tags: + - Event +translation_of: Web/API/Event/Comparison_of_Event_Targets +--- +<p>{{ ApiRef() }}</p> + +<h3 id="Event_targets" name="Event_targets">Event targets</h3> + +<p>It's easy to get confused about which target to examine when writing an event handler. This article should clarify the use of the target properties.</p> + +<p>There are 5 targets to consider:</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Property</th> + <th>Defined in</th> + <th>Purpose</th> + </tr> + <tr> + <td><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td> + <td> + <p>The DOM element on the lefthand side of the call that triggered this event, eg:</p> + + <pre class="eval"> +<em>element</em>.dispatchEvent(<em>event</em>) +</pre> + </td> + </tr> + <tr> + <td><a href="/en/DOM/event.currentTarget" title="en/DOM/event.currentTarget">event.currentTarget</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-interface">DOM Event Interface</a></td> + <td>The <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventTarget"><code>EventTarget</code></a> whose <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-EventListener"><code>EventListeners</code></a> are currently being processed. As the event capturing and bubbling occurs this value changes.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></td> + <td><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent">DOM MouseEvent Interface</a></td> + <td>Identifies a secondary target for the event.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.explicitOriginalTarget" title="en/DOM/event.explicitOriginalTarget">event.explicitOriginalTarget</a></td> + <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> + <td>{{ Non-standard_inline() }} If the event was retargeted for some reason other than an anonymous boundary crossing, this will be set to the target before the retargeting occurs. For example, mouse events are retargeted to their parent node when they happen over text nodes ({{ Bug("185889") }}), and in that case <code>.target</code> will show the parent and <code>.explicitOriginalTarget</code> will show the text node.<br> + Unlike <code>.originalTarget</code>, <code>.explicitOriginalTarget</code> will never contain anonymous content.</td> + </tr> + <tr> + <td><a href="/en/DOM/event.originalTarget" title="en/DOM/event.originalTarget">event.originalTarget</a></td> + <td>{{ Source("/dom/public/idl/events/nsIDOMNSEvent.idl", "nsIDOMNSEvent.idl") }}</td> + <td>{{ Non-standard_inline() }} The original target of the event, before any retargetings. See <a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="en/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> for details.</td> + </tr> + </tbody> +</table> + +<h3 id="Use_of_explicitOriginalTarget_and_originalTarget" name="Use_of_explicitOriginalTarget_and_originalTarget">Use of <code>explicitOriginalTarget</code> and <code>originalTarget</code></h3> + +<p>TODO: Only available in a Mozilla-based browser? TODO: Only suitable for extension-developers?</p> + +<h3 id="Examples" name="Examples">Examples</h3> + +<pre><!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <title>Comparison of Event Targets</title> + <style> + table { + border-collapse: collapse; + height: 150px; + width: 100%; + } + td { + border: 1px solid #ccc; + font-weight: bold; + padding: 5px; + min-height: 30px; + } + .standard { + background-color: #99ff99; + } + .non-standard { + background-color: #902D37; + } + </style> +</head> +<body> + <table> + <thead> + <tr> + <td class="standard">Original target dispatching the event <small>event.target</small></td> + <td class="standard">Target who's event listener is being processed <small>event.currentTarget</small></td> + <td class="standard">Identify other element (if any) involved in the event <small>event.relatedTarget</small></td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.explicitOriginalTarget</small> contains the target before retargetting (never contains anonymous targets)</td> + <td class="non-standard">If there was a retargetting of the event for some reason <small> event.originalTarget</small> contains the target before retargetting (may contain anonymous targets)</td> + </tr> + </thead> + <tr> + <td id="target"></td> + <td id="currentTarget"></td> + <td id="relatedTarget"></td> + <td id="explicitOriginalTarget"></td> + <td id="originalTarget"></td> + </tr> +</table> +<p>Clicking on the text will show the difference between explicitOriginalTarget, originalTarget and target</p> +<script> + function handleClicks(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('currentTarget').innerHTML = e.currentTarget; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + document.getElementById('explicitOriginalTarget').innerHTML = e.explicitOriginalTarget; + document.getElementById('originalTarget').innerHTML = e.originalTarget; + } + + function handleMouseover(e) { + document.getElementById('target').innerHTML = e.target; + document.getElementById('relatedTarget').innerHTML = e.relatedTarget; + } + + document.addEventListener('click', handleClicks, false); + document.addEventListener('mouseover', handleMouseover, false); +</script> +</body> +</html></pre> + +<h3 id="Use_of_target_and_relatedTarget" name="Use_of_target_and_relatedTarget">Use of <code>target</code> and <code>relatedTarget</code></h3> + +<p>The <code>relatedTarget</code> property for the <code>mouseover</code> event holds the node that the mouse was previously over. For the <code>mouseout</code> event, it holds the node that the mouse moved to.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th>Event type</th> + <th><a href="/en/DOM/event.target" title="en/DOM/event.target">event.target</a></th> + <th><a href="/en/DOM/event.relatedTarget" title="en/DOM/event.relatedTarget">event.relatedTarget</a></th> + </tr> + <tr> + <td><code>mouseover</code></td> + <td>the EventTarget which the pointing device entered</td> + <td>the EventTarget which the pointing device exited</td> + </tr> + <tr> + <td><code>mouseout</code></td> + <td>the EventTarget which the pointing device exited</td> + <td>the EventTarget which the pointing device entered</td> + </tr> + </tbody> +</table> + +<p>TODO: Also needs descriptions about <code>dragenter</code> and <code>dragexit</code> events.</p> + +<h4 id="Example" name="Example">Example</h4> + +<pre class="eval"><hbox id="outer"> + <hbox id="inner" + onmouseover="dump('mouseover ' + event.relatedTarget.id + ' > ' + event.target.id + '\n');" + onmouseout="dump('mouseout ' + event.target.id + ' > ' + event.relatedTarget.id + '\n');" + style="margin: 100px; border: 10px solid black; width: 100px; height: 100px;" /> +</hbox> +</pre> + +<p> </p> diff --git a/files/zh-cn/web/api/event/composed/index.html b/files/zh-cn/web/api/event/composed/index.html new file mode 100644 index 0000000000..afc72ea0be --- /dev/null +++ b/files/zh-cn/web/api/event/composed/index.html @@ -0,0 +1,97 @@ +--- +title: Event.composed +slug: Web/API/Event/composed +translation_of: Web/API/Event/composed +--- +<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> + +<p>{{domxref("Event")}} 接口的只读属性 <strong><code>composed</code></strong> 返回一个 {{jsxref("Boolean")}} 值，用来指示该事件是否可以从 Shadow DOM 传递到一般的 DOM。</p> + +<div class="note"> +<p>注意：此属性以前命名为<code>scoped</code>。</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate">var <em>composed</em> = <em>Event</em>.composed;</pre> + +<h3 id="值">值</h3> + +<p>如果返回的 {{jsxref("Boolean")}} 值为 <code>true</code>，表明当事件到达 shadow DOM 的根节点（也就是 shadow DOM 中事件开始传播的第一个节点）时，事件可以从 shadow DOM 传递到一般 DOM。当然，事件要具有可传播性，即该事件的 {{domxref("Event.bubbles", "bubbles")}} 属性必须为 <code>true</code>。你也可以通过调用 {{domxref("Event.composedPath", "composedPath()")}} 来查看事件从 shadow DOM 传播到普通 DOM 的路径。</p> + +<p>如果属性值为 <code>false</code>，那么事件将不会跨越 shadow DOM 的边界传播。</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-composed', 'composed')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特点</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatGeckoDesktop(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特点</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>基本支持</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatGeckoMobile(52)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/event/composedpath/index.html b/files/zh-cn/web/api/event/composedpath/index.html new file mode 100644 index 0000000000..1ab2f9abfb --- /dev/null +++ b/files/zh-cn/web/api/event/composedpath/index.html @@ -0,0 +1,92 @@ +--- +title: Event.composedPath() +slug: Web/API/Event/composedPath +tags: + - API +translation_of: Web/API/Event/composedPath +--- +<p>{{APIRef("Shadow DOM")}}</p> + +<p> <strong><code>composedPath()</code></strong> 是 {{domxref("Event")}} 接口的一个方法，当对象数组调用该侦听器时返回事件路径。 如果影子根节点被创建并且{{domxref("ShadowRoot.mode")}}是关闭的，那么该路径不包括影子树中的节点。</p> + +<h2 id="语法"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>语法</strong></span></font></h2> + +<pre class="syntaxbox">var <em>composed</em> = <em>Event</em>.composedPath(); +</pre> + +<h3 id="参数">参数</h3> + +<p>无.</p> + +<h3 id="返回值">返回值</h3> + +<p>一个 {{domxref("EventTarget")}}对象数组，表示将在其上调用事件侦听器的对象。</p> + +<h2 id="例子"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>例子</strong></span></font></h2> + +<p>在我们的 composed-composed-path 例子中，我们定义了两个自定义元素，<code><open-shadow></code> 和 <code><closed-shadow>，</code>两 个全都调用了它们文本属性的内容然后作为<code><p></code> 元素的文本内容将它们插入到元素的影子DOM中。两者之间唯一的区别是它们影子的根结点是在它们的模式被分别设置成<code>open</code> 和 <code>closed</code> 的情况下连接的。</p> + +<p>第一个定义就像这样, 比如:</p> + +<pre class="brush: js">customElements.define('open-shadow', + class extends HTMLElement { + constructor() { + super(); + + let pElem = document.createElement('p'); + pElem.textContent = this.getAttribute('text'); + + let shadowRoot = this.attachShadow({mode: 'open'}) + .appendChild(pElem); + + } +});</pre> + +<p>然后我们在我们的页面中插入其中一个元素:</p> + +<pre class="brush: html"><open-shadow text="I have an open shadow root"></open-shadow> +<closed-shadow text="I have a closed shadow root"></closed-shadow></pre> + +<p>然后在 <code><html></code> 元素中插入一个鼠标点击事件:</p> + +<pre class="brush: js">document.querySelector('html').addEventListener('click',function(e) { + console.log(e.composed); + console.log(e.composedPath()); +});</pre> + +<p>当你先后点击 <code><open-shadow></code> 和 <code><closed-shadow></code> 这两个元素, 你将会注意到两件事情. 第一， <code>composed</code> 这个属性返回值为 <code>true</code> 因为 <code>click</code> 事件总能够在影子边界中传播。 第二，你将注意到两个元素中<code>composedPath</code> 的值的不同。 <code><open-shadow></code> 元素的组成路径是这个:</p> + +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-array"><span class="objectTitle">Array </span><span class="arrayLeftBracket">[ </span><span class="objectBox objectBox-node"><span class="tag-name">p</span></span>, <span class="objectBox objectBox-object"><span class="objectTitle">ShadowRoot</span></span>, <span class="objectBox objectBox-node"><span class="tag-name">open-shadow</span></span>, <span class="objectBox objectBox-node"><span class="tag-name">body</span></span>, <span class="objectBox objectBox-node"><span class="tag-name">html</span></span>, <span class="objectBox objectBox-document"><span class="objectTitle">HTMLDocument</span> <span class="location">https://mdn.github.io/web-components-examples/composed-composed-path/</span></span>, <span class="objectBox objectBox-Window"><span class="objectTitle">Window</span></span><span class="arrayRightBracket"> ]</span></span></span></span></span></pre> + +<p>尽管 <code><closed-shadow></code> 元素的组成路径是像下面这样:</p> + +<pre class="brush: js"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body"><span class="objectBox objectBox-array"><span class="objectTitle">Array </span><span class="arrayLeftBracket">[ </span><span class="objectBox objectBox-node"><span class="tag-name">closed-shadow</span></span>, <span class="objectBox objectBox-node"><span class="tag-name">body</span></span>, <span class="objectBox objectBox-node"><span class="tag-name">html</span></span>, <span class="objectBox objectBox-document"><span class="objectTitle">HTMLDocument</span> <span class="location">https://mdn.github.io/web-components-examples/composed-composed-path/</span></span>, <span class="objectBox objectBox-Window"><span class="objectTitle">Window</span></span><span class="arrayRightBracket"> ]</span></span></span></span></span></pre> + +<p>在第二个例子中，事件监听器仅能够传播到 <code><closed-shadow></code> 元素本身，但是不会到影子边界内的节点。</p> + +<h2 id="规范"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>规范</strong></span></font></h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评语</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '##dom-event-composedpath', 'composedPath()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容"><font face="x-locale-heading-primary, zillaslab, Palatino, Palatino Linotype, x-locale-heading-secondary, serif"><span style="font-size: 40px;"><strong>浏览器兼容</strong></span></font></h2> + + + +<div> +<div class="hidden">这个页面的兼容表是从结构化的数据中制作出来的。如果你想为数据做贡献，请点击 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> 然后发送一个 pull 请求.</div> + +<p>{{Compat("api.Event.composedPath")}}</p> +</div> diff --git a/files/zh-cn/web/api/event/createevent/index.html b/files/zh-cn/web/api/event/createevent/index.html new file mode 100644 index 0000000000..b6fc00174a --- /dev/null +++ b/files/zh-cn/web/api/event/createevent/index.html @@ -0,0 +1,34 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +tags: + - DOM + - Event + - JavaScript + - Method +translation_of: Web/API/Document/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>创建一个新的事件（Event），随之必须调用自身的 init 方法进行初始化。</p> + +<h3 id="语法">语法</h3> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>指明待创建事件对象的类型的字符串</dd> +</dl> + +<p>此方法返回一个新的特定类型的 DOM {{ domxref("Event") }} 对象，此对象在使用前必须经过初始化（init）。</p> + +<h3 id="示例">示例</h3> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h3 id="规范">规范</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> diff --git a/files/zh-cn/web/api/event/currenttarget/index.html b/files/zh-cn/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..0ed0529962 --- /dev/null +++ b/files/zh-cn/web/api/event/currenttarget/index.html @@ -0,0 +1,88 @@ +--- +title: event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Event + - Property + - Read-only +translation_of: Web/API/Event/currentTarget +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Event")}} 接口的只读属性 <code><strong>currentTarget</strong></code> 表示的，标识是当事件沿着 DOM 触发时事件的当前目标。它总是指向事件绑定的元素，而 {{domxref("Event.target")}} 则是事件触发的元素。</p> + +<h2 id="语法">语法</h2> + +<pre class="notranslate">var <em>currentEventTarget</em> = <em>event</em>.currentTarget;</pre> + +<h3 id="Value">Value</h3> + +<p>{{domxref("EventTarget")}}</p> + +<h2 id="Example" name="Example">例子</h2> + +<p>当将相同的事件处理程序附加到多个元素时 <code>event.currentTarget</code> 就很有用。</p> + +<pre class="brush: js notranslate">function hide(e){ + e.currentTarget.style.visibility = "hidden"; + console.log(e.currentTarget); + // 该函数用作事件处理器时: this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + // console: 打印被点击的p元素 + ps[i].addEventListener('click', hide, false); +} +// console: 打印body元素 +document.body.addEventListener('click', hide, false); +</pre> + + + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-currenttarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#dfn-current-event-target", "current event target")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.currentTarget")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> +</ul> diff --git a/files/zh-cn/web/api/event/deeppath/index.html b/files/zh-cn/web/api/event/deeppath/index.html new file mode 100644 index 0000000000..2c0d7c0289 --- /dev/null +++ b/files/zh-cn/web/api/event/deeppath/index.html @@ -0,0 +1,89 @@ +--- +title: Event.deepPath +slug: Web/API/Event/deepPath +translation_of: Web/API/Event/composedPath +--- +<p>{{SeeCompatTable}}{{APIRef("Shadow DOM")}}</p> + +<p><span class="seoSummary">{{domxref("Event")}}的<strong><code>deepPath</code></strong> 属性返回事件冒泡过程所有经过的节点所构成的{{jsxref("Array")}}数组</span></p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>nodes</em>[] = Event.deepPath</pre> + +<h3 id="返回值">返回值</h3> + +<p>一组节点 构成的{{jsxref("Array")}}数组</p> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规格</th> + <th scope="col">状态</th> + <th scope="col">评语</th> + </tr> + <tr> + <td>{{SpecName('Shadow DOM','#widl-Event-deepPath-sequence-EventTarget','deepPath')}}</td> + <td>{{Spec2('Shadow DOM')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>Firefox OS</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(53.0)}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(53.0)}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/zh-cn/web/api/event/defaultprevented/index.html b/files/zh-cn/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..f72e97f936 --- /dev/null +++ b/files/zh-cn/web/api/event/defaultprevented/index.html @@ -0,0 +1,54 @@ +--- +title: event.defaultPrevented +slug: Web/API/Event/defaultPrevented +tags: + - API + - DOM + - Event + - Property +translation_of: Web/API/Event/defaultPrevented +--- +<p>{{ APIRef("DOM") }}</p> + +<h2 id="概述">概述</h2> + +<p>返回一个布尔值，表明当前事件是否调用了 {{ domxref("event.preventDefault()") }}方法。</p> + +<div class="note"><strong>注意:</strong>你应该使用该属性来代替以前的非标准的已经被废弃的<code>getPreventDefault()</code>方法 (查看{{ bug("691151") }}).</div> + +<h2 id="语法">语法</h2> + +<pre class="eval">bool = event.defaultPrevented +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: js"> if (e.defaultPrevented) { + /* 事件的默认动作已被取消*/ + } +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + + + +<p>{{Compat("api.Event.defaultPrevented")}}</p> diff --git a/files/zh-cn/web/api/event/event/index.html b/files/zh-cn/web/api/event/event/index.html new file mode 100644 index 0000000000..f6813f02e4 --- /dev/null +++ b/files/zh-cn/web/api/event/event/index.html @@ -0,0 +1,78 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - DOM + - 事件 + - 构造函数 +translation_of: Web/API/Event/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>Event()</strong></code> 构造函数, 创建一个新的事件对象 {{domxref("Event")}}。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"> <em>event</em> = new Event(<em>typeArg</em>, <em>eventInit</em>);</pre> + +<h3 id="参数">参数</h3> + +<dl> + <dt><em>typeArg</em></dt> + <dd>是{{domxref("DOMString")}} 类型，表示所创建事件的名称。</dd> + <dt><em>eventInit</em>{{optional_inline}}</dt> +</dl> + +<dl> + <dd>是 <code>EventInit</code> 类型的字典，接受以下字段: + + <ul> + <li><code>"bubbles"</code>，可选，{{jsxref("Boolean")}}类型，默认值为 <code style="font-style: normal;">false</code>，表示该事件是否冒泡。</li> + <li><code>"cancelable"</code>，可选，{{jsxref("Boolean")}}类型，默认值为 <code style="font-style: normal;">false</code>， 表示该事件能否被取消。</li> + <li><code>"composed"</code>，可选，{{jsxref("Boolean")}}类型，默认值为 <code style="font-style: normal;">false</code>，指示事件是否会在影子DOM根节点之外触发侦听器。</li> + </ul> + </dd> +</dl> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">// 创建一个支持冒泡且不能被取消的look事件 + +var ev = new Event("look", {"bubbles":true, "cancelable":false}); +document.dispatchEvent(ev); + +<code>// 事件可以在任何元素触发，不仅仅是document +myDiv.dispatchEvent(ev);</code> +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table" style="height: 49px; width: 1000px;"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG','#interface-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.Event")}}</p> + +<h2 id="相关阅读">相关阅读</h2> + +<ul> + <li>{{domxref("Event")}}</li> +</ul> diff --git a/files/zh-cn/web/api/event/eventphase/index.html b/files/zh-cn/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..d5be77ae7a --- /dev/null +++ b/files/zh-cn/web/api/event/eventphase/index.html @@ -0,0 +1,179 @@ +--- +title: Event.eventPhase +slug: Web/API/Event/eventPhase +translation_of: Web/API/Event/eventPhase +--- +<p>{{ApiRef("DOM")}}</p> + +<p>表示事件流当前处于哪一个阶段。</p> + +<h2 id="语法">语法</h2> + +<pre class="brush: js"><em>var phase</em> = event.eventPhase; +</pre> + +<p>返回一个代表当前执行阶段的 整数值，下面列出了不同的执行阶段{{anch("Event phase constants")}}.</p> + +<h2 id="常量">常量</h2> + +<h3 id="事件阶段常量">事件阶段常量</h3> + +<h3 id="下面这些值表示了事件流当前执行的阶段。"><span style="font-size: 14px; line-height: 21px;">下面这些值表示了事件流当前执行的阶段。</span></h3> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常量</th> + <th scope="col">值</th> + <th scope="col">描述</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>Event.NONE</code></td> + <td>0</td> + <td>这个时间，没有事件正在被处理</td> + </tr> + <tr> + <td><code>Event.CAPTURING_PHASE</code></td> + <td>1</td> + <td>事件正在被目标元素的祖先对象处理. 这个处理过程从{{domxref("Window")}}开始，然后{{domxref("Document")}}, 然后是{{domxref("HTMLHtmlElement")}}, 一直这样，直到目标元素的父元素。 通过{{domxref("EventTarget.addEventListener()")}} 注册为捕获模式的{{domxref("EventListener", "Event listeners", "", 1)}} 被调用。</td> + </tr> + <tr> + <td><code>Event.AT_TARGET</code></td> + <td>2</td> + <td>事件对象已经抵达{{domxref("EventTarget", "the event's target", "", 1)}}. 为这个阶段注册的事件监听被调用。 如果 {{domxref("Event.bubbles")}} 的值为false, 对事件对象的处理在这个阶段后就会结束.</td> + </tr> + <tr> + <td><code>Event.BUBBLING_PHASE</code></td> + <td>3</td> + <td>事件对象逆向向上传播回目标元素的祖先元素, 从父亲元素开始，并且最终到达包含元素 {{domxref("Window")}}. 这就是冒泡，并且只有{{domxref("Event.bubbles")}} 值为true的时候才会发生。 为这个阶段注册的{{domxref("EventListener", "Event listeners", "", 1)}} 在这个过程中被触发.</td> + </tr> + </tbody> +</table> + +<p>更多细节，请看<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a>, DOM 级别 3 的事件说明。</p> + +<h2 id="Example" name="Example">例子</h2> + +<h3 id="HTML_内容">HTML 内容</h3> + +<pre class="brush: html"><h4>Event Propagation Chain</h4> +<ul> + <li>Click 'd1'</li> + <li>Analyse event propagation chain</li> + <li>Click next div and repeat the experience</li> + <li>Change Capturing mode</li> + <li>Repeat the experience</li> +</ul> +<input type="checkbox" id="chCapture" /> +<label for="chCapture">Use Capturing</label> + <div id="d1">d1 + <div id="d2">d2 + <div id="d3">d3 + <div id="d4">d4</div> + </div> + </div> + </div> + <div id="divInfo"></div> +</pre> + +<h3 id="CSS_内容">CSS 内容</h3> + +<pre class="brush: css">div { + margin: 20px; + padding: 4px; + border: thin black solid; +} + +#divInfo { + margin: 18px; + padding: 8px; + background-color:white; + font-size:80%; +}</pre> + +<h3 id="JavaScript_内容">JavaScript 内容</h3> + +<pre class="brush: js">var clear = false, divInfo = null, divs = null, useCapture = false; +window.onload = function () { + divInfo = document.getElementById("divInfo"); + divs = document.getElementsByTagName('div'); + chCapture = document.getElementById("chCapture"); + chCapture.onclick = function () { + RemoveListeners(); + AddListeners(); + } + Clear(); + AddListeners(); +} + +function RemoveListeners() { + for (var i = 0; i < divs.length; i++) { + var d = divs[i]; + if (d.id != "divInfo") { + d.removeEventListener("click", OnDivClick, true); + d.removeEventListener("click", OnDivClick, false); + } + } +} + +function AddListeners() { + for (var i = 0; i < divs.length; i++) { + var d = divs[i]; + if (d.id != "divInfo") { + d.addEventListener("click", OnDivClick, false); + if (chCapture.checked) + d.addEventListener("click", OnDivClick, true); + d.onmousemove = function () { clear = true; }; + } + } +} + +function OnDivClick(e) { + if (clear) { + Clear(); clear = false; + } + if (e.eventPhase == 2) + e.currentTarget.style.backgroundColor = 'red'; + var level = e.eventPhase == 0 ? "none" : e.eventPhase == 1 ? "capturing" : e.eventPhase == 2 ? "target" : e.eventPhase == 3 ? "bubbling" : "error"; + divInfo.innerHTML += e.currentTarget.id + "; eventPhase: " + level + "<br/>"; +} + +function Clear() { + for (var i = 0; i < divs.length; i++) { + if (divs[i].id != "divInfo") + divs[i].style.backgroundColor = (i & 1) ? "#f6eedb" : "#cceeff"; + } + divInfo.innerHTML = ''; +} +</pre> + +<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p> + +<h2 id="说明">说明</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-eventphase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-eventphase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-eventPhase", "Event.eventPhase")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> diff --git a/files/zh-cn/web/api/event/index.html b/files/zh-cn/web/api/event/index.html new file mode 100644 index 0000000000..6660fccf0e --- /dev/null +++ b/files/zh-cn/web/api/event/index.html @@ -0,0 +1,212 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - 事件 + - 参考 + - 接口 + - 构造器 +translation_of: Web/API/Event +--- +<div>{{APIRef("DOM")}}</div> + +<p><span class="seoSummary"><strong><code>Event</code></strong> 接口表示在 DOM 中出现的事件。</span></p> + +<p>一些事件是由用户触发的，例如鼠标或键盘事件；而其他事件常由 API 生成，例如指示动画已经完成运行的事件，视频已被暂停等等。事件也可以通过脚本代码触发，例如对元素调用 <code><a href="/en-US/docs/Web/API/HTMLElement/click">HTMLElement.click()</a></code> 方法，或者定义一些自定义事件，再使用 <code><a href="/en-US/docs/Web/API/EventTarget/dispatchEvent">EventTarget.dispatchEvent()</a></code> 方法将自定义事件派发往指定的目标（target）。</p> + +<p>有许多不同类型的事件，其中一些使用基于 <code>Event</code> 主接口的二次接口。<code>Event</code> 本身包含适用于所有事件的属性和方法。</p> + +<p>很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。通过<code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener" title="The EventTarget method addEventListener() sets up a function that will be called whenever the specified event is delivered to the target.">EventTarget.addEventListener()</a></code>方法可以将事件处理函数绑定到不同的<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element">HTML elements</a>上 (比如<code><button></code>, <code><div></code>, <code><span></code>等等) 。这种绑定事件处理函数的方式基本替换了老版本中使用HTML <a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes">event handler attributes</a>来绑定事件处理函数的方式。除此之外，通过正确使用<a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener" title="The EventTarget.removeEventListener() method removes from the EventTarget an event listener previously registered with EventTarget.addEventListener(). The event listener to be removed is identified using a combination of the event type, the event listener function itself, and various optional options that may affect the matching process; see Matching event listeners for removal"><code>removeEventListener()</code></a>方法，这些事件处理函数也能被移除。</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> 一个元素可以绑定多个事件处理函数，甚至是同一种类型的事件。尤其是这种分离的，并且相互独立的代码模块对同一个元素绑定事件处理函数，每一个模块代码都有着独立的目的。（比如，一个网页同时有着广告模块和统计模块同时监听视频播放元素）</p> +</div> + +<p>当有很多嵌套的元素，并且每一个元素都有着自己的事件处理函数，事件处理过程会变得非常复杂。尤其当一个父元素和子元素绑定有相同类型的事件处理函数的时候。因为结构上的重叠，事件处理函数可能会依次被触发，触发的顺序取决于<a href="https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">事件冒泡和事件捕获</a>在每一个元素上的设置情况。</p> + +<h2 id="基于_Event_的接口">基于 <code>Event</code> 的接口</h2> + +<p>下面是主要基于<code>Event</code>接口的接口列表，每一个接口都设置了指向各自的MDN API说明的文档链接。</p> + +<p>需要注意的是，所有的事件接口名称都是以“Event”结尾的。</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("OverconstrainedError")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PaymentRequestUpdateEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="构造器">构造器</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd>创建并返回一个 <code>Event</code> 对象。</dd> +</dl> + +<h2 id="属性">属性</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>一个布尔值，用来表示该事件是否会在 DOM 中冒泡。</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>{{domxref("Event.stopPropagation()")}} 的历史别名。在事件处理器函数返回之前，将此属性的值设置为 <code>true</code>，亦可阻止事件继续冒泡。</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>一个布尔值，表示事件是否可以取消。</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>一个布尔值，表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡。</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>对事件当前注册的目标的引用。这是一个当前计划将事件发送到的对象。它是有可能在重定向的过程中被改变的。</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>一个由事件流所经过的 DOM {{domxref("Node", "节点")}}组成的{{jsxref("Array", "数组")}}。</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>一个布尔值，表示 {{domxref("event.preventDefault()")}} 方法是否取消了事件的默认行为。</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>表示事件流正被处理到了哪个阶段。</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>事件的明确（explicit）原始目标（Mozilla 专有属性）。</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>重设目标前的事件原始目标 （Mozilla 专有属性）。</dd> + <dt>{{domxref("Event.returnValue")}}</dt> + <dd>旧版 Internet Explorer 引入的一个非标准历史属性，为保证依赖此属性的网页正常运作，此属性最终被收入规范。可用 {{domxref("Event.preventDefault()")}} 与 {{domxref("Event.defaultPrevented")}} 代替，但由于已进入规范，也可以使用此属性。</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>旧版 Internet Explorer 对 {{domxref("Event.target")}} 的非标准别称。出于兼容原因，一些其他浏览器也支持此别称。</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>对事件原始目标的引用，这里的原始目标指最初派发（dispatch）事件时指定的目标。</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>事件创建时的时间戳（精度为毫秒）。按照规范，这个时间戳是 Unix 纪元起经过的毫秒数，但实际上，在不同的浏览器中，对此时间戳的定义也有所不同。另外，规范正在将其修改为 {{domxref("DOMHighResTimeStamp")}}。</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>事件的类型，不区分大小写。</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>表示事件是由浏览器（例如用户点击）发起的，还是由脚本（使用事件创建方法，例如 {{domxref("Event.initEvent")}}）发出的。</dd> +</dl> + +<dl> + <dt> + <h3 id="废弃属性">废弃属性</h3> + </dt> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>已废弃，使用 {{domxref("Event.composed")}} 代替此属性。<br> + 一个{{jsxref("Boolean", "布尔值")}}，表示给定的事件是否会穿过 Shadow DOM，进入到标准 DOM 中。</dd> +</dl> + +<h2 id="方法">方法</h2> + +<dl> + <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> + <dd>创建一个新事件，如果使用此方法创建事件，则必须调用其自身的 <code>initEvent()</code> 方法，对其进行初始化。</dd> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>返回事件的路径（将在该对象上调用监听器）。如果阴影根节点 (shadow root) 创建时 {{domxref("ShadowRoot.mode")}} 值为 closed，那么路径不会包括该根节点下阴影树 (shadow tree) 的节点。</dd> + <dt>{{domxref("event.initEvent")}}{{deprecated_inline}}</dt> + <dd>为通过 {{domxref("Event.createEvent()")}} 创建的事件初始化。该方法对已经被派发的事件无效。</dd> + <dt>{{domxref("event.preventDefault")}}</dt> + <dd>取消事件（如果该事件可取消）。</dd> + <dt>{{domxref("event.stopImmediatePropagation")}}</dt> + <dd>对这个特定的事件而言，没有其他监听器被调用。这个事件既不会添加到相同的元素上，也不会添加到以后将要遍历的元素上（例如在捕获阶段）。</dd> + <dt>{{domxref("event.stopPropagation")}}</dt> + <dd>停止冒泡，阻止事件在 DOM 中继续冒泡。</dd> +</dl> + +<h3 id="废弃方法">废弃方法</h3> + +<dl> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>非标准方法；使用 {{domxref("Event.defaultPrevented")}} 属性代替此方法。<br> + 返回 {{domxref("Event.defaultPrevented")}} 的值。</dd> + <dt>{{domxref("event.preventBubble")}} {{Obsolete_inline(24)}}</dt> + <dd>已废弃；使用 {{domxref("event.stopPropagation")}} 代替此方法。<br> + 阻止事件继续冒泡。</dd> + <dt>{{domxref("event.preventCapture")}} {{Obsolete_inline(24)}}</dt> + <dd>已废弃；使用 {{domxref("event.stopPropagation")}} 代替此方法。</dd> + <dt></dt> +</dl> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">备注</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event")}}</p> + +<h2 id="参考">参考</h2> + +<ul> + <li>可用的事件类型：<a href="/en-US/docs/Web/Reference/Events">Event 参考</a></li> + <li><a href="/en-US/docs/Web/API/Event/Comparison_of_Event_Targets">Event 目标的比较</a>（目标 <code>target</code> vs 当前目标 <code>currentTarget</code> vs 相关目标 <code>relatedTarget</code> vs 初始目标 <code>originalTarget</code>）</li> + <li><a href="/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">创建和触发自定义事件</a></li> + <li>Firefox 拓展开发： + <ul> + <li><a href="/en-US/docs/Listening_to_events_in_Firefox_extensions">监听 FireFox 扩展中的事件</a></li> + <li><a href="/en-US/docs/Listening_to_events_on_all_tabs">监听所有标签页中的事件</a></li> + </ul> + </li> +</ul> diff --git a/files/zh-cn/web/api/event/initevent/index.html b/files/zh-cn/web/api/event/initevent/index.html new file mode 100644 index 0000000000..d99b441c41 --- /dev/null +++ b/files/zh-cn/web/api/event/initevent/index.html @@ -0,0 +1,130 @@ +--- +title: Event.initEvent() +slug: Web/API/Event/initEvent +translation_of: Web/API/Event/initEvent +--- +<div>{{ ApiRef("DOM") }}{{deprecated_header}}</div> + +<p><strong><code>Event.initEvent()</code></strong> 方法可以用来初始化由{{domxref("Document.createEvent()") }} 创建的 {{ domxref("event") }} 实例.</p> + +<p>用这种方式初始化事件必须是由 {{ domxref("Document.createEvent()") }} 方法创建的实例. 本方法必须在事件被触发之前调用（用{{ domxref("EventTarget.dispatchEvent()") }}调用）.事件 一旦被调用, 便不再做其他任何事.</p> + +<div class="note"> +<p><strong>不建议再使用此方法（方法已经过时deprecated）</strong></p> + +<p>可以使用特定的event构造器函数, 比如 {{domxref("Event.Event", "Event()")}}. 该页有关于这些的更多信息 <a href="/en-US/docs/Web/Guide/Events/Creating_and_triggering_events">Creating and triggering events</a> .</p> +</div> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox"><em>event</em>.initEvent(<em>type</em>, <em>bubbles</em>, <em>cancelable</em>);</pre> + +<dl> + <dt><em><code>type</code></em></dt> + <dd>一个 {{domxref("DOMString")}} 类型的字段，定义了事件的类型.</dd> + <dt><em><code>bubbles</code></em></dt> + <dd>一个 {{jsxref("Boolean")}} 值，决定是否事件是否应该向上冒泡. 一旦设置了这个值，只读属性{{ domxref("Event.bubbles") }}也会获取相应的值.</dd> + <dt><em><code>cancelable</code></em></dt> + <dd>一个 {{jsxref("Boolean")}} 值，决定该事件的默认动作是否可以被取消. 一旦设置了这个值, 只读属性 {{ domxref("Event.cancelable") }} 也会获取相应的值.</dd> +</dl> + +<h2 id="Example" name="Example">范例</h2> + +<pre><code>// 创建事件. +var event = document.createEvent('Event'); +</code> +// 初始化一个点击事件，可以冒泡，无法被取消<code> +event.initEvent('click', true, false); + +// 设置事件监听. +elem.addEventListener('click', function (e) { + // e.target 就是监听事件目标元素 +}, false); + +// 触发事件监听 +elem.dispatchEvent(event);</code> +</pre> + +<h2 id="规格">规格</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-initevent','Event.initEvent()')}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>From {{SpecName('DOM2 Events')}}, deprecated it, superseded by event constructors.</td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events','##Events-Event-initEvent','Event.initEvent()')}}</td> + <td>{{Spec2('DOM2 Events')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown()}} [1]</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatUnknown() }} [1]</td> + <td>{{ CompatUnknown() }}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + <td>{{ CompatUnknown() }}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Before Firefox 17, a call to this method after the dispatching of the event raised an exception instead of doing nothing.</p> + +<h2 id="另见">另见</h2> + +<ul> + <li>The constructor to use instead of this deprecated method: {{domxref("Event.Event", "Event()")}}. More specific constructors can be used too.</li> +</ul> diff --git a/files/zh-cn/web/api/event/istrusted/index.html b/files/zh-cn/web/api/event/istrusted/index.html new file mode 100644 index 0000000000..275d384acd --- /dev/null +++ b/files/zh-cn/web/api/event/istrusted/index.html @@ -0,0 +1,62 @@ +--- +title: Event.isTrusted +slug: Web/API/Event/isTrusted +tags: + - API + - Event + - Reference + - 只读 + - 属性 +translation_of: Web/API/Event/isTrusted +--- +<div>{{APIRef("DOM")}}</div> + +<p>{{domxref("Event")}} 接口的 <strong><code>isTrusted</code></strong> 属性是一个只读属性，它是一个布尔值（{{domxref("Boolean")}}）。当事件是由用户行为生成的时候，这个属性的值为 <code>true</code> ，而当事件是由脚本创建、修改、通过 {{domxref("EventTarget.dispatchEvent()")}} 派发的时候，这个属性的值为 <code>false</code> 。</p> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox">var <em>eventIsTrusted</em> = <em>event</em>.isTrusted; +</pre> + +<h3 id="值">值</h3> + +<p>{{domxref("Boolean")}} （布尔值）</p> + +<h2 id="示例">示例</h2> + +<pre class="brush: js">if (e.isTrusted) { + /* Event 事件可信 */ +} else { + /* Event 事件不可信 */ +} +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">规范</th> + <th scope="col">现状</th> + <th scope="col">意见</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-istrusted', 'Event.isTrusted')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM3 Events', '#trusted-events', 'Trusted events')}}</td> + <td>{{Spec2('DOM3 Events')}}</td> + <td>添加有关受信任与不受信任事件的请求，而 <code>isTrusted</code> 属性并非由其定义。</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器支持">浏览器支持</h2> + +<div> + + +<p>{{Compat("api.Event.isTrusted")}}</p> +</div> diff --git a/files/zh-cn/web/api/event/originaltarget/index.html b/files/zh-cn/web/api/event/originaltarget/index.html new file mode 100644 index 0000000000..7032dfe1ba --- /dev/null +++ b/files/zh-cn/web/api/event/originaltarget/index.html @@ -0,0 +1,30 @@ +--- +title: Event.originalTarget +slug: Web/API/Event/originalTarget +tags: + - originalTarget +translation_of: Web/API/Event/originalTarget +--- +<div>{{ ApiRef("DOM") }} {{Non-standard_header}}</div> + +<div> </div> + +<h2 id="Summary" name="Summary">简介</h2> + +<p>original target是事件重定向之前的原始目标. (Mozilla-特有)</p> + +<p>在XBL的匿名内容中，这将是该事件最初触发的匿名节点。看到匿名的内容。查看<a href="/en-US/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting" title="XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting">Anonymous Content#Event_Flow_and_Targeting</a> 获取更多细节.</p> + +<p>注意:原始目标也可能是原生的匿名内容(参见Bug(“208427”))，在这种情况下，它对于非特权代码是无用的。</p> + +<p>查看<a href="/en-US/docs/DOM/event/Comparison_of_Event_Targets" title="DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p> + +<h2 id="Example" name="Example">示例</h2> + +<p><em>需要一个有意义的示例</em></p> + +<h2 id="Specification" name="Specification">Specification属性</h2> + +<p>这是一个Mozilla特有的属性. 定义在 {{Source("/dom/public/idl/events/nsIDOMNSEvent.idl")}}</p> + +<p>再 <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html">W3.org DOM Level 2 Events未定义这个属性</a></p> diff --git a/files/zh-cn/web/api/event/preventdefault/index.html b/files/zh-cn/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..643b1be269 --- /dev/null +++ b/files/zh-cn/web/api/event/preventdefault/index.html @@ -0,0 +1,170 @@ +--- +title: event.preventDefault +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Event + - preventDefault +translation_of: Web/API/Event/preventDefault +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Event")}} 接口的 <code><strong>preventDefault()</strong></code>方法，告诉{{Glossary("user agent")}}：如果此事件没有被显式处理，它默认的动作也不应该照常执行。此事件还是继续传播，除非碰到事件侦听器调用{{domxref("Event.stopPropagation", "stopPropagation()")}} 或{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}}，才停止传播。</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval"><em>event</em>.preventDefault(); + +</pre> + +<h3 id="参数">参数</h3> + +<p>无</p> + +<h3 id="返回值">返回值</h3> + +<p><code>undefined</code></p> + +<h2 id="Example" name="Example">示例</h2> + +<h3 id="Blocking_default_click_handling" name="Blocking_default_click_handling">阻止默认的点击事件执行</h3> + +<p>选中复选框是点击复选框的默认行为。下面这个例子说明了怎样阻止默认行为的发生：</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.querySelector("#id-checkbox").addEventListener("click", function(event) { + document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>"; + event.preventDefault(); +}, false);</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Please click on the checkbox control.</p> + +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> + +<div id="output-box"></div></pre> + +<h4 id="结果">结果</h4> + +<p>你可以看到如下的行为:</p> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Stopping_keystrokes_from_reaching_an_edit_field" name="Stopping_keystrokes_from_reaching_an_edit_field">在编辑域中阻止按键</h3> + +<p>下面的这个例子说明了如何使用<code>preventDefault()</code>在文本编辑域中阻止有效的文本输入。如今，你通常可以使用<a href="/zh-CN/docs/Learn/HTML/Forms/Data_form_validation">原生的HTML表单验证</a>来代替。</p> + +<h4 id="HTML_2">HTML</h4> + +<p>表单:</p> + +<pre class="brush: html"><div class="container"> + <p>Please enter your name using lowercase letters only.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>当用户按下一个有效按键的时候，我们就给这个warning box 加上一些样式：</p> + +<pre class="brush: css">.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>这里是相关的JavaScript代码。首先，监听{{event("keypress")}}事件：</p> + +<pre class="brush: js"><code>var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false);</code></pre> + +<p> <code>checkName()</code>方法可以监听按键并且决定是否允许按键的默认行为发生。</p> + +<pre class="brush: js">function checkName(evt) { + var charCode = evt.charCode; + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { + evt.preventDefault(); + displayWarning( + "Please use lowercase letters only." + + "\n" + "charCode: " + charCode + "\n" + ); + } + } +}</pre> + +<p><code>displayWarning()</code>方法显示了一个问题的通知。这不是一种优雅的方法，但是确实可以达到我们的目的。</p> + +<pre class="brush: js">var warningTimeout; +var warningBox = document.createElement("div"); +warningBox.className = "warning"; + +function displayWarning(msg) { + warningBox.innerHTML = msg; + + if (document.body.contains(warningBox)) { + window.clearTimeout(warningTimeout); + } else { + // insert warningBox after myTextbox + myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); + } + + warningTimeout = window.setTimeout(function() { + warningBox.parentNode.removeChild(warningBox); + warningTimeout = -1; + }, 2000); +}</pre> + +<h4 id="结果_2">结果</h4> + +<p>这里就是代码的执行结果:</p> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="备注"><font><font>备注</font></font></h2> + +<p>在事件流的任何阶段调用<code>preventDefault()</code>都会取消事件，这意味着任何通常被该实现触发并作为结果的默认行为都不会发生。</p> + +<p>你可以使用 {{domxref("Event.cancelable")}} 来检查该事件是否支持取消。为一个不支持cancelable的事件调用<code>preventDefault()</code>将没有效果。</p> + +<h2 id="Specifications" name="Specifications">规范</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">规范</th> + <th scope="col">状态</th> + <th scope="col">注释</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>初版</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容">浏览器兼容</h2> + +<p>{{Compat("api.Event.preventDefault")}}</p> diff --git a/files/zh-cn/web/api/event/returnvalue/index.html b/files/zh-cn/web/api/event/returnvalue/index.html new file mode 100644 index 0000000000..78266987e7 --- /dev/null +++ b/files/zh-cn/web/api/event/returnvalue/index.html @@ -0,0 +1,62 @@ +--- +title: Event.returnValue +slug: Web/API/Event/returnValue +tags: + - API + - DOM + - 事件 + - 参考 + - 属性 +translation_of: Web/API/Event/returnValue +--- +<div>{{APIRef("DOM Events")}}</div> + +<p><span class="seoSummary"><code><strong>Event.returnValue</strong></code> 属性表示该事件的默认操作是否已被阻止。</span>默认情况下，它被设置为 <code>true</code>，即允许进行默认操作。将该属性设置为 <code>false</code> 即可阻止默认操作。</p> + +<div class="note"> +<p><strong>注意：</strong> While <code>returnValue</code> has been adopted into the DOM standard, it is present primarily to support existing code. You should use {{DOMxRef("Event.preventDefault", "preventDefault()")}}, and {{domxref("Event.defaultPrevented", "defaultPrevented")}} instead of this historical property.</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox"><var>event</var>.returnValue = <var>bool;</var> + +var <var>bool</var> = <var>event</var>.returnValue; +</pre> + +<h3 id="值">值</h3> + +<p>A {{domxref("Boolean")}} value which is <code>true</code> if the event has not been canceled; otherwise, if the event has been canceled or the default has been prevented, the value is <code>false</code>.</p> + +<p>The value returned by <code>returnValue</code> is the opposite of the value returned by {{domxref("Event.defaultPrevented", "defaultPrevented")}}.</p> + +<h2 id="使用备注">使用备注</h2> + +<p><code>returnValue</code> was introduced into the DOM by Internet Explorer 6, and due to that browser's ubiquity became so commonly used that other browsers eventually implemented it as well. It has been adopted into the DOM specification, primarily to ensure that existing web content continues to function going forward.</p> + +<p>New projects should generally avoid using <code>returnValue</code>, although they may if they choose to do so.</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>{{SpecName("DOM WHATWG", "#dom-event-returnvalue", "returnValue")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td>Added for legacy compatibility.</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.returnValue")}}</p> diff --git a/files/zh-cn/web/api/event/srcelement/index.html b/files/zh-cn/web/api/event/srcelement/index.html new file mode 100644 index 0000000000..6a219673fc --- /dev/null +++ b/files/zh-cn/web/api/event/srcelement/index.html @@ -0,0 +1,76 @@ +--- +title: Event.srcElement +slug: Web/API/Event/srcElement +translation_of: Web/API/Event/srcElement +--- +<p>{{ApiRef("DOM")}}</p> + +<p>{{ Non-standard_header() }}</p> + +<p><strong><code>Event.srcElement</code></strong> 是标准的 {{domxref("Event.target")}} 属性的一个别名。它只对老版本的IE浏览器有效。</p> + +<h2 id="规范">规范</h2> + +<p>不属于任何规范</p> + +<p>微软 <u><a href="https://msdn.microsoft.com/en-us/library/ff974945(v=vs.85).aspx">在MSDN有一篇描述。</a></u></p> + +<h2 id="sect1"> </h2> + +<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}}</td> + <td>{{CompatNo}} [1]</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>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>{{CompatNo}} [1]</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1]: {{bug(453968)}}</p> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li>{{domxref("Window.event")}}</li> +</ul> diff --git a/files/zh-cn/web/api/event/stopimmediatepropagation/index.html b/files/zh-cn/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..542df3f67d --- /dev/null +++ b/files/zh-cn/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,89 @@ +--- +title: event.stopImmediatePropagation +slug: Web/API/Event/stopImmediatePropagation +tags: + - API + - 事件 + - 参考 + - 方法 +translation_of: Web/API/Event/stopImmediatePropagation +--- +<p>{{APIRef("DOM")}}</p> + +<p>{{domxref("Event")}} 接口的 <code><strong>stopImmediatePropagation()</strong></code> 方法阻止监听同一事件的其他事件监听器被调用。</p> + +<p>如果多个事件监听器被附加到相同元素的相同事件类型上，当此事件触发时，它们会按其被添加的顺序被调用。如果在其中一个事件监听器中执行 <code>stopImmediatePropagation()</code> ，那么剩下的事件监听器都不会被调用。</p> + +<div class="blockIndicator note"> +<p>译者注：注意与 <code>event.stopPropagation()</code> 之间的区别</p> +</div> + +<h2 id="语法">语法</h2> + +<pre class="syntaxbox notranslate"><var>event</var>.stopImmediatePropagation(); +</pre> + +<h2 id="例子">例子</h2> + +<pre class="syntaxbox notranslate"><!DOCTYPE html> +<html> + <head> + <style> + p { height: 30px; width: 150px; background-color: #ccf; } + div {height: 30px; width: 150px; background-color: #cfc; } + </style> + </head> + <body> + <div> + <p>paragraph</p> + </div> + <script> + const p = document.querySelector('p') + p.addEventListener("click", (event) => { + alert("我是p元素上被绑定的第一个监听函数"); + }, false); + + p.addEventListener("click", (event) => { + alert("我是p元素上被绑定的第二个监听函数"); + event.stopImmediatePropagation(); + // 执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行. + }, false); + + p.addEventListener("click",(event) => { + alert("我是p元素上被绑定的第三个监听函数"); + // 该监听函数排在上个函数后面，该函数不会被执行 + }, false); + + document.querySelector("div").addEventListener("click", (event) => { + alert("我是div元素,我是p元素的上层元素"); + // p元素的click事件没有向上冒泡，该函数不会被执行 + }, false); + </script> + </body> +</html> +</pre> + +<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>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.stopImmediatePropagation")}}</p> diff --git a/files/zh-cn/web/api/event/stoppropagation/index.html b/files/zh-cn/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..f494423b47 --- /dev/null +++ b/files/zh-cn/web/api/event/stoppropagation/index.html @@ -0,0 +1,80 @@ +--- +title: event.stopPropagation +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Event + - stopPropagation + - 事件 + - 方法 + - 阻止冒泡事件 +translation_of: Web/API/Event/stopPropagation +--- +<p>{{APIRef("DOM")}}</p> + +<p>阻止捕获和冒泡阶段中当前事件的进一步传播。 </p> + +<p>但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。</p> + +<p>如果要停止这些行为，请参见 <a href="/zh-cn/DOM/event.preventDefault" title="zh-cn/DOM/event.preventDefault">preventDefault</a> 方法，它可以阻止事件触发后默认动作的发生。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="eval notranslate"><em>event</em>.stopPropagation(); +</pre> + +<h3 id="参数">参数</h3> + +<p>None.</p> + +<h3 id="返回值">返回值</h3> + +<p>undefined.</p> + +<h2 id="Example" name="Example">例子</h2> + +<p>查看示例5: <a href="/zh-cn/Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation" title="zh-cn/Gecko_DOM_Reference/Examples#Example_5:_Event_Propagation">事件传播</a> 在示例一章中有关此方法和事件在DOM中传播的更详细示例。</p> + +<h2 id="Notes" name="Notes">备注</h2> + +<p>查看 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM 规范</a> 中关于事件流的解释。 ( <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow" title="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 事件草案</a> 有案例可参考。)</p> + +<p><a href="/zh-cn/DOM/event.preventDefault" title="zh-cn/DOM/event.preventDefault">preventDefault</a> 是另外一个相关的方法，它可以阻止事件触发后默认动作的发生。</p> + +<h2 id="Specification" name="Specification">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>规范</th> + <th>状态</th> + <th>说明</th> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#widl-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>初始定义</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性" style="margin-bottom: 20px; line-height: 30px; font-size: 2.14285714285714rem;">浏览器兼容性</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.Event.stopPropagation")}}</p> + +<div id="compat-desktop"></div> diff --git a/files/zh-cn/web/api/event/target/index.html b/files/zh-cn/web/api/event/target/index.html new file mode 100644 index 0000000000..c2b8544a36 --- /dev/null +++ b/files/zh-cn/web/api/event/target/index.html @@ -0,0 +1,87 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - event.target + - 事件委托 (event delegation) +translation_of: Web/API/Event/target +--- +<p>{{ ApiRef("DOM") }}</p> + +<p>触发事件的对象 (某个DOM元素) 的引用。当事件处理程序在事件的冒泡或捕获阶段被调用时，它与{{domxref("event.currentTarget")}}不同。</p> + +<h2 id="Example" name="Example">语法</h2> + +<pre><code><code>let theTarget = event.target</code></code></pre> + +<h2 id="Example" name="Example">示例</h2> + +<p><code>event.target </code>属性可以用来实现<strong>事件委托</strong> (<strong>event delegation</strong>)。</p> + +<pre class="brush: js">// Make a list +var ul = document.createElement('ul'); +document.body.appendChild(ul); + +var li1 = document.createElement('li'); +var li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); + +function hide(e){ + // e.target 引用着 <li> 元素 + // 不像 e.currentTarget 引用着其父级的 <ul> 元素. + e.target.style.visibility = 'hidden'; +} + +// 添加监听事件到列表，当每个 <li> 被点击的时候都会触发。 +ul.addEventListener('click', hide, false); +</pre> + +<h2 id="规范">规范</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>Specification</th> + <th>Status</th> + <th>Comment</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="浏览器兼容性">浏览器兼容性</h2> + + + +<p>{{Compat("api.Event.target")}}</p> + +<p>在 IE6-8 中，事件模型与标准不同。使用非标准的 <a href="http://msdn.microsoft.com/en-us/library/ie/ms536343%28v=vs.85%29.aspx"><code>element.attachEvent()</code></a> 方法绑定事件监听器。在该模型中，事件对象有一个 <code>srcElement</code> 属性，等价于<code>target</code> 属性。</p> + +<pre class="brush: js" style="font-size: 14px;">function hide(e) { + // 支持 IE6-8 + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<h2 id="相关链接">相关链接</h2> + +<ul> + <li><a href="/en/DOM/event/Comparison_of_Event_Targets" title="en/DOM/event/Comparison_of_Event_Targets">Comparison of Event Targets</a></li> + <li>{{domxref("Event.currentTarget")}}</li> +</ul> diff --git a/files/zh-cn/web/api/event/timestamp/index.html b/files/zh-cn/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..3e877af22b --- /dev/null +++ b/files/zh-cn/web/api/event/timestamp/index.html @@ -0,0 +1,55 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - API + - DOM + - Event + - timeStamp +translation_of: Web/API/Event/timeStamp +--- +<div>{{APIRef}}</div> + +<div> </div> + +<div class="warning"><strong>警告:</strong> 在Gecko中,该属性的值不是事件发生时正确的事件戳.查看 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=238041" title="https://bugzilla.mozilla.org/show_bug.cgi?id=238041">https://bugzilla.mozilla.org/show_bug.cgi?id=238041</a></div> + +<h3 id="Summary" name="Summary">概述</h3> + +<p>返回事件发生时的时间戳.</p> + +<h3 id="Syntax" name="Syntax">语法</h3> + +<pre class="eval" style="margin-top: 0px; margin-right: 0px; margin-bottom: 1.286em; margin-left: 0px; padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-clip: initial; background-color: rgb(246, 246, 242); font: normal normal normal 100%/normal 'Courier New', 'Andale Mono', monospace;"><em>var number</em> = event.timeStamp; +</pre> + +<h3 id="Syntax" name="Syntax">例子</h3> + +<pre class="brush: html"><html> +<head> + +<title>timeStamp example</title> + +<script type="text/javascript"> +function getTime(event) { + document.getElementById("time").firstChild.nodeValue = event.timeStamp; +} +</script> +</head> + +<body onkeypress="getTime(event)"> + +<p>按下任意键获取onkeypress事件对象的timestamp属性值.</p> +<p>timeStamp: <span id="time">-</span></p> + +</body> +</html> +</pre> + +<h3 id="Notes" name="Notes">备注</h3> + +<p>此属性仅适用于事件系统支持该属性的特定事件类型.</p> + +<h3 id="Specification" name="Specification">规范</h3> + +<p><a class="external" href="http://www.w3.org/TR/2000/REC-DOM-Level-2-Events-20001113/events.html#Events-Event-timeStamp">event.timestamp</a></p> diff --git a/files/zh-cn/web/api/event/type/index.html b/files/zh-cn/web/api/event/type/index.html new file mode 100644 index 0000000000..b7e80e0000 --- /dev/null +++ b/files/zh-cn/web/api/event/type/index.html @@ -0,0 +1,106 @@ +--- +title: event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Event + - Property + - 参考 + - 属性 +translation_of: Web/API/Event/type +--- +<p>{{APIRef("DOM")}}</p> + +<p>只读属性<strong> Event.type </strong>会返回一个字符串, 表示该事件对象的事件类型。</p> + +<p>传给 {{ domxref("EventTarget.addEventListener()") }} 和 {{ domxref("EventTarget.removeEventListener()") }} 方法的 event 参数的值是忽略大小写的.</p> + +<p>要了解所有的事件类型, 请查看 <a href="/en-US/docs/Mozilla_event_reference" title="Mozilla event reference">Mozilla 事件类型参考</a>.</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">event.type +</pre> + +<h2 id="示例">示例</h2> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="utf-8"> + + <title>Event.type Example</title> + + <script> + var currEvent = null; + function getEvtType(evt) { + console.log("//Start------------getEvtType(evt)------------ "); + + currEvent = evt.type; + console.log(currEvent); + + //document.getElementById("Etype").firstChild.nodeValue = currEvent; + document.getElementById("Etype").innerHTML = currEvent; + + console.log("//End--------------getEvtType(evt)------------ "); + } + + //Keyboard events + document.addEventListener("keypress", getEvtType, false); //[second] + + document.addEventListener("keydown", getEvtType, false); //first + document.addEventListener("keyup", getEvtType, false); //third + + //Mouse events + document.addEventListener("click", getEvtType, false); // third + + document.addEventListener("mousedown", getEvtType, false); //first + document.addEventListener("mouseup", getEvtType, false); //second + + </script> +</head> + +<body> + +<p>Press any key or click the mouse to get the event type.</p> +<p>Event type: <span id="Etype" style="color:red">-</span></p> + +</body> +</html> +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample('示例')}}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM4') }}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM2 Events') }}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p> </p> diff --git a/files/zh-cn/web/api/event/禁用时间冒泡/index.html b/files/zh-cn/web/api/event/禁用时间冒泡/index.html new file mode 100644 index 0000000000..c228d329d6 --- /dev/null +++ b/files/zh-cn/web/api/event/禁用时间冒泡/index.html @@ -0,0 +1,93 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/禁用时间冒泡 +tags: + - 事件 +translation_of: Web/API/Event/cancelBubble +--- +<p>{{APIRef("DOM Events")}} </p> + +<p><code><strong>Event.cancelBubble</strong></code> 属性是 {{domxref("Event.stopPropagation()")}}的一个曾用名。在从事件处理程序返回之前将其值设置为true可阻止事件的传播。</p> + +<h2 id="Syntax" name="Syntax">语法</h2> + +<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> +<em>let bool</em> = event.cancelBubble;</pre> + +<h2 id="用例">用例</h2> + +<dl> + <dt> + <pre class="syntaxbox">ele.onclick = function(e) { + // 在这儿可以做点儿有趣的事情 + e.cancelBubble = true; +}</pre> + </dt> +</dl> + +<h2 id="规范">规范</h2> + +<p><em>这个属性的规范并未统一.</em> 因为他还有其他标准 W3C版： <a href="http://www.w3.org/TR/1999/WD-DOM-Level-2-19990304/events.html#attribute-cancelBubble">an old Working Draft of W3C DOM Level 2</a>. 微软版： <a href="https://msdn.microsoft.com/en-us/library/ms533545(v=vs.85).aspx">description of it on MSDN</a>.</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容</h2> + +<p>{{ CompatibilityTable() }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Firefox (Gecko)</th> + <th>Chrome</th> + <th>Edge</th> + <th>Internet Explorer</th> + <th>Microsoft Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{ CompatNo() }}</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>Firefox Mobile (Gecko)</th> + <th>Android</th> + <th>Edge</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> + </tr> + </tbody> +</table> +</div> + +<h2 id="参考">参考</h2> + +<ul> + <li>{{domxref("UIEvent.cancelBubble")}}</li> + <li>translated by cnvoid</li> +</ul> |