diff options
Diffstat (limited to 'files/zh-tw/web/api/event/eventphase/index.html')
| -rw-r--r-- | files/zh-tw/web/api/event/eventphase/index.html | 179 |
1 files changed, 179 insertions, 0 deletions
diff --git a/files/zh-tw/web/api/event/eventphase/index.html b/files/zh-tw/web/api/event/eventphase/index.html new file mode 100644 index 0000000000..e146e7b230 --- /dev/null +++ b/files/zh-tw/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>表示事件物件目前於事件流（Event Flow）中傳遞的進度為哪一個階段。</p> + +<h2 id="語法">語法</h2> + +<pre class="brush: js"><em>var phase</em> = event.eventPhase; +</pre> + +<p>回傳一個整數值以代表目前事件於事件流中的傳遞階段，可能的值將於{{anch("事件傳遞階段常數")}}說明。</p> + +<h2 id="常數">常數</h2> + +<h3 id="事件傳遞階段常數">事件傳遞階段常數</h3> + +<p>These values describe which phase the event flow is currently being evaluated.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">常數</th> + <th scope="col">值</th> + <th scope="col">說明</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Event.NONE")}} {{readonlyinline}}</td> + <td>0</td> + <td>No event is being processed at this time.</td> + </tr> + <tr> + <td>{{domxref("Event.CAPTURING_PHASE")}} {{readonlyinline}}</td> + <td>1</td> + <td>The event is being propagated through the target's ancestor objects. This process starts with the {{domxref("Window")}}, then {{domxref("Document")}}, then the {{domxref("HTMLHtmlElement")}}, and so on through the elements until the target's parent is reached. {{domxref("EventListener", "Event listeners", "", 1)}} registered for capture mode when {{domxref("EventTarget.addEventListener()")}} was called are triggered during this phase.</td> + </tr> + <tr> + <td>{{domxref("Event.AT_TARGET")}} {{readonlyinline}}</td> + <td>2</td> + <td>The event has arrived at {{domxref("EventTarget", "the event's target", "", 1)}}. Event listeners registered for this phase are called at this time. If {{domxref("Event.bubbles")}} is false, processing the event is finished after this phase is complete.</td> + </tr> + <tr> + <td>{{domxref("Event.BUBBLING_PHASE")}} {{readonlyinline}}</td> + <td>3</td> + <td>The event is propagating back up through the target's ancestors in reverse order, starting with the parent, and eventually reaching the containing {{domxref("Window")}}. This is known as bubbling, and occurs only if {{domxref("Event.bubbles")}} is <code>true</code>. {{domxref("EventListener", "Event listeners", "", 1)}} registered for this phase are triggered during this process.</td> + </tr> + </tbody> +</table> + +<p>For more details, see <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>, of the DOM Level 3 Events specification.</p> + +<h2 id="Example" name="Example">範例</h2> + +<h3 id="HTML_Content">HTML Content</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_Content">CSS Content</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_Content">JavaScript Content</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> |