From f360338860b41a2f6e823ea2b5af59cfb7bdb3a6 Mon Sep 17 00:00:00 2001
From: Carolyn Wu <87150472+cw118@users.noreply.github.com>
Date: Thu, 6 Jan 2022 01:55:56 -0500
Subject: Fix external images, some link flaws, embedlivesample args (#3498)

Fixes occurences in the French "Learn" section
---
 .../events/bubbling-capturing-fr.png               | Bin 0 -> 12795 bytes
 .../javascript/building_blocks/events/index.md     |  69 ++++++++++-----------
 2 files changed, 32 insertions(+), 37 deletions(-)
 create mode 100644 files/fr/learn/javascript/building_blocks/events/bubbling-capturing-fr.png

(limited to 'files/fr/learn/javascript')

diff --git a/files/fr/learn/javascript/building_blocks/events/bubbling-capturing-fr.png b/files/fr/learn/javascript/building_blocks/events/bubbling-capturing-fr.png
new file mode 100644
index 0000000000..e69523d3d9
Binary files /dev/null and b/files/fr/learn/javascript/building_blocks/events/bubbling-capturing-fr.png differ
diff --git a/files/fr/learn/javascript/building_blocks/events/index.md b/files/fr/learn/javascript/building_blocks/events/index.md
index 0f5ea11526..1853289307 100644
--- a/files/fr/learn/javascript/building_blocks/events/index.md
+++ b/files/fr/learn/javascript/building_blocks/events/index.md
@@ -33,7 +33,7 @@ Les événements sont des actions ou des occurrences qui se produisent dans le s
 
 ## Une série d'événements heureux
 
-Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une  action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.
+Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez — le système déclenche un signal quelconque lorsqu'un événement se produit, et fournit également un mécanisme par lequel une action est exécutée automatiquement (p.ex. un code en cours d'exécution) lorsque l'événement se produit. Par exemple, dans un aéroport, lorsque la piste est libre pour qu'un avion décolle, un signal est communiqué au pilote et, par conséquent, il commence à piloter l'avion.
 
 ![](MDN-mozilla-events-runway.png)
 
@@ -51,11 +51,11 @@ Vous vous en rendrez compte (notamment en jetant un coup d'œil à la section MD
 
 Chaque événement disponible a un **gestionnaire d'événement**, qui est un bloc de code (généralement une fonction JavaScript définie par l'utilisateur) qui sera exécuté lorsque l'événement se déclenchera. Lorsqu'un tel bloc de code est défini pour être exécuté en réponse à un déclenchement d'événement, nous disons que nous **enregistrons un gestionnaire d'événements**. Notez que les gestionnaires d'événements sont parfois appelés **écouteurs d'événements** - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble. L'écouteur écoute l'événement qui se produit et le gestionnaire est le code qui est exécuté en réponse à ce qui se passe.
 
-> **Note :** il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur
+> **Note :** il est important de noter que les événements web ne font pas partie du langage du noyau JavaScript — ils sont définis comme faisant partie des APIs JavaScript intégrées du navigateur
 
 ### Un exemple simple
 
-Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("bouton")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:
+Regardons un exemple simple pour expliquer ce que nous entendons ici. Vous avez déjà utilisé des événements et des gestionnaires d'événements dans de nombreux exemples de ce cours, mais récapitulons simplement pour consolider nos connaissances. Dans l'exemple suivant, nous avons un {{htmlelement ("button")}} unique, qui, lorsqu'il est pressé, fera passer l'arrière-plan à une couleur aléatoire:
 
 ```html
 <button>Change color</button>
@@ -80,9 +80,7 @@ btn.onclick = function() {
 }
 ```
 
-
-
-Dans ce code, nous stockons une référence au bouton dans une variable appelée btn, en utilisant la fonction {{domxref ("Document.querySelector ()")}}. Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable `btn` pointe sur un élément `<button>` , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété `onclick`   du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan `<body>` .
+Dans ce code, nous stockons une référence au bouton dans une variable appelée `btn`, en utilisant la fonction [`Document.querySelector()`](/fr/docs/Web/API/Document/querySelector). Nous définissons également une fonction qui renvoie un nombre aléatoire. La troisième partie du code est le gestionnaire d'événement. La variable `btn` pointe sur un élément `<button>` , et ce type d'objet a un certain nombre d'événements qui peuvent être déclenchés, et par conséquent, des gestionnaires d'événements sont disponibles. Nous sommes à l'écoute du déclenchement de l'événement click, en définissant la propriété `onclick` du gestionnaire d'événements comme une fonction anonyme contenant du code qui génère une couleur RVB aléatoire et lui affecte la couleur d'arrière-plan `<body>` .
 
 Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément `<button>`, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.
 
@@ -96,7 +94,7 @@ Une autre chose qui mérite d'être mentionnée à ce stade est que les événem
 
 Par exemple, [Node.js](/fr/docs/Learn/Server-side/Express_Nodejs) est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur. Le modèle [Node.js event model](https://nodejs.org/docs/latest-v5.x/api/events.html) s'appuie sur des écouteurs pour écouter les événements et des émetteurs pour générer des événements périodiquement — bien qu'il ne le semble pas à première vue, le code est très différent, en particulier lorsqu'il utilise des fonctions comme `on()` pour enregistrer un écouteur d'événement, et `once()` pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document [HTTP connect event docs](https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect) propose un bon exemple d'utilisation.
 
-Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée [WebExtensions](/fr/Add-ons/WebExtensions). Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.`onMessage` plutôt que `onmessage`), et doivent êtres combinés à la fonction `addListener`. Jetez un oeil à la page [runtime.onMessage page](/fr/Add-ons/WebExtensions/API/runtime/onMessage) pour voir un exemple.
+Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs — comme améliorations de la fonctionnalité du navigateur — à l'aide d'une technologie appelée [WebExtensions](/fr/docs/Mozilla/Add-ons/WebExtensions). Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent — les écouteurs d'événements sont sensibles à la casse (p.ex.`onMessage` plutôt que `onmessage`), et doivent êtres combinés à la fonction `addListener`. Jetez un oeil à la page [runtime.onMessage page](/fr/docs/Mozilla/Add-ons/WebExtensions/API/runtime/onMessage) pour voir un exemple.
 
 Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage; nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.
 
@@ -117,9 +115,9 @@ btn.onclick = function() {
 }
 ```
 
-La propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick) est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. [`btn.textContent`](/fr/docs/Web/API/Node/textContent), ou [`btn.style`](/fr/docs/Web/API/HTMLElement/style)), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.
+La propriété [`onclick`](/fr/docs/Web/API/GlobalEventHandlers/onclick) est la propriété du gestionnaire d'événement utilisée dans cette situation. C'est essentiellement une propriété comme les autres disponibles sur le bouton (p.ex. [`btn.textContent`](/fr/docs/Web/API/Node/textContent), ou [`btn.style`](/fr/docs/orphaned/Web/API/ElementCSSInlineStyle/style)), mais d'un type spécial — lorsque vous la définissez comme étant égale à du code, ce code est exécuté lorsque l'événement se déclenche sur le bouton.
 
-Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans [Construire votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)). Le code suivant fonctionnera tout pareil:
+Vous pouvez également définir la propriété du gestionnaire d'événement comme étant égale au nom d'une fonction définie (comme nous l'avons vu dans [Construire votre propre fonction](/fr/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)). Le code suivant fonctionnera tout pareil&nbsp;:
 
 ```js
 var btn = document.querySelector('button');
@@ -134,11 +132,11 @@ btn.onclick = bgChange;
 
 De nombreuses propriétés de gestionnaire d'événement sont disponibles. Faisons une expérience.
 
-Tout d'abord, faites une copie locale de [random-color-eventhandlerproperty.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html), et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez `btn.onclick` pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:
+Tout d'abord, faites une copie locale de [random-color-eventhandlerproperty.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html), et ouvrez-le dans votre navigateur. C'est juste une copie de l'exemple simple de couleur aléatoire avec lequel nous avons déjà joué dans cet article. Maintenant, changez `btn.onclick` pour lui attribuer, tour à tour, les différentes valeurs qui suivent, et observez le résultat:
 
 - [`btn.onfocus`](/fr/docs/Web/API/GlobalEventHandlers/onfocus) et [`btn.onblur`](/fr/docs/Web/API/GlobalEventHandlers/onblur) — La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau). Ceux-ci sont souvent utilisés pour afficher des informations sur la façon de remplir les champs de formulaire lorsqu'ils sont sélectionnés, ou afficher un message d'erreur si un champ de formulaire vient d'être rempli avec une valeur incorrecte.
 - [`btn.ondblclick`](/fr/docs/Web/API/GlobalEventHandlers/ondblclick) — La couleur change seulement si l'élément est double-cliqué.
-- [`window.onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress), [`window.onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown), [`window.onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup) — La couleur change si l'on appuie sur une touche du clavier. `keypress` se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que `keydown` et `keyup` se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet [window](/fr/docs/Web/API/Window), qui représente la fenêtre entière du navigateur.
+- [`window.onkeypress`](/fr/docs/Web/API/GlobalEventHandlers/onkeypress), [`window.onkeydown`](/fr/docs/Web/API/GlobalEventHandlers/onkeydown), [`window.onkeyup`](/fr/docs/Web/API/GlobalEventHandlers/onkeyup) — La couleur change si l'on appuie sur une touche du clavier. `keypress` se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que `keydown` et `keyup` se réfèrent respectivement à l'appui et au relâchement sur la touche. Notez que cela ne fonctionne pas si vous essayez d'enregistrer ce gestionnaire d'événement sur le bouton lui-même - nous avons dû l'enregistrer sur l'objet [window](/fr/docs/Web/API/Window), qui représente la fenêtre entière du navigateur.
 - [`btn.onmouseover`](/fr/docs/Web/API/GlobalEventHandlers/onmouseover) et [`btn.onmouseout`](/fr/docs/Web/API/GlobalEventHandlers/onmouseout) — La couleur changera respectivement lorsque le pointeur de la souris survolera le bouton, ou lorsque le curseur arrêtera le survol du bouton pour s'éloigner de ce dernier.
 
 Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire `onclick` peut être enregistré sur presque n'importe quel élément), alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser [onplay](/fr/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay) seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).
@@ -158,7 +156,7 @@ function bgChange() {
 }
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html)).
 
 La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des **attributs HTML du gestionnaire d'événement** (c'est-à-dire **les gestionnaires d'événements en ligne**) comme celui présenté ci-dessus — la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient. L'exemple ci-dessus appelle une fonction définie dans un élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :
 
@@ -197,7 +195,7 @@ function bgChange() {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html)).
 
 Dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) , nous spécifions deux paramètres - le nom de l'événement pour lequel nous voulons enregistrer ce gestionnaire, et le code qui comprend la fonction du gestionnaire que nous voulons exécuter en réponse. Notez qu'il est parfaitement approprié de placer tout le code dans la fonction [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener), dans une fonction anonyme, comme ceci:
 
@@ -232,7 +230,7 @@ myElement.addEventListener('click', functionB);
 
 Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.
 
-En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de  [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) et [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
+En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement. Celles-ci sont un peu hors de propos pour cet article, mais si vous voulez en savoir plus sur elles, jetez un oeil aux pages de référence de [`addEventListener()`](/fr/docs/Web/API/EventTarget/addEventListener) et [`removeEventListener()`](/fr/docs/Web/API/EventTarget/removeEventListener).
 
 ### Quel mécanisme devrais-je utiliser ?
 
@@ -273,13 +271,13 @@ function bgChange(e) {
 btn.addEventListener('click', bgChange);
 ```
 
-> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
+> **Note :** Vous trouverez le [code source complet ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html)de cet exemple sur GitHub (également [le voir s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html)).
 
 Ici, vous pouvez voir que nous incluons un objet événement, **e**, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur `e.target` - qui est le bouton lui-même. La propriété `target` de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire. Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.
 
 > **Note :** Vous pouvez utiliser n'importe quel nom pour l'objet d'événement - il vous suffit de choisir un nom que vous pouvez ensuite utiliser pour le référencer dans la fonction du gestionnaire d'événements. `e`/`evt`/`event` sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir. C'est toujours bon de s'en tenir à une norme.
 
-`e.target`est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à  `e.target`, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html) pour le code source ; et ici pour le voir [s'exécuter](http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire `onclick` à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:
+`e.target`est incroyablement utile lorsque vous voulez définir le même gestionnaire d'événements sur plusieurs éléments et affecter une action à chacun d'entre eux quand un événement se produit sur eux. Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus. Il est utile de toujours pouvoir affecter une action à `e.target`, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir [useful-eventtarget.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html) pour le code source ; et ici pour le voir [s'exécuter](https://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html)), nous avons créé 16 éléments {{htmlelement("div")}} avec JavaScript. Quand nous les sélectionnons tous en utilisant {{domxref("document.querySelectorAll()")}}, puis que nous faisons une boucle sur chacun d'eux, en ajoutant un gestionnaire `onclick` à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué&nbsp;:
 
 ```js
 var divs = document.querySelectorAll('div');
@@ -293,7 +291,7 @@ for (var i = 0; i < divs.length; i++) {
 
 #### Résultat
 
-Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):
+Le résultat est le suivant (essayez de cliquer dessus - amusez-vous)&nbsp;:
 
 ```html hidden
 <!DOCTYPE html>
@@ -338,7 +336,7 @@ Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):
 </html>
 ```
 
-{{ EmbedLiveSample('Résultat', '100%', 400, "", "", "hide-codepen-jsfiddle") }}
+{{ EmbedLiveSample('', '100%', 430, "", "") }}
 
 La plupart des gestionnaires d'événements que vous rencontrerez ne disposent que d'un ensemble standard de propriétés et de fonctions (méthodes) disponibles sur l'objet événement (voir la liste complète sur {{domxref("Event")}} ). Cependant, certains gestionnaires plus avancés ajoutent des propriétés spécialisées contenant des données supplémentaires dont ils ont besoin pour fonctionner. Le [Media Recorder API](/fr/docs/Web/API/MediaRecorder_API), par exemple, a un événement `dataavailable` , qui se déclenche quand un fichier audio ou vidéo a été enregistré et est disponible pour être utilisé (par exemple, pour l'enregistrer ou le lire). L'objet événement du gestionnaire [ondataavailable](/fr/docs/Web/API/MediaRecorder/ondataavailable) correspondant dispose d'une propriété `data` contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.
 
@@ -394,11 +392,11 @@ form.onsubmit = function(e) {
 
 {{ EmbedLiveSample('Éviter_le_comportement_par_défaut', '100%', 140, "", "", "hide-codepen-jsfiddle") }}
 
-> **Note :** pour le code source, voir [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (et le voir s'exécuter [ici](http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html).)
+> **Note :** pour le code source, voir [preventdefault-validation.html](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html) (et le voir s'exécuter [ici](https://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html).)
 
 ### Le bouillonnement et la capture
 
-Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous.
+Le dernier sujet à aborder ici est quelque chose que vous ne rencontrerez pas souvent, mais cela peut être une vraie difficulté si vous ne le comprenez pas. Le bouillonnement et la capture d'événements sont deux mécanismes qui décrivent ce qui se passe lorsque deux gestionnaires du même type d'événement sont activés sur un même élément. Regardons un exemple pour faciliter cela - ouvrez l'exemple [show-video-box.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html) dans un nouvel onglet (et le [code source ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)dans un autre). C'est également disponible en live ci-dessous.
 
 ```html hidden
 <!DOCTYPE html>
@@ -519,14 +517,13 @@ Dans la phase de capture:
 - Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément ({{htmlelement("html")}}) dispose d'un gestionnaire d'événement `onclick` enregistré pendant la phase de capture et le lance si c'est le cas.
 - Ensuite, il passe à l'élément suivant à l'intérieur de `<html>` et fait la même chose, puis la suivante, et ainsi de suite jusqu'à ce qu'il atteigne l'élément sur lequel on a cliqué.
 
-Dans la phase de bouillonnement, l'opposé exact se produit:
+Dans la phase de bouillonnement, l'opposé exact se produit&nbsp;:
 
 Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement `onclick` enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.
-     Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément `<html>`.
 
-[![](bubbling-capturing.png)](https://mdn.mozillademos.org/files/16064/bubbling-capturing.png)
+Ensuite, il passe à l'élément ancêtre immédiat et fait la même chose, puis le suivant, et ainsi de suite jusqu'à ce qu'il atteigne l'élément `<html>`.
 
-(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)
+![](bubbling-capturing-fr.png)
 
 Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement. Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément `<video>` vers l'élément `<html>`. Comme ceci :
 
@@ -546,7 +543,7 @@ video.onclick = function(e) {
 };
 ```
 
-Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici :  [show-video-box-fixed.html](http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
+Vous pouvez faire une copie locale du [code source show-video-box.html ](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html)et le modifier vous-même ou regarder le résultat ici : [show-video-box-fixed.html](https://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html) (ou voir le [code source](https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html)).
 
 > **Note :** Pourquoi s'embêter à capturer et bouillonner ? Eh bien, aux heures sombres où les navigateurs étaien peu compatibles entre eux qu'ils ne le sont aujourd'hui, Netscape n'utilisait que la capture d'événements, et Internet Explorer n'utilisait que les bouillonnements. Quand le W3C a décidé d'essayer de normaliser le comportement et de parvenir à un consensus, ils en sont arrivés à ce système qui inclue les deux, qui est celui implémenté dans les navigateurs modernes.
 
@@ -566,24 +563,22 @@ Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événe
 
 En outre, il est important de comprendre que les différents contextes dans lesquels JavaScript est utilisé tendent à avoir des modèles d'événements différents - des API Web à d'autres domaines tels que WebExtensions du navigateur et Node.js (JavaScript côté serveur). Nous ne nous attendons pas à ce que vous compreniez tous ces domaines maintenant, mais cela aide certainement à comprendre les bases des événements à mesure que vous avancez dans l'apprentissage du développement Web.
 
-S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou [contactez-nous ](/fr/Learn#Contact_us)pour demander de l'aide.
+S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou [contactez-nous](/fr/docs/Learn#nous_contacter) pour demander de l'aide.
 
 ## Voir aussi
 
-- [Event order](http://www.quirksmode.org/js/events_order.html) (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.
-- [Event accessing](http://www.quirksmode.org/js/events_access.html) (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.
+- [Event order](https://www.quirksmode.org/js/events_order.html) (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.
+- [Event accessing](https://www.quirksmode.org/js/events_access.html) (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.
 - [Event reference](/fr/docs/Web/Events)
 
 {{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}
 
-
-
 ## Dans ce module
 
-- [Prendre des décisions dans le code - les conditions](/fr/Apprendre/JavaScript/Building_blocks/conditionals)
-- [Les boucles dans le code](/fr/Apprendre/JavaScript/Building_blocks/Looping_code)
-- [les fonctions - des blocs de code réutilisables](/fr/Apprendre/JavaScript/Building_blocks/Fonctions)
-- [Construisez votre propre fonction](/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function)
-- [les valeurs de retour des fonction](/fr/Apprendre/JavaScript/Building_blocks/Return_values)[s](/fr/docs/Learn/JavaScript/Building_blocks/Return_values)
-- [Introduction aux événement](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)[s](/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements)
-- [Galerie d'images](/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery)
+- [Prendre des décisions dans le code - les conditions](/fr/docs/Learn/JavaScript/Building_blocks/conditionals)
+- [Les boucles dans le code](/fr/docs/Learn/JavaScript/Building_blocks/Looping_code)
+- [les fonctions - des blocs de code réutilisables](/fr/docs/Learn/JavaScript/Building_blocks/Functions)
+- [Construisez votre propre fonction](/fr/docs/Learn/JavaScript/Building_blocks/Build_your_own_function)
+- [les valeurs de retour des fonctions](/fr/docs/Learn/JavaScript/Building_blocks/Return_values)
+- [Introduction aux événements](/fr/docs/Learn/JavaScript/Building_blocks/Events)
+- [Galerie d'images](/fr/docs/Learn/JavaScript/Building_blocks/Image_gallery)
-- 
cgit v1.2.3-54-g00ecf