aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/api/event/eventphase/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/fr/web/api/event/eventphase/index.html')
-rw-r--r--files/fr/web/api/event/eventphase/index.html112
1 files changed, 56 insertions, 56 deletions
diff --git a/files/fr/web/api/event/eventphase/index.html b/files/fr/web/api/event/eventphase/index.html
index 439f769f0a..290a0e6659 100644
--- a/files/fr/web/api/event/eventphase/index.html
+++ b/files/fr/web/api/event/eventphase/index.html
@@ -23,7 +23,7 @@ translation_of: Web/API/Event/eventPhase
<h2 id="Constantes">Constantes</h2>
-<h3 id="Constantes_de_phase_d'événement"><a id="Constantes de phase d'événement" name="Constantes de phase d'événement"></a>Constantes de phase d'événement</h3>
+<h3 id="Constantes_de_phase_d'événement">Constantes de phase d'événement</h3>
<p>Ces valeurs décrivent quelle est la phase du flux d'événements actuellement évalué.</p>
@@ -63,9 +63,9 @@ translation_of: Web/API/Event/eventPhase
</tbody>
</table>
-<p>Pour plus de détails, voir <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> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
+<p>Pour plus de détails, voir <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">section 3.1, Event dispatch and DOM event flow</a> (en) de la spécification du DOM niveau 3 sur les évènements .</p>
-<h2 id="Example" name="Example">Exemple</h2>
+<h2 id="Example">Exemple</h2>
<h3 id="HTML">HTML</h3>
@@ -106,59 +106,59 @@ translation_of: Web/API/Event/eventPhase
<h3 id="JavaScript">JavaScript</h3>
-<pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">var</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">,</span> divInfo <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> divs <span class="operator token">=</span> <span class="keyword token">null</span><span class="punctuation token">,</span> useCapture <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
-window<span class="punctuation token">.</span>onload <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- divInfo <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"divInfo"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- divs <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementsByTagName</span><span class="punctuation token">(</span><span class="string token">'div'</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- chCapture <span class="operator token">=</span> document<span class="punctuation token">.</span><span class="function token">getElementById</span><span class="punctuation token">(</span><span class="string token">"chCapture"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- chCapture<span class="punctuation token">.</span>onclick <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- <span class="punctuation token">}</span>
- <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">RemoveListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- d<span class="punctuation token">.</span><span class="function token">removeEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- <span class="punctuation token">}</span>
- <span class="punctuation token">}</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">AddListeners</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">var</span> d <span class="operator token">=</span> divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">;</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>d<span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>chCapture<span class="punctuation token">.</span>checked<span class="punctuation token">)</span>
- d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- <span class="keyword token">else</span>
- d<span class="punctuation token">.</span><span class="function token">addEventListener</span><span class="punctuation token">(</span><span class="string token">"click"</span><span class="punctuation token">,</span> OnDivClick<span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
- d<span class="punctuation token">.</span>onmousemove <span class="operator token">=</span> <span class="keyword token">function</span> <span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span> clear <span class="operator token">=</span> <span class="keyword token">true</span><span class="punctuation token">;</span> <span class="punctuation token">}</span><span class="punctuation token">;</span>
- <span class="punctuation token">}</span>
- <span class="punctuation token">}</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">OnDivClick</span><span class="punctuation token">(</span>e<span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>clear<span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span> clear <span class="operator token">=</span> <span class="keyword token">false</span><span class="punctuation token">;</span>
- <span class="punctuation token">}</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span><span class="punctuation token">)</span>
- e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="string token">'red'</span><span class="punctuation token">;</span>
- <span class="keyword token">var</span> level <span class="operator token">=</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">0</span> <span class="operator token">?</span> <span class="string token">"none"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">1</span> <span class="operator token">?</span> <span class="string token">"capturing"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">2</span> <span class="operator token">?</span> <span class="string token">"target"</span> <span class="punctuation token">:</span> e<span class="punctuation token">.</span>eventPhase <span class="operator token">==</span> <span class="number token">3</span> <span class="operator token">?</span> <span class="string token">"bubbling"</span> <span class="punctuation token">:</span> <span class="string token">"error"</span><span class="punctuation token">;</span>
- divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">+</span><span class="operator token">=</span> e<span class="punctuation token">.</span>currentTarget<span class="punctuation token">.</span>id <span class="operator token">+</span> <span class="string token">"; eventPhase: "</span> <span class="operator token">+</span> level <span class="operator token">+</span> <span class="string token">"&lt;br/&gt;"</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span>
-
-<span class="keyword token">function</span> <span class="function token">Clear</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">for</span> <span class="punctuation token">(</span><span class="keyword token">var</span> i <span class="operator token">=</span> <span class="number token">0</span><span class="punctuation token">;</span> i <span class="operator token">&lt;</span> divs<span class="punctuation token">.</span>length<span class="punctuation token">;</span> i<span class="operator token">++</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
- <span class="keyword token">if</span> <span class="punctuation token">(</span>divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>id <span class="operator token">!=</span> <span class="string token">"divInfo"</span><span class="punctuation token">)</span>
- divs<span class="punctuation token">[</span>i<span class="punctuation token">]</span><span class="punctuation token">.</span>style<span class="punctuation token">.</span>backgroundColor <span class="operator token">=</span> <span class="punctuation token">(</span>i <span class="operator token">&amp;</span> <span class="number token">1</span><span class="punctuation token">)</span> <span class="operator token">?</span> <span class="string token">"#f6eedb"</span> <span class="punctuation token">:</span> <span class="string token">"#cceeff"</span><span class="punctuation token">;</span>
- <span class="punctuation token">}</span>
- divInfo<span class="punctuation token">.</span>innerHTML <span class="operator token">=</span> <span class="string token">''</span><span class="punctuation token">;</span>
-<span class="punctuation token">}</span></code></pre>
+<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 &lt; 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 &lt; divs.length; i++) {
+ var d = divs[i];
+ if (d.id != "divInfo") {
+ if (chCapture.checked)
+ d.addEventListener("click", OnDivClick, true);
+ else
+ d.addEventListener("click", OnDivClick, false);
+ 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 + "&lt;br/&gt;";
+}
+
+function Clear() {
+ for (var i = 0; i &lt; divs.length; i++) {
+ if (divs[i].id != "divInfo")
+ divs[i].style.backgroundColor = (i &amp; 1) ? "#f6eedb" : "#cceeff";
+ }
+ divInfo.innerHTML = '';
+}</pre>
<p>{{ EmbedLiveSample('Example', '', '700', '', 'Web/API/Event/eventPhase') }}</p>