diff options
Diffstat (limited to 'files')
40 files changed, 2033 insertions, 558 deletions
diff --git a/files/fr/_redirects.txt b/files/fr/_redirects.txt index 9809f553ab..cf0b650e44 100644 --- a/files/fr/_redirects.txt +++ b/files/fr/_redirects.txt @@ -922,7 +922,7 @@ /fr/docs/DOM/document.createTextNode /fr/docs/Web/API/Document/createTextNode /fr/docs/DOM/document.documentElement /fr/docs/Web/API/Document/documentElement /fr/docs/DOM/document.documentURIObject /fr/docs/Web/API/Document/documentURIObject -/fr/docs/DOM/document.elementFromPoint /fr/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/fr/docs/DOM/document.elementFromPoint /fr/docs/Web/API/Document/elementFromPoint /fr/docs/DOM/document.execCommand /fr/docs/Web/API/Document/execCommand /fr/docs/DOM/document.firstChild /fr/docs/Web/API/Node/firstChild /fr/docs/DOM/document.getElementById /fr/docs/Web/API/Document/getElementById @@ -1084,7 +1084,7 @@ /fr/docs/DOM:document.createTextNode /fr/docs/Web/API/Document/createTextNode /fr/docs/DOM:document.documentElement /fr/docs/Web/API/Document/documentElement /fr/docs/DOM:document.documentURIObject /fr/docs/Web/API/Document/documentURIObject -/fr/docs/DOM:document.elementFromPoint /fr/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/fr/docs/DOM:document.elementFromPoint /fr/docs/Web/API/Document/elementFromPoint /fr/docs/DOM:document.firstChild /fr/docs/Web/API/Node/firstChild /fr/docs/DOM:document.getElementById /fr/docs/Web/API/Document/getElementById /fr/docs/DOM:document.getElementsByClassName /fr/docs/Web/API/Document/getElementsByClassName @@ -3729,7 +3729,7 @@ /fr/docs/Web/API/Document.createTextNode /fr/docs/Web/API/Document/createTextNode /fr/docs/Web/API/Document.documentElement /fr/docs/Web/API/Document/documentElement /fr/docs/Web/API/Document.documentURIObject /fr/docs/Web/API/Document/documentURIObject -/fr/docs/Web/API/Document.elementFromPoint /fr/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/fr/docs/Web/API/Document.elementFromPoint /fr/docs/Web/API/Document/elementFromPoint /fr/docs/Web/API/Document.evaluate /fr/docs/Web/API/Document/evaluate /fr/docs/Web/API/Document.execCommand /fr/docs/Web/API/Document/execCommand /fr/docs/Web/API/Document.firstChild /fr/docs/Web/API/Node/firstChild @@ -3748,8 +3748,10 @@ /fr/docs/Web/API/Document/defaultView/popstate_event /fr/docs/Web/API/Window/popstate_event /fr/docs/Web/API/Document/defaultView/storage_event /fr/docs/Web/API/Window/storage_event /fr/docs/Web/API/Document/domConfig /fr/docs/Web/API/Document -/fr/docs/Web/API/Document/elementFromPoint /fr/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/fr/docs/Web/API/DocumentOrShadowRoot /fr/docs/orphaned/Web/API/DocumentOrShadowRoot /fr/docs/Web/API/DocumentOrShadowRoot/activeElement /fr/docs/Web/API/Document/activeElement +/fr/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /fr/docs/Web/API/Document/elementFromPoint +/fr/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint /fr/docs/Web/API/Document/elementsFromPoint /fr/docs/Web/API/DocumentOrShadowRoot/getSelection /fr/docs/Web/API/Document/getSelection /fr/docs/Web/API/DocumentOrShadowRoot/styleSheets /fr/docs/Web/API/Document/styleSheets /fr/docs/Web/API/Document_Object_Model/Exemples /fr/docs/Web/API/Document_Object_Model/Examples diff --git a/files/fr/_wikihistory.json b/files/fr/_wikihistory.json index 1dc036a2a5..30437756d3 100644 --- a/files/fr/_wikihistory.json +++ b/files/fr/_wikihistory.json @@ -7697,19 +7697,6 @@ "loella16" ] }, - "Web/API/DocumentOrShadowRoot": { - "modified": "2020-10-15T22:25:01.411Z", - "contributors": [ - "tristantheb" - ] - }, - "Web/API/DocumentOrShadowRoot/elementsFromPoint": { - "modified": "2020-10-15T22:25:00.754Z", - "contributors": [ - "SphinxKnight", - "RolandGautier" - ] - }, "Web/API/DocumentTouch": { "modified": "2019-03-23T22:50:40.193Z", "contributors": [ @@ -44970,16 +44957,6 @@ "BenoitL" ] }, - "Web/API/DocumentOrShadowRoot/elementFromPoint": { - "modified": "2019-03-23T23:50:28.633Z", - "contributors": [ - "fscholz", - "teoli", - "jsx", - "Mgjbot", - "BenoitL" - ] - }, "Web/API/HTMLElement/accessKey": { "modified": "2019-03-23T22:24:43.588Z", "contributors": [ @@ -46002,5 +45979,28 @@ "fscholz", "FredPl" ] + }, + "Web/API/Document/elementFromPoint": { + "modified": "2019-03-23T23:50:28.633Z", + "contributors": [ + "fscholz", + "teoli", + "jsx", + "Mgjbot", + "BenoitL" + ] + }, + "Web/API/Document/elementsFromPoint": { + "modified": "2020-10-15T22:25:00.754Z", + "contributors": [ + "SphinxKnight", + "RolandGautier" + ] + }, + "orphaned/Web/API/DocumentOrShadowRoot": { + "modified": "2020-10-15T22:25:01.411Z", + "contributors": [ + "tristantheb" + ] } }
\ No newline at end of file diff --git a/files/fr/web/api/documentorshadowroot/index.html b/files/fr/orphaned/web/api/documentorshadowroot/index.html index d8dd814377..c359b4739d 100644 --- a/files/fr/web/api/documentorshadowroot/index.html +++ b/files/fr/orphaned/web/api/documentorshadowroot/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot -slug: Web/API/DocumentOrShadowRoot +slug: orphaned/Web/API/DocumentOrShadowRoot tags: - API - Document @@ -10,6 +10,7 @@ tags: - ShadowRoot - shadow dom translation_of: Web/API/DocumentOrShadowRoot +original_slug: Web/API/DocumentOrShadowRoot --- <div>{{APIRef("Web Components")}}</div> diff --git a/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html b/files/fr/web/api/document/elementfrompoint/index.html index 142ab83b27..8da838500d 100644 --- a/files/fr/web/api/documentorshadowroot/elementfrompoint/index.html +++ b/files/fr/web/api/document/elementfrompoint/index.html @@ -1,11 +1,11 @@ --- title: document.elementFromPoint -slug: Web/API/DocumentOrShadowRoot/elementFromPoint +slug: Web/API/Document/elementFromPoint tags: - Référence_du_DOM_Gecko translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint -original_slug: Web/API/Document/elementFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <p>{{ ApiRef() }}</p> <h3 id="R.C3.A9sum.C3.A9" name="R.C3.A9sum.C3.A9">Résumé</h3> diff --git a/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/fr/web/api/document/elementsfrompoint/index.html index c3f8c30d22..c0fb412fc8 100644 --- a/files/fr/web/api/documentorshadowroot/elementsfrompoint/index.html +++ b/files/fr/web/api/document/elementsfrompoint/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.elementsFromPoint() -slug: Web/API/DocumentOrShadowRoot/elementsFromPoint +slug: Web/API/Document/elementsFromPoint tags: - API - Document @@ -12,6 +12,7 @@ tags: - elementsFromPoint() - shadow dom translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/fr/web/api/eventtarget/addeventlistener/index.html b/files/fr/web/api/eventtarget/addeventlistener/index.html index 6d8e092656..c8e6650d62 100644 --- a/files/fr/web/api/eventtarget/addeventlistener/index.html +++ b/files/fr/web/api/eventtarget/addeventlistener/index.html @@ -15,135 +15,160 @@ tags: - attachEvent - Écouteurs - Écouteurs d'Évènements + - AccessOuterData + - Detecting Events + - Event Handlers + - Event Listener + - EventTarget + - Method + - PassingData + - Receiving Events + - addEventListener + - events + - mselementresize translation_of: Web/API/EventTarget/addEventListener --- <p>{{APIRef("DOM Events")}}</p> -<p>La méthode <code><strong>addEventListener()</strong></code> d'{{domxref("EventTarget")}} installe une fonction à appeler chaque fois que l'événement spécifié est envoyé à la cible. Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais elle peut être tout objet prenant en charge les évènements (comme <code><a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a></code>).</p> +<p><span class="seoSummary">La méthode <code><strong>addEventListener()</strong></code> de {{domxref("EventTarget")}} attache une fonction à appeler chaque fois que l'évènement spécifié est envoyé à la cible.</span> Les cibles courantes sont un {{domxref("Element")}}, le {{domxref("Document")}} lui-même et une {{domxref("Window")}}, mais on peut tout à fait cible n'importe quel objet prenant en charge les évènements (comme {{domxref("XMLHttpRequest")}}).</p> -<p><code>addEventListener()</code> fonctionne en ajoutant une fonction, ou un objet implémentant {{domxref("EventListener")}}, à la liste des écouteurs d'évènements du type d'évènement spécifié dans la {{domxref("EventTarget")}} dans laquelle il est appelé.</p> +<p><code>addEventListener()</code> agit en ajoutant une fonction ou un objet qui implémente {{domxref("EventListener")}} à la liste des gestionnaires d'évènement pour le type d'évènement spécifié sur la cible ({{domxref("EventTarget")}}) à partir de laquelle il est appelé.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox notranslate"><em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, </em><em>options</em>]); -<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>]); -<em>target</em>.addEventListener(<em>type</em>, <em>écouteur [, utiliserCapture</em>, <em>veutNonFiables </em>{{Non-standard_inline}}]); // Gecko/Mozilla seulement</pre> +<pre + class="brush: js"><var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>options</var>]); +<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>]); +<var>target</var>.addEventListener(<var>type</var>, <var>listener</var> [, <var>useCapture</var>, <var>wantsUntrusted</var> {{Non-standard_inline}}]); // Gecko/Mozilla uniquement</pre> -<h3 id="Paramètres">Paramètres</h3> + +<h3 id="Parameters">Paramètres</h3> <dl> - <dt><em><code>type</code></em> </dt> - <dd>Une chaîne sensible à la casse représentant le <a href="https://developer.mozilla.org/fr/docs/Web/Events">type d'évènement</a> à écouter.</dd> - <dt><code><var>écouteur</var></code></dt> - <dd>L'objet qui recevra une notification (un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cela doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Fonctions" title="fr/Référence_de_JavaScript_1.5_Core/Fonctions">fonction</a> JavaScript. Voir {{anch("The event listener callback")}} pour des détails sur le rappel lui-même.</dd> - <dt><code><var>options</var></code> {{optional_inline}}</dt> - <dd>Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : - <dl> - <dt><code>capture</code></dt> - <dd>Un {{jsxref("Boolean")}} indiquant que les évènements de ce type seront distribués à l'<code><var>écouteur</var></code> enregistré avant d'être distribués à tout <code>EventTarget</code> située en-dessous dans l'arborescence DOM.</dd> - <dt><code>once</code></dt> - <dd>Un {{jsxref("Boolean")}} indiquant que l'<em><code>écouteur</code></em> doit être invoqué au plus une fois après avoir été ajouté. Si <code>true</code> (<em>vrai</em>), l'<em><code>écouteur</code></em> sera automatiquement supprimé après son appel.</dd> - <dt><code>passive</code></dt> - <dd>Un {{jsxref("Boolean")}} qui, si <code>true</code>, indique que la fonction spécifiée par l'<em><code>écouteur</code></em> n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle <code>preventDefault()</code>, l'agent utilisateur ne fera rien d'autre que de générer un avertissement sur la console. Voir {{anch("Amélioration des performances de défilement avec les écouteurs passifs")}} pour en apprendre davantage.</dd> - <dt>{{non-standard_inline}} <code>mozSystemGroup</code></dt> - <dd>Un {{jsxref("Boolean")}} indiquant que l'écouteur doit être ajouté au groupe système. Disponible seulement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.</dd> - </dl> - </dd> - <dt><code><var>utiliserCapture</var></code> {{optional_inline}}</dt> - <dd>Un {{jsxref("Boolean")}} indiquant si les événements de ce type seront distribués à l'<em><code>écouteur</code></em> enregistré <em>avant</em> d'être distribués à toute <code>EventTarget</code> (cible d'évènement) située en-dessous dans l'arborescence DOM. Les événements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'événements sont deux manières de propager des événements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet événement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'événement. Voir les <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> et <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> pour une explication détaillée. Si non spécifié, <em><code>useCapture</code></em> a <code>false</code> pour valeur par défaut.</dd> + <dt><code>type</code></dt> + <dd>Une chaîne sensible à la casse représentant le <a href="/fr/docs/Web/Events">type d'évènement</a> à écouter.</dd> + <dt><code>listener</code></dt> + <dd>L'objet qui recevra un évènement (c'est-à-dire un objet qui implémente l'interface {{domxref("Event")}}) lorsqu'un évènement du type spécifié se produit. Cet argument doit être un objet implémentant l'interface {{domxref("EventListener")}} ou une <a href="/fr/docs/Web/JavaScript/Guide/Functions">fonction</a> JavaScript. Voir {{anch("The_event_listener_callback", "Fonction de rappel (<i>callback</i> pour le gestionnaire d'évènement)")}} pour plus de détails sur le fonctionnement d'une fonction de rappel.</dd> + <dt><code>options</code> {{optional_inline}}</dt> + <dd>Un objet options spécifie les caractéristiques de l'écouteur d'évènements. Les options disponibles sont : + <dl> + <dt><code>capture</code></dt> + <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que les évènements de ce type seront distribués à l'<code><var>listener</var></code> enregistré avant d'être distribués à tout <code>EventTarget</code> située en dessous dans l'arborescence DOM.</dd> + <dt><code>once</code></dt> + <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que <code>listener</code> doit être invoqué au plus une fois après avoir été ajouté. Si <code>true</code> (vrai), <code>listener</code> sera automatiquement supprimé après son appel.</dd> + <dt><code>passive</code></dt> + <dd>Un booléen ({{jsxref("Boolean")}}) qui, si <code>true</code>, indique que la fonction spécifiée par <code>listener</code> n'appellera jamais {{domxref("Event.preventDefault", "preventDefault()")}}. Si un écouteur passif appelle <code>preventDefault()</code>, l'agent utilisateur ne fera rien d'autre que de générer un avertissement dans la console. Voir {{anch("Improving_scrolling_performance_with_passive_listeners","Améliorer les performances du défilement avec des gestionnaires passifs")}} pour en apprendre davantage.</dd> + <dt><code>mozSystemGroup</code> {{non-standard_inline}}</dt> + <dd>Un booléen ({{jsxref("Boolean")}}) indiquant que l'écouteur doit être ajouté au groupe système. Disponible uniquement pour le code s'exécutant dans XBL ou dans le {{glossary("chrome")}} du navigateur Firefox.</dd> + </dl> + </dd> + <dt><code>useCapture</code> {{optional_inline}}</dt> + <dd>Un booléen ({{jsxref("Boolean")}}) indiquant si les évènements de ce type seront distribués au <code>listener</code> enregistré avant d'être distribués à toute <code>EventTarget</code> (« cible d'évènement ») située en dessous dans l'arborescence DOM. Les évènements qui se propagent vers le haut dans l'arborescence ne déclencheront pas un écouteur indiqué comme utilisant la capture. La propagation et la capture d'évènements sont deux manières de propager des évènements qui se produisent dans un élément imbriqué dans un autre, lorsque les deux éléments ont enregistré un gestionnaire pour cet évènement. Le mode de propagation de l'évènement détermine l'ordre dans lequel les éléments reçoivent l'évènement. Voir les <a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events</a> et <a href="http://www.quirksmode.org/js/events_order.html#link4">JavaScript Event order</a> pour une explication détaillée. S'il n'est pas spécifié, <code>useCapture</code> aura <code>false</code> comme valeur par défaut.</dd> </dl> -<div class="note"> -<p><strong>Note : </strong>pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre <em><code>useCapture</code></em>.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Pour les écouteurs attachés à la cible d'évènement, l'évènement se trouve dans la phase cible, plutôt que dans les phases de propagation et de capture. Les évènements dans la phase cible déclencheront tous les écouteurs d'un élément dans l'ordre où ils ont été enregistrés, indépendamment du paramètre <code>useCapture</code>.</p> </div> -<div class="note"> -<p><strong>Note :</strong> <em><code>useCapture</code></em> n'est pas toujours facultatif. Idéalement, vous devriez l'inclure pour une compatibilité de navigateurs la plus large possible.</p> +<div class="notecard note"> + <p><strong>Note :</strong> <code>useCapture</code> n'a pas toujours été facultatif. Idéalement, vous devriez l'inclure pour une compatibilité navigateur la plus large possible.</p> </div> <dl> - <dt><em><code>veutNonFiables</code></em> {{Non-standard_inline}}</dt> - <dd>Un paramètre spécifique à Firefox (Gecko). Si <code>true</code>, l'écouteur reçoit les événements synthétiques distribués par le contenu web (le défaut est <code>false</code> pour le {{glossary("chrome")}} du navigateur et <code>true</code> pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.</dd> + <dt><code>wantsUntrusted</code> {{Non-standard_inline}}</dt> + <dd>Un paramètre spécifique à Firefox (Gecko). Si <code>true</code>, l'écouteur reçoit les évènements synthétiques distribués par le contenu web (le défaut est <code>false</code> pour le {{glossary("chrome")}} du navigateur et <code>true</code> pour les pages web ordinaires). Ce paramètre est utile pour le code qui se trouve dans les compléments, ainsi que pour le navigateur lui-même.</dd> </dl> -<h3 id="Valeur_retournée">Valeur retournée</h3> +<h3 id="Return_value">Valeur de retour</h3> <p><code>undefined</code></p> -<h2 id="Notes_dutilisation">Notes d'utilisation</h2> +<h2 id="Usage_notes">Notes d'utilisation</h2> -<h3 id="Le_rappel_de_lécouteur_dévènement">Le rappel de l'écouteur d'évènement</h3> +<h3 id="The_event_listener_callback">Utilisation d'une fonction de rappel (<i>callback</i>)</h3> -<p>L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel, soit comme un objet qui implémente {{domxref ("EventListener")}}, dont la méthode {{domxref ("EventListener.handleEvent", "handleEvent ()")}} sert de fonction de rappel.</p> +<p>L'écouteur d'évènement peut être spécifié, soit comme une fonction de rappel (<i>callback</i>), soit comme un objet qui implémente {{domxref("EventListener")}} dont la méthode {{domxref("EventListener.handleEvent", "handleEvent()")}} sert de fonction de rappel.</p> -<p>La fonction de rappel a elle-même les mêmes paramètres et la même valeur de retour que la méthode <code>handleEvent()</code> ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref ("Event")}} décrivant l'événement qui s'est produit, et il ne retourne rien.</p> +<p>La fonction de rappel reçoit les mêmes paramètres et fournit la même valeur de retour que la méthode <code>handleEvent()</code> ; c'est-à-dire que le rappel accepte un seul paramètre : un objet basé sur {{domxref("Event")}} décrivant l'évènement qui s'est produit, et il ne retourne rien.</p> -<p>Par exemple, un rappel de gestionnaire d'événements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :</p> +<p>Par exemple, un rappel de gestionnaire d'évènements pouvant être utilisé pour gérer à la fois {{domxref("Element/fullscreenchange_event", "fullscreenchange")}} et {{domxref("Element/fullscreenerror_event", "fullscreenerror")}} peut ressembler à ceci :</p> -<pre class="brush: js line-numbers language-js notranslate">function gestionnaireDEvenement(evenement) { - if (evenement.type == fullscreenchange) { +<pre class="brush: js"> +function eventHandler(event) { + if (event.type == 'fullscreenchange') { /* gérer un passage en plein écran */ } else /* fullscreenerror */ { /* gérer une erreur de passage en plein écran */ } -}</pre> +} +</pre> -<h3 id="Détection_de_la_prise_en_charge_des_options_en_toute_sécurité">Détection de la prise en charge des options en toute sécurité</h3> +<h3 id="Safely_detecting_option_support">Détection la prise en charge d'<code>options</code></h3> -<p>Dans les anciennes versions de la spécification DOM, le troisième paramètre de <code>addEventListener()</code> était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'événement.</p> +<p>Dans les anciennes versions de la spécification DOM, le troisième paramètre de <code>addEventListener()</code> était une valeur booléenne indiquant s'il fallait ou non utiliser la capture. Au fil du temps, il est devenu clair que davantage d'options étaient nécessaires. Plutôt que d'ajouter davantage de paramètres à la fonction (ce qui complique énormément les choses lors du traitement des valeurs optionnelles), le troisième paramètre a été changé en un objet pouvant contenir diverses propriétés définissant les valeurs des options pour configurer le processus de suppression de l'écouteur d'évènement.</p> -<p>Du fait que les navigateurs anciens (ainsi que certains navigateurs "pas si vieux") supposent toujours que le troisième paramètre est un Boolean, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.</p> +<p>Du fait que les navigateurs anciens supposent toujours que le troisième paramètre est un booléen, vous devez construire votre code de façon à gérer ce scénario intelligemment. Vous pouvez le faire en utilisant la détection de fonctionnalité pour chacune des options qui vous intéresse.</p> <p>Par exemple, si vous voulez vérifier l'option <code>passive</code> :</p> -<pre class="brush: js line-numbers language-js notranslate">var passiveSupportee = false; +<pre class="brush: js"> +let passiveSupported = false; try { - var options = Object.defineProperty({}, "passive", { + let options = Object.defineProperty({}, "passive", { get: function() { - passiveSupportee = true; + passiveSupported = true; } }); - window.addEventListener("test", options, options); - window.removeEventListener("test", options, options); + window.addEventListener("test", null, options); + window.removeEventListener("test", null, options); } catch(err) { - passiveSupportee = false; -}</pre> + passiveSupported = false; +} +</pre> -<p>Cela crée un objet <em><code>options</code></em> avec une fonction accesseur pour la propriété <code>passive</code> ; l'accesseur initialise un indicateur, <code>passiveSupportee</code>, à <code>true</code> si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété <code>passive</code> dans l'objet <em><code>options</code></em>, <code>passiveSupportee</code> sera initialisé à <code>true</code> ; sinon, il restera <code>false</code>. Nous appelons alors <code>addEventListener()</code> pour installer un faux gestionnaire d'événements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons <code>removeEventListener()</code> pour faire le ménage après notre passage. (Notez que <code>handleEvent()</code> est ignoré dans les écouteurs d'événements qui ne sont pas appelés).</p> +<p>Cela crée un objet <code>options</code> avec une fonction accesseur pour la propriété <code>passive</code> ; l'accesseur initialise un indicateur, <code>passiveSupported</code>, à <code>true</code> si elle est appelée. Cela signifie que si le navigateur vérifie la valeur de la propriété <code>passive</code> dans l'objet <code>options</code>, <code>passiveSupported</code> sera initialisé à <code>true</code> ; sinon, il restera <code>false</code>. Nous appelons alors <code>addEventListener()</code> pour installer un faux gestionnaire d'évènements, en spécifiant ces options, se sorte qu'elles soient vérifiées si le navigateur reconnaît un objet comme troisième paramètre. Ensuite, nous appelons <code>removeEventListener()</code> pour faire le ménage après notre passage. (Notez que <code>handleEvent()</code> est ignoré dans les écouteurs d'évènements qui ne sont pas appelés).</p> <p>Vous pouvez vérifier de cette façon si une option quelconque est supportée. Ajoutez simplement un accesseur pour cette option en utilisant un code similaire à celui montré ci-dessus.</p> -<p>Ensuite, lorsque vous voulez créer un écouteur d'événements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :</p> +<p>Ensuite, lorsque vous voulez créer un écouteur d'évènements réel qui utilise les options en question, vous pouvez faire quelque chose comme ce qui suit :</p> -<pre class="brush: js line-numbers language-js notranslate">unElement.addEventListener("mouseup", gererMouseUp, passiveSupportee - ? { passive: true } : false);</pre> +<pre class="brush: js"> +someElement.addEventListener( + "mouseup", + handleMouseUp, + passiveSupported ? { passive: true } : false +); +</pre> -<p>Ici, nous ajoutons un écouteur pour l'événement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément <em><code>unElement</code></em>. Pour le troisième paramètre, si <em><code>passiveSupportee</code></em> est <code>true</code>, nous spécifions un objet <em><code>options</code></em> avec <code>passive</code> initialisée à <code>true</code> ; sinon, nous savons que nous devons passer un Boolean, et nous passons <code>false</code> comme valeur du paramètre <em><code>useCapture</code></em>.</p> +<p>Ici, nous ajoutons un écouteur pour l'évènement {{domxref("Element/mouseup_event", "mouseup")}} dans l'élément <code>someElement</code>. Pour le troisième paramètre, si <code>passiveSupported</code> est <code>true</code>, nous spécifions un objet <code>options</code> avec <code>passive</code> initialisée à <code>true</code> ; sinon, nous savons que nous devons passer un Boolean, et nous passons <code>false</code> comme valeur du paramètre <code>useCapture</code>.</p> -<p>Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme <a href="https://modernizr.com/docs">Modernizr</a> ou <a href="https://github.com/rafrex/detect-it">Detect It</a> pour faire ce test pour vous.</p> +<p>Si vous préférez, vous pouvez utiliser une bibliothèque tierce comme <a href="https://github.com/modernizr/modernizr">Modernizr</a> ou <a href="https://github.com/rafrex/detect-it">Detect It</a> pour faire ce test pour vous.</p> -<p>Vous pouvez en apprendre davantage dans l'article à propos des <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> du <a href="https://wicg.github.io/admin/charter.html">Groupe Web Incubator Community</a>.</p> +<p>Vous pouvez en apprendre davantage dans l'article à propos des <code><a href="https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md#feature-detection">EventListenerOptions</a></code> du <a href="https://wicg.github.io/admin/charter.html">Groupe Web Incubator Community</a>.</p> -<h2 id="Exemples">Exemples</h2> +<h2 id="Examples">Exemples</h2> -<h3 id="Ajouter_un_écouteur_simple">Ajouter un écouteur simple</h3> +<h3 id="Add_a_simple_listener">Ajouter un écouteur simple</h3> <p>Cet exemple montre comment utiliser <code>addEventListener()</code> pour surveiller les clics de souris sur un élément.</p> <h4 id="HTML">HTML</h4> -<pre class="brush: html line-numbers language-html notranslate"><table id="aLExterieur"> - <tr><td id="t1">un</td></tr> - <tr><td id="t2">deux</td></tr> -</table></pre> +<pre class="brush: html"> +<table id="outside"> + <tr><td id="t1">un</td></tr> + <tr><td id="t2">deux</td></tr> +</table> +</pre> <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js line-numbers language-js notranslate">// Fonction pour changer le contenu de t2 -function modifierTexte() { - var t2 = document.getElementById("t2"); +<pre class="brush: js"> +// Fonction pour changer le contenu de t2 +function modifyText() { + const t2 = document.querySelector("#t2"); if (t2.firstChild.nodeValue == "trois") { t2.firstChild.nodeValue = "deux"; } else { @@ -152,87 +177,98 @@ function modifierTexte() { } // Ajouter un écouteur d'évènements à la table -var el = document.getElementById("aLExterieur"); -el.addEventListener("click", modifierTexte, false);</pre> +const el = document.querySelector("#outside"); +el.addEventListener("click", modifyText, false); +</pre> -<p>Dans ce code, <code>modifierTexte()</code> est un écouteur pour les évènements <code>click</code> enregistré en utilisant <code>addEventListener()</code>. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera <code>modifierTexte()</code>.</p> +<p>Dans ce code, <code>modifyText()</code> est un écouteur pour les évènements <code>click</code> enregistré en utilisant <code>addEventListener()</code>. Un clic n'importe où sur la table se propagera jusqu'au gestionnaire et exécutera <code>modifyText()</code>.</p> -<h4 id="Résultat">Résultat</h4> +<h4 id="Result">Résultat</h4> <p>{{EmbedLiveSample('Add_a_simple_listener')}}</p> -<h3 id="Écouteur_dévènement_avec_une_fonction_anonyme">Écouteur d'évènement avec une fonction anonyme</h3> +<h3 id="Event_listener_with_anonymous_function">Écouteur d'évènement avec une fonction anonyme</h3> -<p>Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'événements.</p> +<p>Ici, nous allons voir comment utiliser une fonction anonyme pour passer des paramètres à l'écouteur d'évènements.</p> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html line-numbers language-html notranslate"><table id="aLExterieur"> - <tr><td id="t1">un</td></tr> - <tr><td id="t2">deux</td></tr> -</table></pre> +<pre class="brush: html"> +<table id="outside"> + <tr><td id="t1">un</td></tr> + <tr><td id="t2">deux</td></tr> +</table> +</pre> <h4 id="JavaScript_2">JavaScript</h4> -<pre class="brush: js line-numbers language-js notranslate">// Fonction pour changer le contenu de t2 -function modifierTexte(nouveau_texte) { - var t2 = document.getElementById("t2"); - t2.firstChild.nodeValue = nouveau_texte; +<pre class="brush: js"> +// Fonction pour changer le contenu de t2 +function modifyText(newText) { + const t2 = document.querySelector("#t2"); + t2.firstChild.nodeValue = newText; } // Fonction pour ajouter un écouteur d'évènement à la table -var el = document.getElementById("aLExterieur"); -el.addEventListener("click", function(){modifierTexte("quatre")}, false);</pre> +const el = document.querySelector("#outside"); +el.addEventListener("click", function(){modifyText("quatre")}, false); +</pre> -<p>Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction <code>modifierTexte()</code>, qui est responsable de la réponse effective à l'événement.</p> +<p>Notez que l'écouteur est une fonction anonyme encapsulant le code qui peut à son tour envoyer des paramètres à la fonction <code>modifyText()</code>, qui est responsable de la réponse effective à l'évènement.</p> -<h4 id="Résultat_2">Résultat</h4> +<h4 id="Result_2">Résultat</h4> <p>{{EmbedLiveSample('Event_listener_with_anonymous_function')}}</p> -<h3 id="Écouteur_dévènement_avec_une_fonction_fléchée">Écouteur d'évènement avec une fonction fléchée</h3> +<h3 id="Event_listener_with_an_arrow_function">Écouteur d'évènement avec une fonction fléchée</h3> -<p>Cet exemple montre un écouteur d'événement simple implémenté en utilisant la notation de fonction fléchée.</p> +<p>Cet exemple montre un écouteur d'évènement simple implémenté en utilisant la notation de fonction fléchée.</p> <h4 id="HTML_3">HTML</h4> -<pre class="brush: html line-numbers language-html notranslate"><table id="aLExterieur"> - <tr><td id="t1">un</td></tr> - <tr><td id="t2">deux</td></tr> -</table></pre> +<pre class="brush: html"> +<table id="outside"> + <tr><td id="t1">un</td></tr> + <tr><td id="t2">deux</td></tr> +</table> +</pre> <h4 id="JavaScript_3">JavaScript</h4> -<pre class="brush: js line-numbers language-js notranslate">// Fonction pour changer le contenu de t2 -function modifierTexte(nouveau_texte) { - var t2 = document.getElementById("t2"); - t2.firstChild.nodeValue = nouveau_texte; +<pre class="brush: js"> +// Fonction pour changer le contenu de t2 +function modifyText(newText) { + const t2 = document.querySelector("#t2"); + t2.firstChild.nodeValue = newText; } // Ajouter un écouteur d'évènements à la table avec une fonction fléchée -var el = document.getElementById("aLExterieur"); -el.addEventListener("click", () => { modifierTexte("quatre"); }, false);</pre> +const el = document.querySelector("#outside"); +el.addEventListener("click", () => { + modifyText("quatre"); +}, false);</pre> -<h4 id="Résultat_3">Résultat</h4> +<h4 id="Result_3">Résultat</h4> <p>{{EmbedLiveSample('Event_listener_with_an_arrow_function')}}</p> -<p>Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons <code>this</code> différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons <code>this</code>, les fonctions fléchées héritent la liaison<code> this</code> de la fonction contenante.</p> +<p>Notez que si les fonctions anonymes et fléchées sont similaires, elles ont des liaisons <code>this</code> différentes. Alors que les fonctions anonymes (et toutes les fonctions JavaScript traditionnelles) créent leurs propres liaisons <code>this</code>, les fonctions fléchées héritent la liaison <code>this</code> de la fonction contenante. <a href="fr/docs/Web/JavaScript/Reference/Operators/this#avec_les_fonctions_fléchées">Voir la page sur l'opérateur <code>this</code> pour plus d'informations.</a></p> <p>Cela signifie que les variables et constantes disponibles pour la fonction contenante sont aussi disponibles pour le gestionnaire d'évènements lors de l'utilisation d'une fonction fléchée.</p> -<h3 id="Exemple_dutilisation_des_options">Exemple d'utilisation des options</h3> +<h3 id="Example_of_options_usage">Exemple d'utilisation des options</h3> <h4 id="HTML_4">HTML</h4> -<pre class="brush: html notranslate"><div class="exterieur"> +<pre class="brush: html"> +<div class="outer"> extérieur, once & none-once - <div class="milieu" target="_blank"> + <div class="middle" target="_blank"> milieu, capture & none-capture - <a class="interieur1" href="https://www.mozilla.org" target="_blank"> + <a class="inner1" href="https://www.mozilla.org" target="_blank"> intérieur1, passive & preventDefault (ce qui n'est pas autorisé) </a> - <a class="interieur2" href="https://developer.mozilla.org/" target="_blank"> + <a class="inner2" href="https://developer.mozilla.org/" target="_blank"> intérieur2, none-passive & preventDefault (nouvelle page non ouverte) </a> </div> @@ -241,185 +277,242 @@ el.addEventListener("click", () => { modifierTexte("quatre"); }, false);</pre <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exterieur, .milieu, .interieur1, .interieur2 { +<pre class="brush: css"> +.outer, +.middle, +.inner1, +.inner2 { display: block; - width: 520px; + width: 520px; padding: 15px; - margin: 15px; + margin: 15px; text-decoration: none; } -.exterieur { +.outer { border: 1px solid red; - color: red; + color: red; } -.milieu { +.middle { border: 1px solid green; - color: green; - width: 460px; + color: green; + width: 460px; } -.interieur1, .interieur2 { +.inner1, +.inner2 { border: 1px solid purple; - color: purple; - width: 400px; + color: purple; + width: 400px; } </pre> <h4 id="JavaScript_4">JavaScript</h4> -<pre class="brush: js notranslate">const exterieur = document.querySelector('.exterieur'); -const milieu = document.querySelector('.milieu'); -const interieur1 = document.querySelector('.interieur1'); -const interieur2 = document.querySelector('.interieur2'); +<pre class="brush: js"> +const outer = document.querySelector('.outer'); +const middle = document.querySelector('.middle'); +const inner1 = document.querySelector('.inner1'); +const inner2 = document.querySelector('.inner2'); const capture = { - capture : true + capture: true }; const noneCapture = { - capture : false + capture: false }; const once = { - once : true + once: true }; const noneOnce = { - once : false + once: false }; const passive = { - passive : true + passive: true }; const nonePassive = { - passive : false + passive: false }; -exterieur .addEventListener('click', onceHandler, once); -exterieur .addEventListener('click', noneOnceHandler, noneOnce); -milieu .addEventListener('click', captureHandler, capture); -milieu .addEventListener('click', noneCaptureHandler, noneCapture); -interieur1.addEventListener('click', passiveHandler, passive); -interieur2.addEventListener('click', nonePassiveHandler, nonePassive); +outer.addEventListener('click', onceHandler, once); +outer.addEventListener('click', noneOnceHandler, noneOnce); +middle.addEventListener('click', captureHandler, capture); +middle.addEventListener('click', noneCaptureHandler, noneCapture); +inner1.addEventListener('click', passiveHandler, passive); +inner2.addEventListener('click', nonePassiveHandler, nonePassive); -function onceHandler(evenement) { - alert('exterieur, once'); +function onceHandler(event) { + console.log('extérieur, once'); } -function noneOnceHandler(evenement) { - alert('exterieur, none-once, default'); +function noneOnceHandler(event) { + console.log('extérieur, none-once, default'); } -function captureHandler(evenement) { - //evenement.stopImmediatePropagation(); - alert('milieu, capture'); +function captureHandler(event) { + // event.stopImmediatePropagation(); + console.log('milieur, capture'); } -function noneCaptureHandler(evenement) { - alert('milieu, none-capture, default'); +function noneCaptureHandler(event) { + console.log('milieur, none-capture, default'); } -function passiveHandler(evenement) { +function passiveHandler(event) { // Impossible d'utiliser preventDefault à l'intérieur de l'invocation d'un écouteur d'évènements passif. - evenement.preventDefault(); - alert('interieur1, passive, nouvelle page ouverte'); + event.preventDefault(); + console.log('intérieur1, passive, nouvelle page ouverte'); } -function nonePassiveHandler(evenement) { - evenement.preventDefault(); - //evenement.stopPropagation(); - alert('interieur2, none-passive, défaut, nouvelle page non ouverte'); +function nonePassiveHandler(event) { + event.preventDefault(); + // event.stopPropagation(); + console.log('intérieur2, none-passive, default, nouvelle page non ouverte'); } </pre> -<h4 id="Résultat_4">Résultat</h4> +<h4 id="Result_4">Résultat</h4> + +<p>Cliquez les conteneurs <var>extérieur</var>, <var>milieu</var>, <var>intérieurs</var> respectivement pour voir comment les options fonctionnent. Vous pouvez ouvrir la console pour observer les différents messages émis.</p> + +<p>{{EmbedLiveSample('Example_of_options_usage', '', '320')}}</p> + +<p>Avant d'utiliser une valeur particulière dans l'objet <code>options</code>, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely_detecting_option_support", "Détection sûre du support des options")}} pour les détails.</p> + +<h3 id="Add_a_abortable_listener">Ajout d'un écouteur annulable</h3> + +<p>Cet exemple montre comment ajouter un <code>addEventListener()</code> qui peut être interrompu par un {{domxref("AbortSignal")}}.</p> + +<h4 id="HTML_5">HTML</h4> + +<pre class="brush: html"> +<table id="outside"> + <tr><td id="t1">un</td></tr> + <tr><td id="t2">deux</td></tr> +</table> +</pre> + +<h4 id="JavaScript_5">JavaScript</h4> + +<pre class="brush: js"> +// Ajout d'un écouteur d'évènement annulable à la table +const controller = new AbortController(); +const el = document.querySelector("#outside"); +el.addEventListener("click", modifyText, { signal: controller.signal }); -<p>Cliquer les conteneurs extérieur, milieu, intérieurs respectivement pour voir comment les options fonctionnent.</p> +// Fonction permettant de modifier le contenu de t2 +function modifyText() { + const t2 = document.querySelector("#t2"); + if (t2.firstChild.nodeValue == "trois") { + t2.firstChild.nodeValue = "deux"; + } else { + t2.firstChild.nodeValue = "trois"; + controller.abort(); // supprime l'écouteur lorsque la valeur est "trois". + } +} +</pre> + +<p>Dans l'exemple ci-dessus, nous modifions le code de l'exemple {{anch('Add_a_simple_listener', 'Ajouter un écouteur simple')}} de telle sorte qu'après que le contenu de la deuxième ligne soit devenu « trois », nous appelons <code>abort()</code> à partir du {{domxref("AbortController")}} que nous avons passé à l'appel <code>addEventListener()</code>. Cela a pour résultat que la valeur reste à "trois" pour toujours, parce que nous n'avons plus de code écoutant un évènement de clic.</p> -<p>{{ EmbedLiveSample('Example_of_options_usage', 600, 310, '', 'Web/API/EventTarget/addEventListener') }}</p> +<h4 id="Result_5">Résultat</h4> -<p>Avant d'utiliser une valeur particulière dans l'objet <code><var>options</var></code>, c'est une bonne idée que de s'assurer que le navigateur de l'utilisateur la prend en charge, du fait qu'elles sont un ajout que tous les navigateurs n'ont pas pris en charge historiquement. Voir {{anch("Safely detecting option support")}} pour les détails.</p> +<p>{{EmbedLiveSample('Add_a_abortable_listener')}}</p> -<h2 id="Autres_notes">Autres notes</h2> +<h2 id="Other_notes">Autres notes</h2> -<h3 id="Pourquoi_utiliser_addEventListener">Pourquoi utiliser addEventListener() ?</h3> +<h3 id="Why_use_addEventListener">Pourquoi utiliser addEventListener() ?</h3> <p><code>addEventListener</code> est la manière d'enregistrer un écouteur d'évènements telle que spécifiée dans le DOM du W3C. Ses avantages sont les suivants :</p> <ul> - <li>Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.</li> - <li>Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)</li> - <li>Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.</li> + <li>Elle permet d'ajouter plus d'un seul gestionnaire pour un évènement. Cela peut s'avérer particulièrement utile pour les bibliothèques {{Glossary("AJAX")}}, les modules JavaScript ou tout autre sorte de code qui a besoin de fonctionner correctement avec d'autres bibliothèques/extensions.</li> + <li>Elle donne un contrôle plus fin sur la phase d'activation de l'écouteur (capture contre propagation)</li> + <li>Elle fonctionne avec tout élément DOM, pas seulement avec les éléments HTML.</li> </ul> -<p>L'<a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Older_way_to_register_event_listeners">ancienne manière alternative</a> d'enregistrer des évènements est décrite ci-dessous.</p> +<p>L'<a href="#older_way_to_register_event_listeners">ancienne manière alternative</a> d'enregistrer des évènements est décrite ci-dessous.</p> -<h3 id="Ajout_dun_écouteur_pendant_la_distribution_dun_évènement">Ajout d'un écouteur pendant la distribution d'un évènement</h3> +<h3 id="Adding_a_listener_during_event_dispatch">Ajout d'un écouteur pendant la distribution d'un évènement</h3> <p>Si un {{domxref("EventListener")}} est ajouté à une {{domxref("EventTarget")}} pendant qu'elle traite un évènement, cet évènement ne déclenchera l'écouteur. Cependant, le même écouteur pourra être déclenché à une étape ultérieure du flux d'évènements, telle que la phase de propagation.</p> -<h3 id="Écouteurs_dévènements_identiques_multiples">Écouteurs d'évènements identiques multiples</h3> +<h3 id="Multiple_identical_event_listeners">Écouteurs d'évènements identiques multiples</h3> -<p>Si des <code>EventListener</code>s identiques multiples sont enregistrés sur la même <code>EventTarget</code> avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'<code>EventListener</code>, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.</p> +<p>Si des <code>EventListener</code> identiques multiples sont enregistrés sur la même <code>EventTarget</code> avec les mêmes paramètres, les instances dupliquées sont supprimées. Elles ne provoqueront pas un appel en double de l'<code>EventListener</code>, et elles n'ont pas besoin d'être enlevées avec la méthode {{domxref("EventTarget.removeEventListener()", "removeEventListener()")}}.</p> <p>Notez toutefois que lors de l'utilisation d'une fonction anonyme comme gestionnaire, de tels écouteurs ne seront PAS identiques, du fait que les fonctions anonymes ne sont pas identiques, même si définies en utilisant le MÊME code source inchangé, simplement appelé répétitivement, même dans une boucle.</p> -<p>Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Memory_issues">Problèmes de mémoire</a> ci-dessous.)</p> +<p>Cependant, le fait de définir répétitivement la même fonction nommée dans de tels cas peut être davantage problématique. (Voir <a href="#memory_issues">Problèmes de mémoire</a> ci-dessous.)</p> -<h3 id="La_valeur_de_this_à_lintérieur_du_gestionnaire">La valeur de "this" à l'intérieur du gestionnaire</h3> +<h3 id="The_value_of_this_within_the_handler">La valeur de "this" à l'intérieur du gestionnaire</h3> <p>Il est souvent souhaitable de référencer l'élément sur lequel le gestionnaire d'évènements a été déclenché, comme lors de l'utilisation d'un gestionnaire générique pour un ensemble d'éléments similaires.</p> <p>Lorsqu'une fonction gestionnaire est attachée à un élément en utilisant <code>addEventListener()</code>, la valeur de {{jsxref("Operators/this","this")}} à l'intérieur du gestionnaire est une référence à l'élément. C'est la même valeur que celle de la propriété <code>currentTarget</code> de l'argument évènement qui est passé au gestionnaire.</p> -<pre class="brush: js notranslate">mon_element.addEventListener('click', function (e) { - console.log(this.className) // journalise le className de mon_element +<pre class="brush: js"> +my_element.addEventListener('click', function(e) { + console.log(this.className) // journalise le className de my_element console.log(e.currentTarget === this) // journalise `true` }) </pre> -<p>Pour mémoire, les <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Web/JavaScript/Reference/Functions/Arrow_functions#No_separate_this">fonctions fléchées n'ont pas leur propre contexte <code>this</code></a>.</p> +<p>Pour mémoire, les <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions#pas_de_this_lié_à_la_fonction">fonctions fléchées n'ont pas de <code>this</code> lié</a>.</p> -<pre class="brush: js notranslate">mon_element.addEventListener('click', (e) => { - console.log(this.className) // ATTENTION : `this` n'est pas `mon_element` +<pre class="brush: js"> +my_element.addEventListener('click', (e) => { + console.log(this.className) // ATTENTION : `this` n'est pas `my_element` console.log(e.currentTarget === this) // journalise `false` -})</pre> +}) +</pre> -<p>Si un attribut d'évènement (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié dans un élément dans le source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction gestionnaire qui lie la valeur de <code>this</code> d'une manière cohérente avec l'<code>addEventListener()</code> ; une occurrence de <code>this</code> dans le code représente une référence à l'élément.</p> +<p>Si un gestionnaire d'évènements (par exemple, {{domxref("GlobalEventHandlers.onclick", "onclick")}}) est spécifié sur un élément dans la source HTML, le code JavaScript dans la valeur de l'attribut est effectivement encapsulé dans une fonction du gestionnaire qui lie la valeur de <code>this</code> d'une manière cohérente avec le <code>addEventListener()</code> ; une occurrence de <code>this</code> dans le code représente une référence à l'élément.</p> -<pre class="brush: html notranslate"><table id="ma_table" onclick="console.log(this.id);"><!-- `this` fait référence à la table ; journalise 'ma_table' --> +<pre class="brush: html"> +<table id="my_table" onclick="console.log(this.id);"> +<!-- `this` fait référence à la table ; journalise 'my_table' --> ... -</table></pre> +</table> +</pre> -<p>Notez que la valeur de <code>this</code> à l'intérieur d'une fonction, <em>appelée</em> par le code dans la valeur de l'attribut, se comporte selon les <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Op%C3%A9rateurs/L_op%C3%A9rateur_this">règles standard</a>. Ceci est illustré dans l'exemple suivant :</p> +<p>Notez que la valeur de <code>this</code> à l'intérieur d'une fonction, appelée par le code dans la valeur de l'attribut, se comporte selon les <a href="/fr/docs/Web/JavaScript/Reference/Operators/this">règles standard</a>. Ceci est illustré dans l'exemple suivant :</p> -<pre class="brush: html notranslate"><script> - function journaliserID() { console.log(this.id); } +<pre class="brush: html"> +<script> + function logID() { console.log(this.id); } </script> -<table id="ma_table" onclick="journaliserID();"><!-- lorsqu'appelée, `this` fera référence à l'objet global --> +<table id="my_table" onclick="logID();"> +<!-- lorsqu'appelée, `this` fera référence à l'objet global --> ... -</table></pre> +</table> +</pre> -<p>La valeur de <code>this</code> à l'intérieur de <code>journaliserID</code> est une référence à l'objet global {{domxref("Window")}} (ou <code>undefined</code> dans le cas du <a href="https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>).</p> +<p>La valeur de <code>this</code> à l'intérieur de <code>logID</code> est une référence à l'objet global {{domxref("Window")}} (ou <code>undefined</code> dans le cas du <a href="/fr/docs/Web/JavaScript/Reference/Strict_mode">mode strict</a>).</p> -<h4 id="Spécification_de_this_en_utilisant_bind">Spécification de "this" en utilisant bind()</h4> +<h4 id="Specifying_this_using_bind">Spécification de "this" en utilisant bind()</h4> <p>La méthode {{jsxref("Function.prototype.bind()")}} vous permet de spécifier la valeur qui doit être utilisée comme <code>this</code> pour tous les appels à une fonction donnée. Cette méthode vous permet de contourner facilement les problèmes dans lesquels ce que <code>this</code> sera n'est pas clair, en fonction du contexte depuis lequel votre fonction a été appelée. Notez toutefois que vous aurez besoin de conserver quelque part une référence à l'écouteur, de façon à pouvoir le supprimer ultérieurement.</p> <p>Ceci est un exemple avec et sans <code>bind()</code> :</p> -<pre class="brush: js line-numbers language-js notranslate">var QuelqueChose = function(element) { +<pre class="brush: js"> +const Something = function(element) { // |this| est un objet nouvellement créé - this.name = 'Quelque Chose de Bon'; - this.onclick1 = function(evenement) { - console.log(this.name); // undefined, du fait que |this| est l'élément + this.name = 'Quelque chose de bon'; + this.onclick1 = function(event) { + console.log(this.name); // undefined, car |this| est l'élément }; - this.onclick2 = function(evenement) { - console.log(this.name); // 'Quelque Chose de Bon', du fait que |this| est lié à l'objet nouvellement créé + this.onclick2 = function(event) { + console.log(this.name); // 'Quelque chose de bon', car |this| est lié à l'objet nouvellement créé }; element.addEventListener('click', this.onclick1, false); element.addEventListener('click', this.onclick2.bind(this), false); // Astuce } -var q = new QuelqueChose(document.body);</pre> +const s = new Something(document.body); +</pre> <p>Une autre solution consiste à utiliser une fonction spéciale appelée <code>handleEvent()</code> to intercepter tous les évènements :</p> -<pre class="brush: js notranslate">const QuelqueChose = function(element) { +<pre class="brush: js"> +const Something = function(element) { // |this| est un objet nouvellement créé - this.name = 'Quelque Chose de Bon'; - this.<code>handleEvent</code> = function(evenement) { - console.log(this.name); // 'Quelque Chose de Bon', du fait que this est lié à l'objet nouvellement créé - switch(evenement.type) { + this.name = 'Quelque chose de bon'; + this.handleEvent = function(event) { + console.log(this.name); // "Quelque chose de bon", car |this| est lié à l'objet nouvellement créé. + switch(event.type) { case 'click': // un peu de code ici... break; @@ -429,31 +522,32 @@ var q = new QuelqueChose(document.body);</pre> } }; - // Notez que les écouteurs dans ce cas sont |this|, pas this.<code>handleEvent</code> + // Notez que les écouteurs dans ce cas sont |this|, et non this.handleEvent element.addEventListener('click', this, false); element.addEventListener('dblclick', this, false); - // Vous pouvez enlever correctement les écouteurs + // Vous pouvez retirer correctement les écouteurs element.removeEventListener('click', this, false); element.removeEventListener('dblclick', this, false); } -const q = new QuelqueChose(document.body); +const s = new Something(document.body); </pre> -<p>Une autre manière de gérer la référence à <em>this</em> est de passer à l'<code>EventListener</code> une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :</p> +<p>Une autre manière de gérer la référence à this est de passer à l'<code>EventListener</code> une fonction qui appelle la méthode de l'objet qui contient les champs auxquels on a besoin d'accéder :</p> -<pre class="brush: js notranslate">class UneClasse { +<pre class="brush: js"> +class SomeClass { constructor() { - this.name = 'Quelque Chose de Bon'; + this.name = 'Quelque chose de bon'; } - enregistrer() { - const cela = this; - window.addEventListener('keydown', function(e) { cela.uneMethode(e); }); + register() { + const that = this; + window.addEventListener('keydown', function(e) { that.someMethod(e); }); } - uneMethode(e) { + someMethod(e) { console.log(this.name); switch(e.keyCode) { case 5: @@ -467,107 +561,114 @@ const q = new QuelqueChose(document.body); } -const monObjet = new UneClass(); -monObjet.enregistrer();</pre> +const myObject = new SomeClass(); +myObject.register(); +</pre> -<h3 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements">Passer des données à et depuis un écouteur d'évènements</h3> +<h3 id="Getting_data_into_and_out_of_an_event_listener">Passer des données à et depuis un écouteur d'évènements</h3> -<p>On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'<a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_objects">Event Object</a>, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Donc à nouveau, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.</p> +<p>On peut avoir l'impression que les écouteurs d'évènements sont comme des îles et qu'il est extrêmement difficile de leur passer des données quelconques, encore moins d'en récupérer après qu'ils ont été exécutés. Les écouteurs d'évènements ne prennent qu'un seul argument, l'objet <a href="/fr/docs/Learn/JavaScript/Building_blocks/Events#event_objects"><code>event</code></a>, qui est passé automatiquement à l'écouteur, et la valeur retournée est ignorée. Aussi, comment pouvons-nous leur passer des données et en récupérer ? Il y a certain nombre de bonnes méthodes pour ce faire.</p> -<h4 id="Passer_des_données_à_un_écouteur_dévènement_en_utilisant_this">Passer des données à un écouteur d'évènement en utilisant "this"</h4> +<h4 id="Getting_data_into_an_event_listener_using_this">Passer des données à un écouteur d'évènement en utilisant "this"</h4> -<p>Comme mentionné <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Specifying_this_using_bind">ci-dessus</a>, vous pouvez utiliser <code>Function.prototype.bind()</code> pour passer une valeur à un écouteur d'évènements via la variable de référence <code>this</code>.</p> +<p>Comme mentionné <a href="#specifying_this_using_bind">ci-dessus</a>, vous pouvez utiliser <code>Function.prototype.bind()</code> pour passer une valeur à un écouteur d'évènements via la variable de référence <code>this</code>.</p> -<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton'); -const uneChaine = 'Données'; +<pre class="brush: js"> +const myButton = document.getElementById('my-button-id'); +const someString = 'Donnée'; -monButton.addEventListener('click', function () { - console.log(this); // Valeur Attendue : 'Données' -}.bind(uneChaine)); +myButton.addEventListener('click', function () { + console.log(this); // Valeur attendue : "Donnée". +}.bind(someString)); </pre> <p>Cette méthode est appropriée quand vous n'avez pas besoin de savoir sur quel élément HTML l'écouteur d'évènement a été déclenché par programme depuis l'intérieur de l'écouteur d'évènements. Le principal avantage de cette façon de faire est que l'écouteur d'évènements reçoit les données sensiblement de la même manière qu'il le ferait si vous les lui passiez au moyen de sa liste d'arguments.</p> -<h4 id="Passer_des_données_à_un_écouteur_dévènements_en_utilisant_une_propriété_de_portée_externe">Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe</h4> +<h4 id="Getting_data_into_an_event_listener_using_the_outer_scope_property">Passer des données à un écouteur d'évènements en utilisant une propriété de portée externe</h4> -<p>Quand une portée externe contient une déclaration de variable (avec <code>const</code>, <code>let</code>), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir <a href="https://wiki.developer.mozilla.org/fr-FR/docs/Glossary/Function#Different_types_of_functions">ici</a> pour des informations sur les fonctions externes/internes, et <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#Implicit_globals_and_outer_function_scope">ici</a> pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.</p> +<p>Quand une portée externe contient une déclaration de variable (avec <code>const</code>, <code>let</code>), toutes les fonctions internes déclarées dans cette portée ont accès à cette variable (voir <a href="/fr/docs/Glossary/Function#different_types_of_functions">ici</a> pour des informations sur les fonctions externes/internes, et <a href="/fr/docs/Web/JavaScript/Reference/Statements/var#implicit_globals_and_outer_function_scope">ici</a> pour des informations sur la portée des variables). Par conséquent, une des façons les plus simples pour accéder à des données depuis l'extérieur d'un écouteur d'évènements est de le rendre accessible dans la portée dans laquelle l'écouteur d'évènement est déclaré.</p> -<pre class="brush: js notranslate">const monButton = document.getElementById('id-de-mon-bouton'); -const uneChaine = 'Données'; +<pre class="brush: js"> +const myButton = document.getElementById('my-button-id'); +let someString = 'Donnée'; -monButton.addEventListener('click', function() { - console.log(uneChaine); // Valeur Attendue : 'Données' +myButton.addEventListener('click', function() { + console.log(someString); // Valeur attendue : 'Donnée' - uneChaine = 'Encore des Données'; + someString = 'Encore des données'; }); -console.log(uneChaine); // Valeur Attendue : 'Données' (ne produira jamais 'Encore des Données') +console.log(someString); // Valeur attendue : 'Donnée' (ne donnera jamais 'Encore des données') </pre> -<div class="note"> +<div class="notecard note"> <p><strong>Note :</strong> Bien que les portées internes aient accès aux variables <code>const</code> et <code>let</code> depuis les portées externes, vous ne pouvez pas vous attendre à ce que des changements quelconques de ces variables soient accessibles après la définition de l'écouteur d'évènements, à l'intérieur de la même portée externe. Pourquoi ? Simplement parce qu'au moment où l'écouteur d'évènements s'exécutera, la portée dans laquelle il a été défini pourra avoir déjà fini de s'exécuter.</p> </div> -<h4 id="Passer_des_données_à_et_depuis_un_écouteur_dévènements_en_utilisant_des_objets">Passer des données à et depuis un écouteur d'évènements en utilisant des objets</h4> +<h4 id="Getting_data_into_and_out_of_an_event_listener_using_objects">Passer des données à et depuis un écouteur d'évènements en utilisant des objets</h4> -<p>A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en fait des candidats plausibles pour partager des données entre les portées. Explorons cela.</p> +<p>A l'inverse de la plupart des fonctions en JavaScript, les objets sont conservés en mémoire aussi longtemps qu'une variable les référençant existe en mémoire. Ceci, et le fait que les objets peuvent avoir des propriétés, et qu'ils peuvent être passés alentour par référence, en font des candidats plausibles pour partager des données entre les portées. Explorons cela.</p> -<div class="note"> -<p><strong>Note :</strong> les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)</p> +<div class="notecard note"> +<p><strong>Note :</strong> Les fonctions en JavaScript sont en fait des objets. (Par conséquent, elles aussi peuvent avoir des propriétés, et seront conservées en mémoire même après qu'elles ont fini de s'exécuter, si elles ont été affectées à une variable qui persiste en mémoire.)</p> </div> <p>Du fait que les propriétés d'un objet peuvent être utilisées pour stocker des données en mémoire aussi longtemps qu'une variable référençant l'objet existe en mémoire, vous pouvez en fait les utiliser pour passer des données dans un écouteur d'évènements, et retourner tous les changements aux données après que l'écouteur d'évènements s'est exécuté. Considérez cet exemple :</p> -<pre class="brush: js notranslate">const monBouton = document.getElementById('id-de-mon-bouton'); -const unObjet = {unePropriete: 'Données'}; +<pre class="brush: js"> +const myButton = document.getElementById('my-button-id'); +const someObject = {aProperty: 'Donnée'}; -monButton.addEventListener('click', function() { - console.log(unObjet.unePropriete); // Valeur Attendue : 'Données' +myButton.addEventListener('click', function() { + console.log(someObject.aProperty); // Valeur attendue : "Donnée". - unObjet.unePropriete = 'Encore des Données'; // Changer la valeur + someObject.aProperty = 'Encore des données'; // Modifie la valeur }); window.setInterval(function() { - if (unObjet.unePropriete === 'Encore des Données') { - console.log('Encore des Données: Vrai'); - unObjet.unePropriete = 'Données'; // Réinitialiser la valeur pour attendre la prochaine exécution de l'évènement + if (someObject.aProperty === 'Encore des données') { + console.log('Encore des données : Vrai'); + someObject.aProperty = 'Donnée'; // Rétablit la valeur pour attendre l'exécution du prochain évènement } }, 5000); </pre> -<p>Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de <code>unObjet.unePropriete</code> ait changé, du fait que <code>someObject</code> persiste en mémoire (par <em>référence</em>) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).</p> +<p>Dans cet exemple, même si la portée dans laquelle à la fois l'écouteur d'évènements et la fonction d'intervalle ont été définis a fini de s'exécuter avant que la valeur originale de <code>unObjet.unePropriete</code> ait changé, du fait que <code>someObject</code> persiste en mémoire (par référence) à la fois dans l'écouteur d'évènements et dans la fonction d'intervalle, tous deux ont accès aux mêmes données (i.e. quand l'un change les données, l'autre peut répondre aux changements).</p> -<div class="note"> -<p><strong>Note :</strong> les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., <code>let a = b = {unePropriete: 'Ouais'};</code>), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Les objets sont stockés dans les variables par référence, ce qui signifie que seul l'emplacement en mémoire des données elles-mêmes est stocké dans la variable. Entre autres choses, cela signifie que les variables qui "stockent" des objets peuvent en fait affecter d'autres variables qui se voient affecter ("stocker") la même référence d'objet. Quand deux variables référencent le même objet (par ex., <code>let a = b = {aProperty: 'Ouai'};</code>), le fait de changer les données dans l'une ou l'autre des variables affectera l'autre.</p> </div> -<div class="note"> -<p><strong>Note :</strong> du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Du fait que les objets sont stockés dans les variables par référence, vous pouvez retourner un objet depuis une fonction pour le maintenir en vie (le conserver en mémoire, de sorte que vous n'en perdiez pas les données) après que cette fonction a fini de s'exécuter.</p> </div> -<h3 id="Héritage_Internet_Explorer_et_attachEvent"> Héritage Internet Explorer et attachEvent</h3> +<h3 id="Legacy_Internet_Explorer_and_attachEvent">Prise en charge d'Internet Explorer et attachEvent</h3> -<p>Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser {{domxref("EventTarget.attachEvent", "attachEvent()")}}, plutôt que la méthode standard <code>addEventListener</code>. Pour IE, nous modifions l'exemple précédent en :</p> +<p>Dans les versions Internet Explorer versions avant IE 9, vous deviez utiliser <code>attachEvent()</code> plutôt que la méthode standard <code>addEventListener</code>. Pour IE, nous modifions l'exemple précédent en :</p> -<pre class="brush: js line-numbers language-js notranslate">if (el.addEventListener) { +<pre class="brush: js"> +if (el.addEventListener) { el.addEventListener('click', modifierTexte, false); } else if (el.attachEvent) { el.attachEvent('onclick', modifierTexte); -}</pre> +} +</pre> <p>Il y a un inconvénient avec <code>attachEvent</code> : la valeur de <code>this</code> sera une référence à l'objet <code>window</code>, au lieu de l'élément sur lequel il a été déclenché.</p> <p>La méthode <code>attachEvent()</code> peut être couplée avec l'évènement <code>onresize</code> pour détecter que certains éléments dans une page web ont été redimensionnés. L'évènement propriétaire <code>mselementresize</code>, lorsqu'il est couplé avec la méthode <code>addEventListener</code> d'enregistrement des gestionnaires d'évènements, fournit une fonctionnalité similaire à celle de <code>onresize</code>, se déclenchant quand certains éléments HTML sont redimensionnés.</p> -<h3 id="Émulation">Émulation</h3> +<h3 id="Polyfill">Prothèse d'émulation (<i>polyfill</i>)</h3> <p>Vous pouvez contourner le fait que <code>addEventListener()</code>, <code>removeEventListener()</code>, {{domxref("Event.preventDefault()")}} et {{domxref("Event.stopPropagation()")}} ne sont pas pris en charge par IE 8 en utilisant le code suivant au début de votre script. Le code prend en charge l'utilisation de <code>handleEvent()</code>, et aussi l'évènement {{event("DOMContentLoaded")}}.</p> -<div class="note"> -<p><strong>Note : </strong><code>useCapture</code> n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration <code>doctype</code> est requise.</p> +<div class="cardnote note"> + <p><strong>Note :</strong> <code>useCapture</code> n'est pas pris en charge, du fait qu'IE 8 n'a aucune méthode alternative. Le code suivant ajoute seulement la prise en charge d'IE 8. Cette émulation pour IE 8 fonctionne uniquement en mode standard : une déclaration <code>doctype</code> est requise.</p> </div> -<pre class="brush: js line-numbers language-js notranslate">(function() { +<pre class="brush: js"> +(function() { if (!Event.prototype.preventDefault) { Event.prototype.preventDefault=function() { this.returnValue=false; @@ -638,14 +739,17 @@ window.setInterval(function() { Window.prototype.removeEventListener=removeEventListener; } } -})();</pre> +})(); +</pre> -<h3 id="Ancienne_manière_denregistrer_les_écouteurs_dévènements">Ancienne manière d'enregistrer les écouteurs d'évènements</h3> +<h3 id="Older_way_to_register_event_listeners">Ancienne manière d'enregistrer les écouteurs d'évènements</h3> -<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p> +<p>La méthode <code>addEventListener()</code> a été ajoutée dans la spécification DOM 2 <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events">Events</a>. Avant cela, les écouteurs d'évènements étaient enregistrés de la manière suivante :</p> -<pre class="notranslate">// Passage d'une référence à une fonction — ne pas ajouter de '()' après, cela appelerait la fonction ! -el.onclick = modifierTexte; +<pre class="brush: js"> +// Passage d'une référence à une fonction +// Ne pas ajouter de '()' après, cela appelerait la fonction ! +el.onclick = modifyText; // Utilisation d'une fonction directe element.onclick = function() { @@ -653,64 +757,68 @@ element.onclick = function() { }; </pre> -<p>Cette méthode remplace l'(les)écouteur(s) d'évènements <code>click</code> existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme <code>blur</code> (<code>onblur</code>), et <code>keypress</code> ( <code>onkeypress</code>) se comportent de façon similaire.</p> +<p>Cette méthode remplace l'(les) écouteur(s) d'évènements <code>click</code> existant(s) de l'élément s'il y en a. D'autres évènements et leurs gestionnaires d'évènements associés comme <code>blur</code> (<code>onblur</code>), et <code>keypress</code> ( <code>onkeypress</code>) se comportent de façon similaire.</p> -<p>Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE <=8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour <code>addEventListener</code>.</p> +<p>Comme elle faisait partie de façon fondamentale du DOM 0, cette méthode est très largement prise en charge et ne nécessite aucun code multi-navigateur. C'est pourquoi elle est souvent utilisée pour enregistrer des évènements dynamiquement quand de très anciens navigateurs (comme IE dans les versions antérieures à IE8) doivent être pris en charge ; voir la table plus bas pour les détails de la prise en charge par les navigateurs pour <code>addEventListener</code>.</p> -<h3 id="Problèmes_de_mémoire">Problèmes de mémoire</h3> +<h3 id="Memory_issues">Problèmes de mémoire</h3> -<pre class="brush: js line-numbers language-js notranslate">var i; -var els = document.getElementsByTagName('*'); +<pre class="brush: js"> +let i; +const els = document.getElementsByTagName('*'); // Cas 1 -for(i=0 ; i<els.length ; i++){ +for (i=0 ; i<els.length ; i++) { els[i].addEventListener("click", function(e){/*faire quelque chose*/}, false); } // Cas 2 -function traiterEvenement(e){ +function processEvent(e) { /* faire quelque chose */ } -for(i=0 ; i<els.length ; i++){ - els[i].addEventListener("click", traiterEvenement, false); -}</pre> +for (i=0 ; i<els.length ; i++) { + els[i].addEventListener("click", processEvent, false); +} +</pre> -<p>Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire <code>monElement.removeEventListener("click", traiterEvenement, false)</code> du fait que <code>traiterEvenement</code> est la référence à la fonction.</p> +<p>Dans le premier cas ci-dessus, une nouvelle fonction gestionnaire (anonyme) est créée à chaque itération de la boucle. Dans le second cas, la même fonction déclarée préalablement est utilisée comme gestionnaire d'évènements. Cela entraîne une consommation de mémoire réduite. De plus, dans le premier cas, il n'est pas possible d'appeler {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} du fait qu'aucune référence à la fonction anonyme n'est conservée (ou ici, n'est conservée aucune des multiples fonctions anonymes que la boucle peut créer). Dans le second cas, il est possible de faire <code>myElement.removeEventListener("click", processEvent, false)</code> du fait que <code>processEvent</code> est la référence à la fonction.</p> <p>En fait, en ce qui concerne la consommation de mémoire, l'absence de conservation d'une référence à la fonction n'est pas le problème réel ; c'est plutôt l'absence de conservation d'une référence STATIQUE à la fonction. Dans les deux cas à problème ci-dessous, une référence à la fonction est conservée, mais du fait qu'elle est redéfinie à chaque itération, elle n'est pas statique. Dans le troisème cas, la référence à la fonction anonyme est réaffectée à chaque itération. Dans le quatrième cas, la définition entière de la fonction est inchangée, mais elle est néanmoins répétitivement définie comme si elle était nouvelle (à moins qu'elle n'ait été [[promue]] par le compilateur), et elle n'est donc pas statique. Par conséquent, bien qu'il ne semble y avoir simplement que des [[Multiple identical event listeners]], dans les deux cas, chaque itération créera à la place un nouvel écouteur avec sa propre unique référence à la fonction gestionnaire. Cependant, du fait que la définition de la fonction elle-même ne change pas, la MÊME fonction peut toujours être appelée pour chaque écouteur dupliqué (spécialement si le code est optimisé.)</p> <p>Également dans les deux cas, du fait que la référence à la fonction e été conservée mais est répétitivement redéfinie par chaque ajout, l'instruction 'remove' ci-dessus peut toujours supprimer un écouteur, mais seulement le dernier ajouté.</p> -<pre class="brush: js notranslate">// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément +<pre class="brush: js"> +// Pour illustration seulement : notez la "FAUTE" de [j] au lieu de [i] entrainant ainsi que les évènements voulus sont tous enregistrés pour le MÊME élément // Cas 3 -for(let i=0, j=0 ; i<els.length ; i++){ +for (let i=0, j=0 ; i<els.length ; i++) { /* faire des tas de choses avec j */ - els[j].addEventListener("click", traiterEvenement = function(e){/*faire quelque chose*/}, false); + els[j].addEventListener("click", processEvent = function(e) {/*faire quelque chose*/}, false); } // Cas 4 -for(let i=0, j=0 ; i<els.length ; i++){ +for (let i=0, j=0 ; i<els.length ; i++) { /* faire des tas de choses avec j */ - function traiterEvenement(e){/*faire quelque chose*/}; - els[j].addEventListener("click", traiterEvenement, false); + function processEvent(e) {/*faire quelque chose*/}; + els[j].addEventListener("click", processEvent, false); }</pre> -<h3 id="Amélioration_des_performances_de_défilement_avec_les_écouteurs_passifs">Amélioration des performances de défilement avec les écouteurs passifs</h3> +<h3 id="Improving_scrolling_performance_with_passive_listeners">Amélioration des performances de défilement avec les écouteurs passifs</h3> -<p>D'après la spécification, la valeur par défaut pour l'option <code>passive</code> est toujours <code>false</code> (<em>faux</em>). Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.</p> +<p>D'après la spécification, la valeur par défaut pour l'option <code>passive</code> est toujours <code>false</code>. Toutefois, cela introduit la possibilité que des écouteurs d'évènements gérant certains évènements tactiles (parmi d'autres) bloquent le fil d'exécution principal du navigateur pendant qu'il essaye de gérer le défilement, avec pour résultat une possiblement énorme réduction de performance pendant la gestion du défilement.</p> <p>Pour prévenir ce problème, certains navigateurs (spécifiquement, Chrome et Firefox) ont changé la valeur par défault de l'option <code>passive</code> à <code>true</code> pour les évènements {{event("touchstart")}} et {{event("touchmove")}} dans les nœuds de niveau document {{domxref("Window")}}, {{domxref("Document")}}, et {{domxref("Document.body")}}. Cela empêche que l'écouteur d'évènement ne soit appelé, de sorte qu'il ne peut pas bloquer le rendu de la page pendant que l'utilisateur fait un défilement.</p> -<div class="note"> -<p><strong>Note :</strong> voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Voir la table de compatibilité ci-dessous si vous avez besoin de savoir quels navigateurs (et/ou quelles versions de ces navigateurs) implémentent ce comportement modifié.</p> </div> <p>Vous pouvez passer outre ce comportement en initialisant explicitement la valeur de <code>passive</code> à <code>false</code>, comme montré ci-dessous :</p> -<pre class="brush: js notranslate">/* Détection de fonctionnalité */ -let passiveSiSupportee = false; +<pre class="brush: js"> +/* Détection de la fonctionnalité */ +let passiveIfSupported = false; try { window.addEventListener("test", null, @@ -718,58 +826,59 @@ try { {}, "passive", { - get: function() { passiveSiSupportee = { passive: false }; } + get: function() { passiveIfSupported = { passive: true }; } } ) ); } catch(err) {} -window.addEventListener('scroll', function(evenement) { +window.addEventListener('scroll', function(event) { /* faire quelque chose */ - // pas possible d'utiliser evenement.preventDefault(); -}, passiveSiSupportee );</pre> + // ne peut pas utiliser event.preventDefault(); +}, passiveIfSupported ); +</pre> -<p>Dans les navigateurs anciens qui ne prennent pas en charge le paramètre <code>options</code> d'<code>addEventListener()</code>, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument <code>useCapture</code> sans utilisation appropriée de la <a href="https://wiki.developer.mozilla.org/fr/docs/Web/API/EventTarget/addEventListener$edit#Safely_detecting_option_support">détection de fonctionnalité</a>.</p> +<p>Dans les navigateurs anciens qui ne prennent pas en charge le paramètre <code>options</code> d'<code>addEventListener()</code>, le fait d'essayer de l'utiliser empêche l'utilisation de l'argument <code>useCapture</code> sans utilisation appropriée de la <a href="#safely_detecting_option_support">détection de fonctionnalité</a>.</p> <p>Vous n'avez pas besoin de vous inquiéter de la valeur de <code>passive</code> pour l'évènement {{event("scroll")}} de base. Du fait qu'il ne peut pas être annulé, les écouteurs d'évènements ne peuvant pas bloquer le rendu de la page de toute façon.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>Statut</th> - <th>Commentaire</th> - </tr> - <tr> - <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM WHATWG")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM4")}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td> - <td>{{Spec2("DOM2 Events")}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <thead> + <tr> + <th>Spécification</th> + <th>Statut</th> + <th>Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-eventtarget-addeventlistener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-EventTarget-addEventListener", "EventTarget.addEventListener()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div class="hidden">La table de compatibilité de cette page est générée à partir de données structurées. Si vous souhaitez contribuer aux données, visitez <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et envoyez nous une "pull request".</div> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.EventTarget.addEventListener", 3)}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>{{domxref("EventTarget.removeEventListener()")}}</li> - <li><a href="https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">Création et déclenchement d'évènements personnalisés</a></li> - <li><a href="http://www.quirksmode.org/js/this.html">Plus de détails sur l'utilisation de <code>this</code> dans les gestionnaires d'évènements</a></li> + <li>{{domxref("EventTarget.removeEventListener()")}}</li> + <li><a href="/fr/docs/Web/Guide/Events/Creating_and_triggering_events">Création et déclenchement d'évènements</a></li> + <li><a href="http://www.quirksmode.org/js/this.html">Plus de détails sur l'utilisation de <code>this</code> dans les gestionnaires d'évènements</a></li> </ul> diff --git a/files/fr/web/api/performance/clearmarks/index.html b/files/fr/web/api/performance/clearmarks/index.html new file mode 100644 index 0000000000..31634399f9 --- /dev/null +++ b/files/fr/web/api/performance/clearmarks/index.html @@ -0,0 +1,93 @@ +--- +title: performance.clearMarks() +slug: Web/API/Performance/clearMarks +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/clearMarks +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>clearMarks()</code></strong> supprime les <em>marqueurs nommés</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType", "entryType")}} de « <code>mark</code> » seront supprimées du tampon d'entrée de performance.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <em>performance</em>.clearMarks(); + <em>performance</em>.clearMarks(name); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt>name {{optional_inline}}</dt> + <dd>Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>mark</code> » seront supprimés.</dd> +</dl> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Aucune.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre les deux utilisations de la méthode <code>clearMarks()</code>.</p> + +<pre class="brush: js">// Créé une petite aide pour montrer combien d'entrées PerformanceMark il y a. +function logMarkCount() { + console.log( + "J'ai trouvé autant d'entrées : " + performance.getEntriesByType("mark").length + ); +} + +// Crée une série de marqueurs. +performance.mark("squirrel"); +performance.mark("squirrel"); +performance.mark("monkey"); +performance.mark("monkey"); +performance.mark("dog"); +performance.mark("dog"); + +logMarkCount() // "J'ai trouvé autant d'entrées : 6" + +// Supprime seulement les entrées "squirrel" de PerformanceMark. +performance.clearMarks('squirrel'); +logMarkCount() // "J'ai trouvé autant d'entrées : 4" + +// Supprime toutes les entrées de PerformanceMark. +performance.clearMarks(); +logMarkCount() // "J'ai trouvé autant d'entrées : 0" +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('User Timing Level 2', '#dom-performance-clearmarks', + 'clearMarks()')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Clarification de <code>clearMarks()</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#dom-performance-clearmarks', 'clearMarks()')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.clearMarks")}}</p> diff --git a/files/fr/web/api/performance/clearmeasures/index.html b/files/fr/web/api/performance/clearmeasures/index.html new file mode 100644 index 0000000000..c63eff637d --- /dev/null +++ b/files/fr/web/api/performance/clearmeasures/index.html @@ -0,0 +1,95 @@ +--- +title: performance.clearMeasures() +slug: Web/API/Performance/clearMeasures +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/clearMeasures +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>clearMeasures()</code></strong> supprime les <em>mesures nommées</em> du tampon d'entrée des performances du navigateur. Si la méthode est appelée sans arguments, toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>measure</code> » seront supprimées du tampon d'entrée de performance.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <em>performance</em>.clearMeasures(); + <em>performance</em>.clearMeasures(name); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt>name {{optional_inline}}</dt> + <dd>Un {{domxref("DOMString")}} représentant le nom de l'horodatage. Si cet argument est omis, toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entrType")}} de « <code>measure</code> » seront supprimés.</dd> +</dl> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Aucune.</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre les deux utilisations de la méthode <code>clearMeasures()</code>.</p> + +<pre class="brush: js">// Crée une petite aide pour montrer combien d'entrées PerformanceMeasure il y a. +function logMeasureCount() { + console.log( + "J'ai trouvé ces nombreuses entrées : " + performance.getEntriesByType("measure").length + ); +} + +// Crée un ensemble de mesures. +performance.measure("from navigation"); +performance.mark("a"); +performance.measure("from mark a", "a"); +performance.measure("from navigation"); +performance.measure("from mark a", "a"); +performance.mark("b"); +performance.measure("between a and b", "a", "b"); + +logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 5" + +// Supprime uniquement les entrées PerformanceMeasure "from navigation". +performance.clearMeasures("from navigation"); +logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 3" + +// Supprime toutes les entrées de PerformanceMeasure. +performance.clearMeasures(); +logMeasureCount() // "J'ai trouvé ces nombreuses entrées : 0" +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('User Timing Level 2', '#dom-performance-clearmeasures', + 'clearMeasures()')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Carification de <code>clearMeasures()</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#dom-performance-clearmeasures', 'clearMeasures()')}} + </td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.clearMeasures")}}</p> diff --git a/files/fr/web/api/performance/clearresourcetimings/index.html b/files/fr/web/api/performance/clearresourcetimings/index.html new file mode 100644 index 0000000000..a6da2caf50 --- /dev/null +++ b/files/fr/web/api/performance/clearresourcetimings/index.html @@ -0,0 +1,84 @@ +--- +title: performance.clearResourceTimings() +slug: Web/API/Performance/clearResourceTimings +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/clearResourceTimings +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>clearResourceTimings()</code></strong> supprime toutes les {{domxref("PerformanceEntry", "entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} de « <code>resource</code> » du tampon d'entrée de performance et fixe la taille du tampon de données de performance à zéro. Pour définir la taille du tampon de données de performance du navigateur, utilisez la méthode {{domxref("Performance.setResourceTimingBufferSize()")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"><em>performance</em>.clearResourceTimings(); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<p>Aucun.</p> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Aucune.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function load_resource() { + var image = new Image(); + image.src = "https://developer.mozilla.org/static/img/opengraph-logo.png"; +} +function clear_performance_timings() { + if (performance === undefined) { + log("Le navigateur ne prend pas en charge les performances Web"); + return; + } + // Crée une entrée de performance de synchronisation des ressources en chargeant une image + load_resource(); + + var supported = typeof performance.clearResourceTimings == "function"; + if (supported) { + console.log("Exécuter : performance.clearResourceTimings()"); + performance.clearResourceTimings(); + } else { + console.log("performance.clearResourceTimings() N'EST PAS supporté"); + return; + } + // getEntries devrait maintenant retourner zéro + var p = performance.getEntriesByType("resource"); + if (p.length == 0) + console.log("... Le tampon de données de performance a été effacé"); + else + console.log("... Le tampon de données de performance n'a PAS été effacé !"); +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Resource Timing', '#dom-performance-clearresourcetimings', + 'clearResourceTimings()')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.clearResourceTimings")}}</p> diff --git a/files/fr/web/api/performance/getentries/index.html b/files/fr/web/api/performance/getentries/index.html new file mode 100644 index 0000000000..2cebfda905 --- /dev/null +++ b/files/fr/web/api/performance/getentries/index.html @@ -0,0 +1,104 @@ +--- +title: performance.getEntries() +slug: Web/API/Performance/getEntries +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/getEntries +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="seoSummary">La méthode <strong><code>getEntries()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour la page. Les membres de la liste (<em>entrées</em>) peuvent être créés en faisant des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites. Si vous souhaitez filtrer les entrées de performance en fonction de leur type ou de leur nom, consultez la documentation des méthodes {{domxref("Performance.getEntriesByType", "getEntriesByType()")}} et {{domxref("Performance.getEntriesByName", "getEntriesByName()")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <var>entries</var> = window.performance.getEntries(); +</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<dl> + <dt><code>entries</code></dt> + <dd>Un tableau ({{jsxref("Array")}}) d'objets {{domxref("PerformanceEntry")}}. Les éléments seront classés par ordre chronologique en fonction des entrées {{domxref("PerformanceEntry.startTime","startTime")}}.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function use_PerformanceEntry_methods() { + console.log("PerformanceEntry tests ..."); + + if (performance.mark === undefined) { + console.log("... performance.mark Non pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + performance.mark("Begin"); + do_work(100000); + performance.mark("End"); + do_work(200000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée. + let p = performance.getEntries(); + for (var i=0; i < p.length; i++) { + console.log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } + + // Utilise getEntriesByType() pour obtenir toutes les entrées "mark". + p = performance.getEntriesByType("mark"); + for (let i=0; i < p.length; i++) { + console.log ("Mark only entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } + + // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin". + p = performance.getEntriesByName("Begin", "mark"); + for (let i=0; i < p.length; i++) { + console.log ("Mark and Begin entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#dom-performance-getentries', + 'getEntries()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performance-getentries', + 'getEntries()')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.getEntries")}}</p> diff --git a/files/fr/web/api/performance/getentriesbyname/index.html b/files/fr/web/api/performance/getentriesbyname/index.html new file mode 100644 index 0000000000..c01ee9b633 --- /dev/null +++ b/files/fr/web/api/performance/getentriesbyname/index.html @@ -0,0 +1,120 @@ +--- +title: performance.getEntriesByName() +slug: Web/API/Performance/getEntriesByName +tags: + - API + - Method + - Méthode + - Reference + - Performance web +translation_of: Web/API/Performance/getEntriesByName +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="seoSummary">La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} ayant un nom (et éventuellement un type) donné(s). Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <var>entries</var> = window.performance.getEntriesByName(name, type); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Le nom de l'entrée à récupérer.</dd> + <dt><code>type</code> {{optional_inline}}</dt> + <dd>Le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.</dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<dl> + <dt><code>entries</code></dt> + <dd>Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le nom et le type spécifiés. Si l'argument <code>type</code> n'est pas spécifié, seul le nom (<code>name</code>) sera utilisé pour déterminer les entrées à renvoyer. Les éléments seront dans l'ordre chronologique basé sur les {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne répond aux critères spécifiés, une liste vide est retournée.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function use_PerformanceEntry_methods() { + log("PerformanceEntry tests ..."); + + if (performance.mark === undefined) { + log("... performance.mark Non pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + do_work(50000); + performance.mark("End"); + performance.mark("Begin"); + do_work(100000); + performance.mark("End"); + do_work(200000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée + var p = performance.getEntries(); + for (var i=0; i < p.length; i++) { + log("Entry[" + i + "]"); + check_PerformanceEntry(p[i]); + } + + // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques + p = performance.getEntries({name : "Begin", entryType: "mark"}); + for (var i=0; i < p.length; i++) { + log("Begin[" + i + "]"); + check_PerformanceEntry(p[i]); + } + + // Utilise getEntriesByType() pour obtenir toutes les entrées "mark" + p = performance.getEntriesByType("mark"); + for (var i=0; i < p.length; i++) { + log ("Mark only entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } + + // Utilisez getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin" + p = performance.getEntriesByName("Begin", "mark"); + for (var i=0; i < p.length; i++) { + log ("Mark and Begin entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbyname', + 'getEntriesByName()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performance-getentriesbyname', + 'getEntriesByName()')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.getEntriesByName")}}</p> diff --git a/files/fr/web/api/performance/getentriesbytype/index.html b/files/fr/web/api/performance/getentriesbytype/index.html new file mode 100644 index 0000000000..4f06729f3c --- /dev/null +++ b/files/fr/web/api/performance/getentriesbytype/index.html @@ -0,0 +1,118 @@ +--- +title: performance.getEntriesByType() +slug: Web/API/Performance/getEntriesByType +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/getEntriesByType +--- +<div>{{APIRef("Performance Timeline API")}}</div> + +<p class="seoSummary">La méthode <strong><code>getEntriesByName()</code></strong> renvoie une liste de tous les objets {{domxref("PerformanceEntry")}} pour le type donné. Les entrées de performance auront pu être créées au préalable avec des <em>marqueurs</em> ou des <em>mesures</em> de performance (par exemple en appelant la méthode {{domxref("Performance.mark", "mark()")}}) à des moments explicites.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + let <var>entries</var> = window.performance.getEntriesByType(type); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt><code>type</code></dt> + <dd>Le type d'entrée à récupérer tel que « <code>mark</code> ». Les types d'entrées valides sont listés dans {{domxref("PerformanceEntry.entryType")}}.</dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<dl> + <dt><code>entries</code></dt> + <dd>Une liste de tous les objets {{domxref("PerformanceEntry")}} ayant le <em>type</em> spécifié. Les éléments seront triés dans l'ordre chronologique basé sur les propriétés {{domxref("PerformanceEntry.startTime", "startTime")}} des entrées. Si aucun objet ne possède le type spécifié, ou si aucun argument n'est fourni, une liste vide est renvoyée.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function usePerformanceEntryMethods() { + log("PerformanceEntry tests ..."); + + if (performance.mark === undefined) { + log("... performance.mark Non pris en charge"); + return; + } + + // Crée quelques entrées de performance via la méthode mark() + performance.mark("Begin"); + doWork(50000); + performance.mark("End"); + performance.mark("Begin"); + doWork(100000); + performance.mark("End"); + doWork(200000); + performance.mark("End"); + + // Utilise getEntries() pour itérer à travers chaque entrée. + var p = performance.getEntries(); + for (var i=0; i < p.length; i++) { + log("Entry[" + i + "]"); + checkPerformanceEntry(p[i]); + } + + // Utilise getEntries(name, entryType) pour obtenir des entrées spécifiques. + p = performance.getEntries({name : "Begin", entryType: "mark"}); + for (var i=0; i < p.length; i++) { + log("Begin[" + i + "]"); + checkPerformanceEntry(p[i]); + } + + // Utilise getEntriesByType() pour obtenir toutes les entrées "mark". + p = performance.getEntriesByType("mark"); + for (var i=0; i < p.length; i++) { + log("Mark only entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } + + // Utilise getEntriesByName() pour obtenir toutes les entrées "mark" nommées "Begin". + p = performance.getEntriesByName("Begin", "mark"); + for (var i=0; i < p.length; i++) { + log("Mark and Begin entry[" + i + "]: name = " + p[i].name + + "; startTime = " + p[i].startTime + + "; duration = " + p[i].duration); + } +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#dom-performance-getentriesbytype', + 'getEntriesByType()')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#dom-performance-getentriesbytype', + 'getEntriesByType()')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.getEntriesByType")}}</p> diff --git a/files/fr/web/api/performance/index.html b/files/fr/web/api/performance/index.html index e139a6ac71..46d8e44241 100644 --- a/files/fr/web/api/performance/index.html +++ b/files/fr/web/api/performance/index.html @@ -3,117 +3,154 @@ title: Performance slug: Web/API/Performance tags: - API + - Navigation Timing - Performance - Performance Web + - Reference translation_of: Web/API/Performance --- -<div>{{APIRef("Navigation Timing")}}</div> +<div>{{APIRef("High Resolution Time")}}</div> -<p>L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API High Resolution Time, mais est complétée par les APIs <a href="/en-US/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/en-US/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/en-US/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/en-US/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p> +<p class="seoSummary">L'interface <strong><code>Performance</code></strong> donne accès à des informations liées aux performances pour la page actuelle. Elle fait partie de l'API « High Resolution Time », mais est complétée par les APIs <a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a>, <a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing</a>, <a href="/fr/docs/Web/API/User_Timing_API">User Timing</a>, et <a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing</a>.</p> -<p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("Window.performance")}}.</p> +<p>Un objet de ce type peut être obtenu en appelant l'attribut en lecture seule {{domxref("window.performance")}}.</p> -<div class="note"> -<p><strong><em>Note</em>: </strong>Cette interface et ses attributs sont accessibles aux {{domxref("Web Worker")}} sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p> +<div class="notecard note"> + <p><strong>Note :</strong> Cette interface et ses attributs sont accessibles aux <a href="/fr/docs/Web/API/Web_Workers_API">Web Workers</a> via <code><a href="/fr/docs/Web/API/WorkerGlobalScope/performance">WorkerGlobalScope.performance</a></code> sauf dans les cas cités ci-dessous. Notez également que les marqueurs et les mesures de performance sont définis par contexte. Si vous créez un marqueur dans le processus principal (ou un autre Web Worker), vous ne pourrez pas le voir dans le processus du Web Worker, et réciproquement.</p> </div> -<h2 id="Propriétés">Propriétés</h2> +<h2 id="Properties">Propriétés</h2> -<p><em>L'interface<code>Performance</code> n'hérite d'aucune propriété.</em></p> +<p><em>L'interface <code>Performance</code> n'hérite d'aucune propriété.</em></p> <dl> - <dt>{{deprecated_inline}} {{domxref("performance.navigation")}} {{readonlyInline}}</dt> - <dd>{{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations inclues dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… Indisponible dans les Web Workers.</dd> + <dt> + {{domxref("performance.navigation")}} {{readonlyInline}} {{deprecated_inline}} + </dt> + <dd> + {{domxref("PerformanceNavigation")}} est un objet qui fournit des informations contextuelles sur les opérations incluses dans les indicateurs de <code>timing</code>, notamment si la page a été chargée ou actualisée, combien de redirections ont été effectuées, etc… + <div class="notecard note"> + <p>Indisponible dans les Web Workers.</p> + </div> + </dd> + <dt> + {{domxref("performance.timing")}} {{readonlyInline}} {{deprecated_inline}} + </dt> + <dd> + {{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. + <div class="notecard note"> + <p>Indisponible dans les Web Workers.</p> + </div> + </dd> + <dt> + {{domxref("performance.memory")}} {{readonlyInline}} {{Non-standard_inline}}</dt> + <dd> + Une extension <em>non standard</em> ajoutée dans Chrome, cette propriété fournit à un objet des informations de base sur l'utilisation de la mémoire. <em>Vous <strong>ne devriez pas utiliser</strong> cette API non standard.</em> + </dd> + <dt> + {{domxref("Performance.timeOrigin")}} {{readonlyInline}} {{Experimental_inline}} + </dt> + <dd> + Fournit un horodatage haute résolution de l'heure de début de la mesure de performance. + </dd> </dl> -<dl> - <dt>{{deprecated_inline}} {{domxref("performance.timing")}} {{readonlyInline}}</dt> - <dd>{{domxref("PerformanceTiming")}} est un objet contenant des informations de performance liées à la latence. Indisponible dans les Web Workers.</dd> - <dt>{{domxref("performance.memory")}} {{Non-standard_inline}}</dt> - <dd>{{domxref("PerformanceNavigation")}} est un objet non-standard ajouté dans Chrome, contenant des informations basiques d'utilisation de la mémoire.</dd> -</dl> - -<h2 id="Méthodes">Méthodes</h2> - -<p><em><em>L'interface <code>Performance</code> n'hérite d'aucune méthode</em></em>.</p> - -<p> </p> - -<dl> - <dt>{{domxref("performance.clearMarks()")}}</dt> - <dd>Supprime le <em>marqueur</em> indiqué des données de performances du navigateur mises en mémoire tampon.</dd> - <dt>{{domxref("performance.clearMeasures()")}}</dt> - <dd>Supprime la <em>mesure</em> indiquée des données de performances du navigateur mises en mémoire tampon.</dd> - <dt>{{domxref("performance.clearResourceTimings()")}}</dt> - <dd>Supprime toutes les {{domxref("PerformanceEntry","entrées de performance")}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "<code>resource</code>" des données de performances du navigateur mises en mémoire tampon.</dd> - <dt>{{domxref("performance.getEntries()")}}</dt> - <dd>Retourne une liste d'objets {domxref("PerformanceEntry")}} basée sur le <em>filter</em> indiqué.</dd> - <dt>{{domxref("performance.getEntriesByName()")}}</dt> - <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>nom</em> d'entrée indiqué.</dd> - <dt>{{domxref("performance.getEntriesByType()")}}</dt> - <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>type</em> d'entrée indiqué.</dd> - <dt>{{domxref("performance.mark()")}}</dt> - <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.</dd> - <dt>{{domxref("performance.measure()")}}</dt> - <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le <em>marqueur de début</em> et le <em>marqueur de fin</em>, respectivement).</dd> -</dl> +<h2 id="Methods">Méthodes</h2> -<p> </p> +<p><em>L'interface <code>Performance</code> n'hérite d'aucune méthode</em>.</p> <dl> - <dt>{{domxref("Performance.now()")}}</dt> - <dd>Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.</dd> - <dt>{{domxref("performance.setResourceTimingBufferSize()")}}</dt> - <dd>Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur, avec le nombre indiqué de {{domxref("PerformanceEntry.entryType","type")}} d'{{domxref("PerformanceEntry","performance entry")}}objets "<code>resource</code>" .</dd> - <dt>{{domxref("Performance.toJSON()")}} {{non-standard_inline}}</dt> - <dd>Retourne un objet JSON représentant l'objet <code>Performance</code>.</dd> - <dt> </dt> + <dt>{{domxref("performance.clearMarks()")}}</dt> + <dd>Supprime le <em>marqueur</em> indiqué des données de performances du navigateur mises en mémoire tampon.</dd> + <dt>{{domxref("performance.clearMeasures()")}}</dt> + <dd>Supprime la <em>mesure</em> indiquée des données de performances du navigateur mises en mémoire tampon.</dd> + <dt>{{domxref("performance.clearResourceTimings()")}}</dt> + <dd>Supprime toutes les {{domxref("PerformanceEntry","entrées de performance","",1)}} avec un {{domxref("PerformanceEntry.entryType","entryType")}} "<code>resource</code>" des données de performances du navigateur mises en mémoire tampon.</dd> + <dt>{{domxref("performance.getEntries()")}}</dt> + <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>filtre</em> indiqué.</dd> + <dt>{{domxref("performance.getEntriesByName()")}}</dt> + <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>nom</em> indiqué.</dd> + <dt>{{domxref("performance.getEntriesByType()")}}</dt> + <dd>Retourne une liste d'objets {{domxref("PerformanceEntry")}} basée sur le <em>type</em> indiqué.</dd> + <dt>{{domxref("performance.mark()")}}</dt> + <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} avec le nom indiqué, dans la mémoire tampon du navigateur dédiée aux performances.</dd> + <dt>{{domxref("performance.measure()")}}</dt> + <dd>Crée un {{domxref("DOMHighResTimeStamp","timestamp")}} nommé, dans la mémoire tampon du navigateur dédiée aux performances, entre deux marqueurs spécifiques (connus comme le <em>marqueur de début</em> et le <em>marqueur de fin</em>, respectivement).</dd> + <dt>{{domxref("Performance.now()")}}</dt> + <dd>Retourne un objet {{domxref("DOMHighResTimeStamp")}} représentant le nombre de millisecondes écoulées depuis un instant donné.</dd> + <dt>{{domxref("performance.setResourceTimingBufferSize()")}}</dt> + <dd>Configure la taille de la mémoire tampon pour le chronométrage des ressources du navigateur. La valeur passée en argument indiquera le nombre maximal d'objets {{domxref("PerformanceEntry")}} ayant le {{domxref("PerformanceEntry.entryType","type")}} "<code>resource</code>" qu'il sera possible d'y stocker.</dd> + <dt>{{domxref("Performance.toJSON()")}}</dt> + <dd>Retourne un objet JSON représentant l'objet <code>Performance</code>.</dd> </dl> -<h2 id="Events">Events</h2> +<h2 id="Events">Événements</h2> -<p>Écoutez ces événéments en utilisant <code>addEventListener()</code> ou en assignant un écouteur d'événément à la propriété <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">on<em>EventName</em> de cette interface.</span></font></p> +<p>On pourra écouter ces événements en utilisant <code>addEventListener()</code> ou en assignant un gestionnaire d'événement à la propriété <code>on<em><EventName></em></code> de cette interface.</p> <dl> - <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/resourcetimingbufferfull_event">resourcetimingbufferfull</a></code></dt> - <dd>Déclenchée quaund les ressources de la mémoire tampon du navigateur pour le chronométrage est pleine.<br> - Également disponible via la propriété <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/onresourcetimingbufferfull">onresourcetimingbufferfull</a></code>.</dd> + <dt>{{DOMxRef("Performance.resourcetimingbufferfull_event", "resourcetimingbufferfull")}}</dt> + <dd>Déclenché lorsque le <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est plein. Également disponible via la propriété {{DOMxRef("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}.</dd> </dl> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('Highres Time', '#sec-extenstions-performance-interface', 'Performance')}}</td> - <td>{{Spec2('Highres Time')}}</td> - <td>Ajout de la méthode <code>now()</code>.</td> - </tr> - <tr> - <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance')}}</td> - <td>{{Spec2('Navigation Timing')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Highres Time Level 2', '#sec-performance', 'Performance')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Définition de la méthode <code>toJson()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#performance', 'Performance')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Définition de la méthode <code>now()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline Level 2', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline Level 2')}}</td> + <td>Changements sur l'interface <code>getEntries()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Performance Timeline', '#extensions-to-the-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Performance Timeline')}}</td> + <td>Définition des méthodes <code>getEntries()</code>, <code>getEntriesByType()</code> et <code>getEntriesByName()</code>.</td> + </tr> + <tr> + <td>{{SpecName('Resource Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition des méthodes <code>clearResourceTimings()</code> et <code>setResourceTimingBufferSize()</code> et de la propriété <code>onresourcetimingbufferfull</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing Level 2', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Clarifications des méthodes <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> et <code>clearMeasure()</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#extensions-performance-interface', 'Performance extensions')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition des méthodes <code>mark()</code>, <code>clearMark()</code>, <code>measure()</code> et <code>clearMeasure()</code>.</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> - -<div> -<div> - +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Performance")}}</p> -</div> -</div> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_Also">Voir aussi</h2> <ul> - <li>Interfaces liées : {{domxref("PerformanceTiming")}}, {{domxref("PerformanceNavigation")}}.</li> + <li><a href="/fr/docs/Web/API/Performance_Timeline">Performance Timeline</a></li> + <li><a href="/fr/docs/Web/API/Navigation_timing_API">Navigation Timing API</a></li> + <li><a href="/fr/docs/Web/API/User_Timing_API">User Timing API</a></li> + <li><a href="/fr/docs/Web/API/Resource_Timing_API">Resource Timing API</a></li> </ul> diff --git a/files/fr/web/api/performance/mark/index.html b/files/fr/web/api/performance/mark/index.html new file mode 100644 index 0000000000..cdf21108b8 --- /dev/null +++ b/files/fr/web/api/performance/mark/index.html @@ -0,0 +1,91 @@ +--- +title: performance.mark() +slug: Web/API/Performance/mark +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/mark +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>mark()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} dans le <em>tampon d'entrée de performance</em> du navigateur avec le nom donné en argument.</p> + +<p>L'horodatage ainsi défini par l'application peut être récupéré par l'une des méthodes <code>getEntries*()</code> de l'interface {{domxref("Performance")}} ({{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}).</p> + +<p>La méthode <code>mark()</code> stocke ses données en interne sous la forme d'objets {{domxref("PerformanceEntry")}}.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + performance.mark(name); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Une chaîne de caractères ({{domxref("DOMString")}}) représentant le nom du marqueur. Si le nom donné à cette méthode existe déjà dans l'interface {{domxref("PerformanceTiming")}}, une exception {{jsxref("SyntaxError")}} est levée.</dd> +</dl> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Aucune.</p>> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre comment utiliser <code>mark()</code> pour créer et récupérer des entrées {{domxref("PerformanceMark")}}.</p> + +<pre class="brush:js">// Crée un ensemble de marqueurs. +performance.mark("squirrel"); +performance.mark("squirrel"); +performance.mark("monkey"); +performance.mark("monkey"); +performance.mark("dog"); +performance.mark("dog"); + +// Obtient toutes les entrées de PerformanceMark. +const allEntries = performance.getEntriesByType("mark"); +console.log(allEntries.length); +// 6 + +// Obtient toutes les entrées "monkey" de PerformanceMark. +const monkeyEntries = performance.getEntriesByName("monkey"); +console.log(monkeyEntries.length); +// 2 + +// Efface tous les marqueurs. +performance.clearMarks(); +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('User Timing Level 2', '#dom-performance-mark', 'mark()')}}</td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Clarification du modèle de traitement <code>mark()</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#dom-performance-mark', 'mark()')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.mark")}}</p> diff --git a/files/fr/web/api/performance/measure/index.html b/files/fr/web/api/performance/measure/index.html new file mode 100644 index 0000000000..5809124222 --- /dev/null +++ b/files/fr/web/api/performance/measure/index.html @@ -0,0 +1,110 @@ +--- +title: performance.measure() +slug: Web/API/Performance/measure +tags: +- API +- Method +- Méthode +- Reference +- Performance web +- Web Workers +translation_of: Web/API/Performance/measure +--- +<div>{{APIRef("User Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>measure()</code></strong> crée un {{domxref("DOMHighResTimeStamp", "timestamp")}} nommé dans le <em>tampon d'entrée de performance</em> du navigateur entre deux marqueurs, l'heure de début de navigation ou l'heure actuelle. Lors d'une mesure entre deux marqueurs, on aura un <em>marqueur de début</em> et un <em>marqueur de fin</em>. L'horodatage ainsi nommé est désigné comme une <em>mesure</em>.</p> + +<p>La mesure correspondante peut être récupérée par l'une des méthodes suivantes de l'interface {{domxref("Performance")}} : {{domxref("Performance.getEntries", "getEntries()")}}, {{domxref("Performance.getEntriesByName", "getEntriesByName()")}} ou {{domxref("Performance.getEntriesByType", "getEntriesByType()")}}.</p> + +<p>L'{{domxref("PerformanceEntry", "entrée de performance","",1)}} créée par <code>measure()</code> aura les valeurs de propriété suivantes :</p> + +<ul> + <li>{{domxref("PerformanceEntry.entryType","entryType")}} : <code>"measure"</code>.</li> + <li>{{domxref("PerformanceEntry.name","name")}} : le nom passé en argument lors de la création de la mesure (cf. ci-après).</li> + <li>{{domxref("PerformanceEntry.startTime","startTime")}} : fixé selon le marqueur de départ (type {{domxref("DOMHighResTimeStamp")}}).</li> + <li>{{domxref("PerformanceEntry.duration","duration")}} : fixé à un {{domxref("DOMHighResTimeStamp")}} qui correspond à la durée de la mesure (généralement, l'horodatage du marqueur de fin moins l'horodatage du marqueur de début).</li> +</ul> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + performance.measure(name); + performance.measure(name, startMark); + performance.measure(name, startMark, endMark); + performance.measure(name, undefined, endMark); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Une {{domxref("DOMString")}} représentant le nom de la mesure.</dd> + <dt><code>startMark</code> {{optional_inline}}</dt> + <dd>Une {{domxref("DOMString")}} représentant le nom du marqueur de départ de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, l'heure de début sera celle de la navigation.</dd> + <dt><code>endMark</code> {{optional_inline}}</dt> + <dd>Une {{domxref("DOMString")}} représentant le nom du marqueur de fin de la mesure. Peut également être le nom d'une propriété {{domxref("PerformanceTiming")}}. Si elle est omise, le temps actuel est utilisé.</dd> +</dl> + +<h3 id="Return_value">Valeur de retour</h3> + +<p>Aucune</p> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant montre comment <code>measure()</code> est utilisé pour créer une nouvelle <em>mesure</em> d'{{domxref("PerformanceEntry", "entrée de performance","",1)}} dans le tampon d'entrée de performance du navigateur.</p> + +<pre class="brush: js">const markerNameA = "example-marker-a" +const markerNameB = "example-marker-b" + +// Exécute des temporisations imbriquées et crée un PerformanceMark pour chacune d'entre elles. +performance.mark(markerNameA); +setTimeout(function() { + performance.mark(markerNameB); + setTimeout(function() { + + // Crée une variété de mesures. + performance.measure("mesure a à b", markerNameA, markerNameB); + performance.measure("mesure a à maintenant", markerNameA); + performance.measure("mesure du début de la navigation à b", undefined, markerNameB); + performance.measure("mesure du début de la navigation à maintenant"); + + // Sort toutes les mesures. + console.log(performance.getEntriesByType("measure")); + + // Enfin, nettoye les entrées. + performance.clearMarks(); + performance.clearMeasures(); + }, 1000); +}, 1000); +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('User Timing Level 2', '#dom-performance-measure', 'measure()')}} + </td> + <td>{{Spec2('User Timing Level 2')}}</td> + <td>Clarification du modèle de traitement de <code>mesure()</code>.</td> + </tr> + <tr> + <td>{{SpecName('User Timing', '#dom-performance-measure', 'measure()')}}</td> + <td>{{Spec2('User Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.measure")}}</p> diff --git a/files/fr/web/api/performance/memory/index.html b/files/fr/web/api/performance/memory/index.html new file mode 100644 index 0000000000..a98b747b49 --- /dev/null +++ b/files/fr/web/api/performance/memory/index.html @@ -0,0 +1,43 @@ +--- +title: performance.memory +slug: Web/API/Performance/memory +tags: + - API + - Reference + - Performance web +translation_of: Web/API/Performance/memory +--- +<p>{{APIRef}}</p> + +{{Non-standardGeneric('header')}} + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <em>timingInfo</em> = <em>performance</em>.memory +</pre> + +<h2 id="Attributes">Attributs</h2> + +<dl> + <dt><code>jsHeapSizeLimit</code></dt> + <dd>La taille maximale du tas, en octets, qui est disponible pour le contexte.</dd> + <dt><code>totalJSHeapSize</code></dt> + <dd>La taille totale du répertoire alloué, en octets.</dd> + <dt>usedJSHeapSize</dt> + <dd>Le segment actuellement actif du répertoire JS, en octets.</dd> +</dl> + +<h2 id="Specifications">Spécifications</h2> + +<p>Aucune</p> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.memory")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li> +</ul> diff --git a/files/fr/web/api/performance/navigation/index.html b/files/fr/web/api/performance/navigation/index.html index 7435d8c4ae..be37b1487a 100644 --- a/files/fr/web/api/performance/navigation/index.html +++ b/files/fr/web/api/performance/navigation/index.html @@ -1,52 +1,61 @@ --- -title: Performance.navigation +title: performance.navigation slug: Web/API/Performance/navigation tags: + - API + - Rétrocompatibilité + - Déprécié - HTTP - Performance - Propriété - - lecture seule + - Property + - Lecture seule + - Read-only + - Reference + - legacy translation_of: Web/API/Performance/navigation --- -<p>{{APIRef("Navigation Timing")}}</p> +<p>{{Deprecated_Header}}{{APIRef("Navigation Timing")}}</p> -<h2 id="Summary">Summary</h2> +<div class="notecard warning"> + <p>Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2 specification</a>.</p> +</div> + +<p class="seoSummary">L'ancienne propriété en lecture seule <strong><code>Performance.navigation</code></strong> renvoie un objet {{domxref("PerformanceNavigation")}} représentant le type de navigation qui se produit dans le contexte de navigation donné, comme le nombre de redirections nécessaires pour aller chercher la ressource.</p> -<p>La propriété en lecture seule <code><strong>Performance</strong></code><strong><code>.navigation</code></strong> permet d'accéder à un objet de type {{domxref("PerformanceNavigation")}} représentant la navigation qui a lieu dans le contexte courant, par êxemple, le nombre de redirections.</p> +{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} -<h2 id="Syntax">Syntax</h2> +<h2 id="Syntax">Syntaxe</h2> -<pre class="syntaxbox"><em>navObject</em> = <em>performance</em>.navigation;</pre> +<pre class="brush: js"> + <em>navObject</em> = <em>performance</em>.navigation; +</pre> -<h2 id="Specifications">Specifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <tbody> + <thead> <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> </tr> + </thead> + <tbody> <tr> <td>{{SpecName('Navigation Timing', '#sec-window.performance-attribute', 'Performance.navigation')}}</td> <td>{{Spec2('Navigation Timing')}}</td> - <td>Initial definition.</td> + <td>Définition initiale.</td> </tr> </tbody> </table> -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> -<div> - +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Performance.navigation")}}</p> -</div> -</div> -<h2 id="See_also">See also</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li>The {{domxref("Performance")}} interface it belongs to.</li> + <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li> </ul> diff --git a/files/fr/web/api/performance/now/index.html b/files/fr/web/api/performance/now/index.html index 6c325d6d4d..ae539c7f07 100644 --- a/files/fr/web/api/performance/now/index.html +++ b/files/fr/web/api/performance/now/index.html @@ -1,9 +1,10 @@ --- -title: Performance.now() +title: performance.now() slug: Web/API/Performance/now tags: - API - API Performance Web + - Method - Méthode - Performance - Reference @@ -11,67 +12,100 @@ translation_of: Web/API/Performance/now --- <p>{{APIRef("High Resolution Timing")}}</p> -<p>La méthode <code><strong>Performance.now()</strong></code> retourne un {{domxref("DOMHighResTimeStamp")}}, mesuré en millisecondes, avec une précision de 5 millième de milliseconde (5 microsecondes).</p> +<p class="seoSummary">La méthode <code><strong>Performance.now()</strong></code> retourne une valeur de type {{domxref("DOMHighResTimeStamp")}}, mesurée en millisecondes et avec une précision de 5 millièmes de milliseconde (5 microsecondes).</p> -<p> </p> +<p>{{AvailableInWorkers}}</p> -<p>La valeur retournée représente le temps écoulé depuis l'origine de temps.</p> +<p>La valeur retournée représente le temps écoulé depuis le <a href="/fr/docs/Web/API/DOMHighResTimeStamp#the_time_origin">temps d'origine</a>.</p> -<p>Gardez présents à l'esprit les points suivants :</p> +<p>Attention à garder à l'esprit les points suivants :</p> <ul> - <li>Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à <code>performance.now()</code> dans la fenêtre qui a créé ce worker. C'était auparavant la même chose que le <code>t0</code> du contexte principal, mais cela a été changé.</li> - <li>Dans les workers partagés ou de service, la valeur dans le worker peut être supérieure à celle du contexte principal, car cette fenêtre peut être créée après ces workers.</li> + <li>Dans les workers dédiés créés à partir d'un contexte {{domxref("Window")}}, la valeur dans le worker sera inférieure à celle obtenue par <code>performance.now()</code> exécuté dans la fenêtre ayant créé le worker. La fenêtre et le worker partageaient avant le même temps de référence <code>t0</code> à partir du contexte principal, mais cela a été changé.</li> + <li>Dans les workers partagés ou service sorkers, la valeur dans le worker peut être supérieure à celle du contexte principal, car la fenêtre pourra avoir été créée après ces workers.</li> </ul> -<p> </p> +<p>Il est important de garder à l'esprit que pour atténuer les menaces de sécurité potentielles telles que <a href="https://spectreattack.com/">Spectre</a>, les navigateurs arrondissent généralement la valeur retournée d'une certaine quantité afin d'être moins prévisible. Cela introduit intrinsèquement un degré d'imprécision en limitant la résolution ou la précision de la minuterie. Par exemple, Firefox arrondit le temps renvoyé à des incréments de 1 milliseconde.</p> -<h2 id="Syntaxe">Syntaxe</h2> +<p>La précision de la valeur retournée est susceptible de changer si/quand les problèmes de sécurité sont atténués par d'autres moyens.</p> -<div class="geckoVersionNote"> -<p class="syntaxbox">t = performance.now();</p> -</div> +<h2 id="Syntax">Syntaxe</h2> -<h2 id="Exemple">Exemple</h2> +<pre class="brush: js"> + t = performance.now(); +</pre> + +<h2 id="Example">Exemple</h2> -<pre class="brush: js">var t0 = performance.now(); -faireQuelqueChose(); -var t1 = performance.now(); -console.log("L'appel à faireQuelqueChose a pris " + (t1 - t0) + " millisecondes.") +<pre class="brush: js"> + var t0 = performance.now(); + doSomething(); + var t1 = performance.now(); + console.log("L'appel de doSomething a demandé " + (t1 - t0) + " millisecondes.") </pre> -<p>Contrairement aux autres données de temps disponibles en JavaScript (par exemple <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now" title="/en-US/docs/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), les horodatages retournés par <code>Performance.now()</code> ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.</p> +<p>Contrairement aux autres données de temps disponibles en JavaScript (par exemple <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/now"><code>Date.now</code></a>), les horodatages retournés par <code>Performance.now()</code> ne sont pas limités à une précision d'une milliseconde. Au contraire, ils représentent les temps comme des nombres flottants avec une précision pouvant aller jusqu'à une microseconde.</p> + +<p>Également contrairement à <code>Date.now()</code>, les valeurs retournées par <code>Performance.now() </code>sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, <code>performance.timing.navigationStart + performance.now()</code> serait approximativement égal à <code>Date.now().</code></p> + +<h2 id="Reduced_time_precision">Précision réduite du temps</h2> + +<p>Pour offrir une protection contre les attaques de temporisation et les empreintes digitales, la précision de <code>performance.now()</code> peut être arrondie en fonction des paramètres du navigateur. Dans Firefox, la préférence <code>privacy.reduceTimerPrecision</code> est activée par défaut et prend la valeur 1ms par défaut.</p> + +<pre class="brush: js">// précision temporelle réduite (1ms) dans Firefox 60 +performance.now(); +// 8781416 +// 8781815 +// 8782206 +// ... + +// précision du temps réduite avec `privacy.resistFingerprinting` activé +performance.now(); +// 8865400 +// 8866200 +// 8866700 +// ... +</pre> + +<p>Dans Firefox, vous pouvez également activer <code>privacy.resistFingerprinting</code> - cela change la précision à 100ms ou à la valeur de <code>privacy.resistFingerprinting.reduceTimerPrecision.microseconds</code> en fonction de la plus grande des deux.</p> + +<p>À partir de Firefox 79, les minuteurs haute résolution peuvent être utilisés si vous isolez votre document en utilisant les en-têtes {{HTTPHeader("Cross-Origin-Opener-Policy")}} et {{HTTPHeader("Cross-Origin-Embedder-Policy")}} :</p> + +<pre class="brush: plain">Cross-Origin-Opener-Policy: same-origin +Cross-Origin-Embedder-Policy: require-corp</pre> -<p>Également contrairement à <code>Date.now()</code>, les valeurs retournées par <code>Performance.now() </code>sont toujours incrémentées à un taux constant, indépendant de l'horloge du système (qui peut être ajustée manuellement ou par l'intermédiaire d'un logiciel comme NTP). Sinon, <code>performance.timing.navigationStart + performance.now()</code> sera approximativement égal à <code>Date.now().</code></p> +<p>Ces en-têtes garantissent qu'un document de premier niveau ne partage pas un groupe de contexte de navigation avec des documents d'origine croisée. Le processus COOP isole votre document et les attaquants potentiels ne peuvent pas accéder à votre objet global s'ils l'ouvrent dans une fenêtre contextuelle, ce qui permet d'éviter un ensemble d'attaques d'origine croisée appelées <a href="https://github.com/xsleaks/xsleaks">XS-Leaks</a>.</p> -<h2 id="Spécifications">Spécifications</h2> +<h2 id="Specifications">Spécifications</h2> <table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaire</th> - </tr> - <tr> - <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td> - <td>{{Spec2('Highres Time Level 2')}}</td> - <td>Définitions plus strictes des interfaces et des types.</td> - </tr> - <tr> - <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td> - <td>{{Spec2('Highres Time')}}</td> - <td>Définition initiale</td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Highres Time Level 2', '#dom-performance-now', 'performance.now()')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Définitions plus strictes des interfaces et des types.</td> + </tr> + <tr> + <td>{{SpecName('Highres Time', '#dom-performance-now', 'Performance.now()')}}</td> + <td>{{Spec2('Highres Time')}}</td> + <td>Définition initiale</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> <p>{{Compat("api.Performance.now")}}</p> -<h2 id="Voir_aussi">Voir aussi</h2> +<h2 id="See_also">Voir aussi</h2> <ul> - <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now" title="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">When milliseconds are not enough: performance.now() </a>de HTML5 Rocks.</li> + <li><a href="http://updates.html5rocks.com/2012/08/When-milliseconds-are-not-enough-performance-now">Quand les millisecondes ne suffisent pas : performance.now() <small>(en)</small></a> de HTML5 Rocks.</li> </ul> diff --git a/files/fr/web/api/performance/onresourcetimingbufferfull/index.html b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html new file mode 100644 index 0000000000..251d9666b9 --- /dev/null +++ b/files/fr/web/api/performance/onresourcetimingbufferfull/index.html @@ -0,0 +1,78 @@ +--- +title: performance.onresourcetimingbufferfull +slug: Web/API/Performance/onresourcetimingbufferfull +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/onresourcetimingbufferfull +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="seoSummary">La propriété <strong><code>onresourcetimingbufferfull</code></strong> est un gestionnaire d'événements qui sera appelé lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché. Ce déclenchement a lieu lorsque le tampon de performance de synchronisation des ressources du navigateur est plein.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + callback = performance.onresourcetimingbufferfull = buffer_full_cb; +</pre> + +<h3 id="Return_Value">Valeur de retour</h3> + +<dl> + <dt><code>callback</code></dt> + <dd>Un {{domxref("EventHandler")}} qui est invoqué lorsque l'événement <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a> est déclenché.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<p>L'exemple suivant définit une fonction de rappel sur la propriété <code>onresourcetimingbufferfull</code>.</p> + +<pre class="brush: js">function buffer_full(event) { + console.log("WARNING: Resource Timing Buffer is FULL!"); + performance.setResourceTimingBufferSize(200); +} +function init() { + // Définit un rappel si le tampon de ressources est rempli. + performance.onresourcetimingbufferfull = buffer_full; +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', + 'onresourcetimingbufferfull')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.onresourcetimingbufferfull")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>Événément <a href="/fr/docs/Web/API/Performance/resourcetimingbufferfull_event"><code>resourcetimingbufferfull</code></a></li> + <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}} + </li> + <li> + {{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}} + </li> +</ul> diff --git a/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html new file mode 100644 index 0000000000..08c648e36d --- /dev/null +++ b/files/fr/web/api/performance/resourcetimingbufferfull_event/index.html @@ -0,0 +1,86 @@ +--- +title: 'Performance : Événement resourcetimingbufferfull' +slug: Web/API/Performance/resourcetimingbufferfull_event +tags: + - API + - DOM + - Event + - Performance + - Reference + - Performance web + - onresourcetimingbufferfull +translation_of: Web/API/Performance/resourcetimingbufferfull_event +--- +<div>{{APIRef}}</div> + +<p class="seoSummary">L'événement <code>resourcetimingbufferfull</code> se déclenche lorsque la mémoire <a href="/fr/docs/Web/API/Performance/setResourceTimingBufferSize">tampon de synchronisation des ressources</a> du navigateur est pleine.</p> + +<table class="properties"> + <tbody> + <tr> + <th scope="row">Propagation</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Annulable</th> + <td>Oui</td> + </tr> + <tr> + <th scope="row">Interface</th> + <td>{{domxref("Event")}}</td> + </tr> + <tr> + <th scope="row">Propriété pour le gestionnaire d'événements correspondant</th> + <td>{{domxref("Performance.onresourcetimingbufferfull", "onresourcetimingbufferfull")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Examples">Exemples</h2> + +<p>L'exemple suivant définit une fonction de rappel sur la propriété <code>onresourcetimingbufferfull</code>.</p> + +<pre class="brush: js">function buffer_full(event) { + console.log("AVERTISSEMENT : La mémoire tampon des ressources est COMPLÈTE !"); + performance.setResourceTimingBufferSize(200); +} +function init() { + // Définit un rappel si le tampon de ressources est rempli. + performance.onresourcetimingbufferfull = buffer_full; +} +<body onload="init()"></pre> + +<p>Notez que vous pouvez également configurer le gestionnaire à l'aide de la fonction addEventListener() :</p> + +<pre class="brush: js">performance.addEventListener('resourcetimingbufferfull', buffer_full); +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Resource Timing', '#dom-performance-onresourcetimingbufferfull', 'onresourcetimingbufferfull')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initialen.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.resourcetimingbufferfull_event")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>{{domxref("Performance.clearResourceTimings","Performance.clearResourceTimings()")}}</li> + <li>{{domxref("Performance.setResourceTimingBufferSize","Performance.setResourceTimingBufferSize()")}}</li> +</ul> diff --git a/files/fr/web/api/performance/setresourcetimingbuffersize/index.html b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html new file mode 100644 index 0000000000..2f5d479c31 --- /dev/null +++ b/files/fr/web/api/performance/setresourcetimingbuffersize/index.html @@ -0,0 +1,76 @@ +--- +title: performance.setResourceTimingBufferSize() +slug: Web/API/Performance/setResourceTimingBufferSize +tags: +- API +- Method +- Méthode +- Reference +- Performance web +translation_of: Web/API/Performance/setResourceTimingBufferSize +--- +<div>{{APIRef("Resource Timing API")}}</div> + +<p class="seoSummary">La méthode <strong><code>setResourceTimingBufferSize()</code></strong> définit la taille du tampon mémoire du navigateur dans lequel sont stockés les objets de mesures de performance de type <code>"resource"</code> (voir {{domxref("PerformanceEntry.entryType", "entryType")}}).</p> + +<p>La taille recommandée du tampon de synchronisation des ressources d'un navigateur est au moins 150 objets <code>{{domxref("PerformanceEntry")}}</code>.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <em>performance</em>.setResourceTimingBufferSize(maxSize); +</pre> + +<h3 id="Arguments">Arguments</h3> + +<dl> + <dt><code>maxSize</code></dt> + <dd>Un nombre (cf. {{jsxref("Number")}}) représentant le nombre maximal d'objets {{domxref("PerformanceEntry", "d'entrée de performance","",1)}} avec le type <code>"resource"</code> que le navigateur doit contenir dans le tampon correspondant.</dd> +</dl> + +<h3 id="Return_Value">Valeur de retour</h3> + +<p>Aucune.</p> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">function setResourceTimingBufferSize(maxSize) { + if (performance === undefined) { + log("Le navigateur ne prend pas en charge les performances Web"); + return; + } + var supported = typeof performance.setResourceTimingBufferSize == "function"; + if (supported) { + log("... Performance.setResourceTimingBufferSize() = Oui"); + performance.setResourceTimingBufferSize(maxSize); + } else { + log("... Performance.setResourceTimingBufferSize() = NON pris en charge"); + } +} +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Resource Timing', '#dom-performance-setresourcetimingbuffersize', + 'setResourceTimingBufferSize()')}}</td> + <td>{{Spec2('Resource Timing')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.setResourceTimingBufferSize")}}</p> diff --git a/files/fr/web/api/performance/timeorigin/index.html b/files/fr/web/api/performance/timeorigin/index.html new file mode 100644 index 0000000000..77ab71c3b6 --- /dev/null +++ b/files/fr/web/api/performance/timeorigin/index.html @@ -0,0 +1,50 @@ +--- +title: performance.timeOrigin +slug: Web/API/Performance/timeOrigin +tags: + - API + - Experimental + - High Resolution Time API + - Performance + - Property + - Propriété + - Reference + - timeOrigin +translation_of: Web/API/Performance/getEntriesByName +--- +<p>{{SeeCompatTable}}{{APIRef("High Resolution Time")}}</p> + +<p class="seoSummary">La propriété en lecture seule <strong><code>timeOrigin</code></strong> de l'interface {{domxref("Performance")}} renvoie l'horodatage haute résolution de l'heure de début de la mesure de performance.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + var timeOrigin = performance.timeOrigin +</pre> + +<h3 id="Value">Valeur</h3> + +<p>Un horodatage haute résolution (voir le type <a href="/fr/docs/Web/API/DOMHighResTimeStamp"><code>DOMHighResTimeStamp</code></a>).</p> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Highres Time Level 2','#timeorigin-attribute','timeOrigin')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.timeOrigin")}}</p> diff --git a/files/fr/web/api/performance/timing/index.html b/files/fr/web/api/performance/timing/index.html new file mode 100644 index 0000000000..cc26164e41 --- /dev/null +++ b/files/fr/web/api/performance/timing/index.html @@ -0,0 +1,60 @@ +--- +title: performance.timing +slug: Web/API/Performance/timing +tags: + - API + - Rétrocompatibilité + - Déprécié + - Navigation Timing + - Performance + - Property + - Propriété + - Read-only + - Lecture seule + - Reference +translation_of: Web/API/Performance/timing +--- +<p>{{deprecated_header}}{{APIRef("Navigation Timing")}}</p> + +<div class="notecard warning"> + <p>Cette propriété est dépréciée dans la spécification <a href="https://w3c.github.io/navigation-timing/#obsolete">Navigation Timing Level 2</a>. Veuillez utiliser l'interface {{domxref("PerformanceNavigationTiming")}} à la place.</p> +</div> + +<p class="seoSummary">L'ancienne propriété <strong><code>Performance.timing</code></strong> renvoie un objet {{domxref("PerformanceTiming")}} en lecture seule contenant des informations de performance liées à la latence.</p> + +{{warning("Cette propriété n'est pas disponible dans les Web Workers.")}} + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + <var>timingInfo</var> = performance.timing; +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Navigation Timing Level 2', '#obsolete')}}</td> + <td>{{Spec2('Navigation Timing Level 2')}}</td> + <td>Définition initiale.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.timing")}}</p> + +<h2 id="See_also">Voir aussi</h2> + +<ul> + <li>L'interface {{domxref("Performance")}} à laquelle il appartient.</li> +</ul> diff --git a/files/fr/web/api/performance/tojson/index.html b/files/fr/web/api/performance/tojson/index.html new file mode 100644 index 0000000000..6cf32a8077 --- /dev/null +++ b/files/fr/web/api/performance/tojson/index.html @@ -0,0 +1,64 @@ +--- +title: performance.toJSON() +slug: Web/API/Performance/toJSON +tags: + - API + - Method + - Méthode + - Performance Web + - Référence +translation_of: Web/API/Performance/toJSON +--- +<div>{{APIRef("High Resolution Timing")}}</div> + +<p class="seoSummary">La méthode <strong><code>toJSON()</code></strong> de l'interface {{domxref("Performance")}} est un sérialiseur standard : elle renvoie une représentation JSON des propriétés de l'objet performance.</p> + +<p>{{AvailableInWorkers}}</p> + +<h2 id="Syntax">Syntaxe</h2> + +<pre class="brush: js"> + myPerf = performance.toJSON() +</pre> + +<h3 id="Arguments">Arguments</h3> + +<p>Aucun</p> + +<h3 id="Return_value">Valeur de retour</h3> + +<dl> + <dt><code>myPerf</code></dt> + <dd>Un objet JSON qui est la sérialisation de l'objet {{domxref("Performance")}}.</dd> +</dl> + +<h2 id="Example">Exemple</h2> + +<pre class="brush: js">var js; +js = window.performance.toJSON(); +console.log("json = " + JSON.stringify(js)); +</pre> + +<h2 id="Specifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">Statut</th> + <th scope="col">Commentaire</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Highres Time Level 2', '#dom-performance-tojson', 'toJSON() + serializer')}}</td> + <td>{{Spec2('Highres Time Level 2')}}</td> + <td>Définition de <code>toJson()</code>.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2> + +<p>{{Compat("api.Performance.toJSON")}}</p> diff --git a/files/ja/_redirects.txt b/files/ja/_redirects.txt index 9a1cd3bdfd..9eace6107e 100644 --- a/files/ja/_redirects.txt +++ b/files/ja/_redirects.txt @@ -46,7 +46,7 @@ /ja/docs/API/Document/documentURI /ja/docs/Web/API/Document/documentURI /ja/docs/API/Document/documentURIObject /ja/docs/Web/API/Document/documentURIObject /ja/docs/API/Document/domConfig /ja/docs/Web/API/Document -/ja/docs/API/Document/elementFromPoint /ja/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/ja/docs/API/Document/elementFromPoint /ja/docs/Web/API/Document/elementFromPoint /ja/docs/API/Document/embeds /ja/docs/Web/API/Document/embeds /ja/docs/API/Document/enableStyleSheetsForSet /ja/docs/Web/API/Document/enableStyleSheetsForSet /ja/docs/API/Document/evaluate /ja/docs/Web/API/Document/evaluate @@ -1435,7 +1435,7 @@ /ja/docs/DOM/document.documentURI /ja/docs/Web/API/Document/documentURI /ja/docs/DOM/document.documentURIObject /ja/docs/Web/API/Document/documentURIObject /ja/docs/DOM/document.domConfig /ja/docs/Web/API/Document -/ja/docs/DOM/document.elementFromPoint /ja/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/ja/docs/DOM/document.elementFromPoint /ja/docs/Web/API/Document/elementFromPoint /ja/docs/DOM/document.embeds /ja/docs/Web/API/Document/embeds /ja/docs/DOM/document.fgColor /ja/docs/Web/API/Document/fgColor /ja/docs/DOM/document.firstChild /ja/docs/Web/API/Node/firstChild @@ -1770,7 +1770,7 @@ /ja/docs/DOM:document.createEvent /ja/docs/Web/API/Document/createEvent /ja/docs/DOM:document.documentElement /ja/docs/Web/API/Document/documentElement /ja/docs/DOM:document.documentURIObject /ja/docs/Web/API/Document/documentURIObject -/ja/docs/DOM:document.elementFromPoint /ja/docs/Web/API/DocumentOrShadowRoot/elementFromPoint +/ja/docs/DOM:document.elementFromPoint /ja/docs/Web/API/Document/elementFromPoint /ja/docs/DOM:document.firstChild /ja/docs/Web/API/Node/firstChild /ja/docs/DOM:document.forms /ja/docs/Web/API/Document/forms /ja/docs/DOM:document.getElementById /ja/docs/Web/API/Document/getElementById @@ -3746,11 +3746,13 @@ /ja/docs/Web/API/Document/async /ja/docs/Web/API/XMLDocument/async /ja/docs/Web/API/Document/defaultView/storage_event /ja/docs/Web/API/Window/storage_event /ja/docs/Web/API/Document/domConfig /ja/docs/Web/API/Document -/ja/docs/Web/API/Document/elementFromPoint /ja/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /ja/docs/Web/API/Document/inputEncoding /ja/docs/conflicting/Web/API/Document/characterSet /ja/docs/Web/API/Document/onselectionchange /ja/docs/Web/API/GlobalEventHandlers/onselectionchange +/ja/docs/Web/API/DocumentOrShadowRoot /ja/docs/orphaned/Web/API/DocumentOrShadowRoot /ja/docs/Web/API/DocumentOrShadowRoot/activeElement /ja/docs/Web/API/Document/activeElement /ja/docs/Web/API/DocumentOrShadowRoot/caretPositionFromPoint /ja/docs/Web/API/Document/caretPositionFromPoint +/ja/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /ja/docs/Web/API/Document/elementFromPoint +/ja/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint /ja/docs/Web/API/Document/elementsFromPoint /ja/docs/Web/API/DocumentOrShadowRoot/fullscreenElement /ja/docs/Web/API/Document/fullscreenElement /ja/docs/Web/API/DocumentOrShadowRoot/getAnimations /ja/docs/Web/API/Document/getAnimations /ja/docs/Web/API/DocumentOrShadowRoot/getSelection /ja/docs/Web/API/Document/getSelection diff --git a/files/ja/_wikihistory.json b/files/ja/_wikihistory.json index 6a622d201e..0cff7990b3 100644 --- a/files/ja/_wikihistory.json +++ b/files/ja/_wikihistory.json @@ -12725,18 +12725,6 @@ "AshfaqHossain" ] }, - "Web/API/DocumentOrShadowRoot": { - "modified": "2020-10-15T22:12:34.663Z", - "contributors": [ - "mfuji09" - ] - }, - "Web/API/DocumentOrShadowRoot/elementsFromPoint": { - "modified": "2020-10-15T22:29:40.404Z", - "contributors": [ - "mfuji09" - ] - }, "Web/API/DocumentType": { "modified": "2020-10-15T22:09:56.256Z", "contributors": [ @@ -52764,19 +52752,6 @@ "Okome" ] }, - "Web/API/DocumentOrShadowRoot/elementFromPoint": { - "modified": "2019-03-23T23:50:29.105Z", - "contributors": [ - "mfuji09", - "fscholz", - "khalid32", - "ethertank", - "Mgjbot", - "Shoot", - "Potappo", - "Norah" - ] - }, "conflicting/Web/API/DocumentOrShadowRoot/getSelection": { "modified": "2019-03-23T23:38:33.748Z", "contributors": [ @@ -53496,5 +53471,30 @@ "contributors": [ "eltociear" ] + }, + "Web/API/Document/elementFromPoint": { + "modified": "2019-03-23T23:50:29.105Z", + "contributors": [ + "mfuji09", + "fscholz", + "khalid32", + "ethertank", + "Mgjbot", + "Shoot", + "Potappo", + "Norah" + ] + }, + "Web/API/Document/elementsFromPoint": { + "modified": "2020-10-15T22:29:40.404Z", + "contributors": [ + "mfuji09" + ] + }, + "orphaned/Web/API/DocumentOrShadowRoot": { + "modified": "2020-10-15T22:12:34.663Z", + "contributors": [ + "mfuji09" + ] } }
\ No newline at end of file diff --git a/files/ja/web/api/documentorshadowroot/index.html b/files/ja/orphaned/web/api/documentorshadowroot/index.html index 41a6afbfa8..6f4eceb73f 100644 --- a/files/ja/web/api/documentorshadowroot/index.html +++ b/files/ja/orphaned/web/api/documentorshadowroot/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot -slug: Web/API/DocumentOrShadowRoot +slug: orphaned/Web/API/DocumentOrShadowRoot tags: - API - Document @@ -10,6 +10,7 @@ tags: - インターフェイス - シャドウ DOM translation_of: Web/API/DocumentOrShadowRoot +original_slug: Web/API/DocumentOrShadowRoot --- <div>{{APIRef("Web Components")}}</div> diff --git a/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html b/files/ja/web/api/document/elementfrompoint/index.html index e041d4592d..662260e4ae 100644 --- a/files/ja/web/api/documentorshadowroot/elementfrompoint/index.html +++ b/files/ja/web/api/document/elementfrompoint/index.html @@ -1,13 +1,13 @@ --- title: document.elementFromPoint -slug: Web/API/DocumentOrShadowRoot/elementFromPoint +slug: Web/API/Document/elementFromPoint tags: - DOM - Gecko - Gecko DOM Reference translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint -original_slug: Web/API/Document/elementFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <div> {{ApiRef()}} {{Fx_minversion_header(3)}}</div> diff --git a/files/ja/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/ja/web/api/document/elementsfrompoint/index.html index a5337f576f..a885ce197f 100644 --- a/files/ja/web/api/documentorshadowroot/elementsfrompoint/index.html +++ b/files/ja/web/api/document/elementsfrompoint/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot.elementsFromPoint() -slug: Web/API/DocumentOrShadowRoot/elementsFromPoint +slug: Web/API/Document/elementsFromPoint tags: - API - Document @@ -13,6 +13,7 @@ tags: - shadow dom - メソッド translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- <div>{{APIRef("DOM")}}{{SeeCompatTable}}</div> diff --git a/files/ko/_redirects.txt b/files/ko/_redirects.txt index 8d61ce0196..1f8d05cf00 100644 --- a/files/ko/_redirects.txt +++ b/files/ko/_redirects.txt @@ -626,6 +626,7 @@ /ko/docs/Web/API/Document/defaultView/popstate_event /ko/docs/Web/API/Window/popstate_event /ko/docs/Web/API/Document/defaultView/resize_event /ko/docs/Web/API/Window/resize_event /ko/docs/Web/API/Document/drag_이벤트 /ko/docs/Web/API/Document/drag_event +/ko/docs/Web/API/DocumentOrShadowRoot /ko/docs/orphaned/Web/API/DocumentOrShadowRoot /ko/docs/Web/API/DocumentOrShadowRoot/activeElement /ko/docs/Web/API/Document/activeElement /ko/docs/Web/API/DocumentOrShadowRoot/getSelection /ko/docs/Web/API/Document/getSelection /ko/docs/Web/API/DocumentOrShadowRoot/styleSheets /ko/docs/Web/API/Document/styleSheets diff --git a/files/ko/_wikihistory.json b/files/ko/_wikihistory.json index c7cbc472de..cb68777e6f 100644 --- a/files/ko/_wikihistory.json +++ b/files/ko/_wikihistory.json @@ -3613,13 +3613,6 @@ "zzoPark" ] }, - "Web/API/DocumentOrShadowRoot": { - "modified": "2020-10-15T22:11:35.284Z", - "contributors": [ - "DeadIntegral", - "Sheppy" - ] - }, "Web/API/DocumentType": { "modified": "2020-10-15T22:10:02.690Z", "contributors": [ @@ -18704,5 +18697,12 @@ "contributors": [ "x86kernel" ] + }, + "orphaned/Web/API/DocumentOrShadowRoot": { + "modified": "2020-10-15T22:11:35.284Z", + "contributors": [ + "DeadIntegral", + "Sheppy" + ] } }
\ No newline at end of file diff --git a/files/ko/web/api/documentorshadowroot/index.html b/files/ko/orphaned/web/api/documentorshadowroot/index.html index 74a6296b29..526f6687ad 100644 --- a/files/ko/web/api/documentorshadowroot/index.html +++ b/files/ko/orphaned/web/api/documentorshadowroot/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot -slug: Web/API/DocumentOrShadowRoot +slug: orphaned/Web/API/DocumentOrShadowRoot tags: - API - Document @@ -12,6 +12,7 @@ tags: - TopicStub - shadow dom translation_of: Web/API/DocumentOrShadowRoot +original_slug: Web/API/DocumentOrShadowRoot --- <div>{{APIRef("Web Components")}}</div> diff --git a/files/pt-br/_redirects.txt b/files/pt-br/_redirects.txt index 85c7b192d6..dc89b12bc6 100644 --- a/files/pt-br/_redirects.txt +++ b/files/pt-br/_redirects.txt @@ -554,8 +554,8 @@ /pt-BR/docs/Web/API/Document/async /pt-BR/docs/Web/API/XMLDocument/async /pt-BR/docs/Web/API/Document/defaultView/popstate_event /pt-BR/docs/Web/API/Window/popstate_event /pt-BR/docs/Web/API/Document/defaultView/resize_event /pt-BR/docs/Web/API/Window/resize_event -/pt-BR/docs/Web/API/Document/elementFromPoint /pt-BR/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /pt-BR/docs/Web/API/DocumentOrShadowRoot/activeElement /pt-BR/docs/Web/API/Document/activeElement +/pt-BR/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /pt-BR/docs/Web/API/Document/elementFromPoint /pt-BR/docs/Web/API/DocumentOrShadowRoot/getSelection /pt-BR/docs/Web/API/Document/getSelection /pt-BR/docs/Web/API/DocumentoXML /pt-BR/docs/Web/API/XMLDocument /pt-BR/docs/Web/API/Element.addEventListener /pt-BR/docs/Web/API/EventTarget/addEventListener diff --git a/files/pt-br/_wikihistory.json b/files/pt-br/_wikihistory.json index fc9965ff16..75facc48d9 100644 --- a/files/pt-br/_wikihistory.json +++ b/files/pt-br/_wikihistory.json @@ -16958,12 +16958,6 @@ "Fernandolrs" ] }, - "Web/API/DocumentOrShadowRoot/elementFromPoint": { - "modified": "2019-03-23T22:29:17.399Z", - "contributors": [ - "cezaraugusto" - ] - }, "Web/API/HTMLElement/accessKey": { "modified": "2019-03-23T22:27:15.059Z", "contributors": [ @@ -17367,5 +17361,11 @@ "contributors": [ "expalmer" ] + }, + "Web/API/Document/elementFromPoint": { + "modified": "2019-03-23T22:29:17.399Z", + "contributors": [ + "cezaraugusto" + ] } }
\ No newline at end of file diff --git a/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html b/files/pt-br/web/api/document/elementfrompoint/index.html index 912dd85e80..2b97e74bea 100644 --- a/files/pt-br/web/api/documentorshadowroot/elementfrompoint/index.html +++ b/files/pt-br/web/api/document/elementfrompoint/index.html @@ -1,6 +1,6 @@ --- title: Document.elementFromPoint() -slug: Web/API/DocumentOrShadowRoot/elementFromPoint +slug: Web/API/Document/elementFromPoint tags: - API - CSSOM View @@ -10,7 +10,7 @@ tags: - Reference translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint -original_slug: Web/API/Document/elementFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <div>{{APIRef("DOM")}}</div> diff --git a/files/zh-cn/_redirects.txt b/files/zh-cn/_redirects.txt index 3908924a1b..4dd016de6b 100644 --- a/files/zh-cn/_redirects.txt +++ b/files/zh-cn/_redirects.txt @@ -1483,15 +1483,16 @@ /zh-CN/docs/Web/API/Document/defaultView/resize_event /zh-CN/docs/Web/API/Window/resize_event /zh-CN/docs/Web/API/Document/defaultView/storage_event /zh-CN/docs/Web/API/Window/storage_event /zh-CN/docs/Web/API/Document/domConfig /zh-CN/docs/Web/API/Document -/zh-CN/docs/Web/API/Document/elementFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementFromPoint -/zh-CN/docs/Web/API/Document/elementsFromPoint /zh-CN/docs/conflicting/Web/API/DocumentOrShadowRoot/elementsFromPoint /zh-CN/docs/Web/API/Document/inputEncoding /zh-CN/docs/conflicting/Web/API/Document/characterSet /zh-CN/docs/Web/API/Document/mozFullScreen /zh-CN/docs/Web/API/Document/fullscreen /zh-CN/docs/Web/API/Document/mozFullScreenElement /zh-CN/docs/Web/API/Document/fullscreenElement /zh-CN/docs/Web/API/Document/mozFullScreenEnabled /zh-CN/docs/Web/API/Document/fullscreenEnabled /zh-CN/docs/Web/API/Document/onreadystatechange /en-US/docs/Web/API/Document/readystatechange_event /zh-CN/docs/Web/API/Document/rouchmove_event /zh-CN/docs/Web/API/Document/touchmove_event +/zh-CN/docs/Web/API/DocumentOrShadowRoot /zh-CN/docs/orphaned/Web/API/DocumentOrShadowRoot /zh-CN/docs/Web/API/DocumentOrShadowRoot/activeElement /zh-CN/docs/Web/API/Document/activeElement +/zh-CN/docs/Web/API/DocumentOrShadowRoot/elementFromPoint /zh-CN/docs/Web/API/Document/elementFromPoint +/zh-CN/docs/Web/API/DocumentOrShadowRoot/elementsFromPoint /zh-CN/docs/Web/API/Document/elementsFromPoint /zh-CN/docs/Web/API/DocumentOrShadowRoot/fullscreenElement /zh-CN/docs/Web/API/Document/fullscreenElement /zh-CN/docs/Web/API/DocumentOrShadowRoot/getSelection /zh-CN/docs/Web/API/Document/getSelection /zh-CN/docs/Web/API/DocumentOrShadowRoot/pointerLockElement /zh-CN/docs/Web/API/Document/pointerLockElement diff --git a/files/zh-cn/_wikihistory.json b/files/zh-cn/_wikihistory.json index 524f81d1c5..5bc5b5ff3b 100644 --- a/files/zh-cn/_wikihistory.json +++ b/files/zh-cn/_wikihistory.json @@ -10362,28 +10362,6 @@ "eventao" ] }, - "Web/API/DocumentOrShadowRoot": { - "modified": "2020-10-15T21:55:35.186Z", - "contributors": [ - "RainSlide", - "bei6", - "iainreid629" - ] - }, - "Web/API/DocumentOrShadowRoot/elementFromPoint": { - "modified": "2020-11-25T12:47:25.249Z", - "contributors": [ - "imgss", - "Bayes" - ] - }, - "Web/API/DocumentOrShadowRoot/elementsFromPoint": { - "modified": "2020-10-15T21:55:33.567Z", - "contributors": [ - "fscholz", - "1Cr18Ni9" - ] - }, "Web/API/DocumentTouch": { "modified": "2019-03-23T22:57:10.414Z", "contributors": [ @@ -50798,5 +50776,27 @@ "contributors": [ "WuCongMan" ] + }, + "Web/API/Document/elementFromPoint": { + "modified": "2020-11-25T12:47:25.249Z", + "contributors": [ + "imgss", + "Bayes" + ] + }, + "Web/API/Document/elementsFromPoint": { + "modified": "2020-10-15T21:55:33.567Z", + "contributors": [ + "fscholz", + "1Cr18Ni9" + ] + }, + "orphaned/Web/API/DocumentOrShadowRoot": { + "modified": "2020-10-15T21:55:35.186Z", + "contributors": [ + "RainSlide", + "bei6", + "iainreid629" + ] } }
\ No newline at end of file diff --git a/files/zh-cn/web/api/documentorshadowroot/index.html b/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html index 0e3dd27717..cc18771f80 100644 --- a/files/zh-cn/web/api/documentorshadowroot/index.html +++ b/files/zh-cn/orphaned/web/api/documentorshadowroot/index.html @@ -1,6 +1,6 @@ --- title: DocumentOrShadowRoot -slug: Web/API/DocumentOrShadowRoot +slug: orphaned/Web/API/DocumentOrShadowRoot tags: - API - DocumentOrShadowRoot @@ -10,6 +10,7 @@ tags: - TopicStub - shadow dom translation_of: Web/API/DocumentOrShadowRoot +original_slug: Web/API/DocumentOrShadowRoot --- <div>{{APIRef("Web Components")}}</div> diff --git a/files/zh-cn/web/api/documentorshadowroot/elementfrompoint/index.html b/files/zh-cn/web/api/document/elementfrompoint/index.html index e7e96436dc..5a0cdd7ffc 100644 --- a/files/zh-cn/web/api/documentorshadowroot/elementfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementfrompoint/index.html @@ -1,7 +1,8 @@ --- title: DocumentOrShadowRoot.elementFromPoint() -slug: Web/API/DocumentOrShadowRoot/elementFromPoint +slug: Web/API/Document/elementFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <p>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</p> diff --git a/files/zh-cn/web/api/documentorshadowroot/elementsfrompoint/index.html b/files/zh-cn/web/api/document/elementsfrompoint/index.html index 6036115eaf..bea911988b 100644 --- a/files/zh-cn/web/api/documentorshadowroot/elementsfrompoint/index.html +++ b/files/zh-cn/web/api/document/elementsfrompoint/index.html @@ -1,7 +1,8 @@ --- title: DocumentOrShadowRoot.elementsFromPoint() -slug: Web/API/DocumentOrShadowRoot/elementsFromPoint +slug: Web/API/Document/elementsFromPoint translation_of: Web/API/DocumentOrShadowRoot/elementsFromPoint +original_slug: Web/API/DocumentOrShadowRoot/elementsFromPoint --- <p>{{APIRef("Shadow DOM")}}{{SeeCompatTable}}</p> |