path: root/files/fr/learn/javascript/building_blocks/events/index.html

---
title: Introduction aux évènements
slug: Learn/JavaScript/Building_blocks/Events
tags:
  - Article
  - Codage
  - Débutant
  - Evènement
  - Gestionnaire d'événement
  - Guide
  - JavaScript
translation_of: Learn/JavaScript/Building_blocks/Events
original_slug: Apprendre/JavaScript/Building_blocks/Evènements
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</div>

<p class="summary"><span id="result_box" lang="fr"><span>Les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez et dont le système vous informe afin que vous puissiez y répondre d'une manière ou d'une autre si vous le souhaitez.</span> <span>Par exemple, si l'utilisateur clique sur un bouton d'une page Web, vous pouvez répondre à cette action en affichant une boîte d'information.</span> <span>Dans cet article, nous allons discuter de quelques concepts importants concernant les événements, et regarder comment ils fonctionnent dans les navigateurs.</span> <span>Ce ne sera pas une étude exhaustive;</span> mais seulement<span> ce que vous devez savoir à ce stade.</span></span></p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prérequis:</th>
   <td><span id="result_box" lang="fr"><span>Connaissances de base en informatique, une compréhension de base de HTML et CSS, </span></span><a href="https://developer.mozilla.org/fr/docs/Learn/JavaScript/First_steps">Premiers pas en JavaScript</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectif:</th>
   <td><span id="result_box" lang="fr"><span>Comprendre la théorie fondamentale des événements, comment ils fonctionnent dans les navigateurs et comment les événements peuvent différer dans différents environnements de programmation.</span></span></td>
  </tr>
 </tbody>
</table>

<h2 id="Une_série_d'événements_heureux">Une série d'événements heureux</h2>

<p><span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, les événements sont des actions ou des occurrences qui se produisent dans le système que vous programmez </span></span>— <span lang="fr"><span>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.</span> <span>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.</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/14077/MDN-mozilla-events-runway.png" style="display: block; margin: 0px auto;"></p>

<p><span id="result_box" lang="fr"><span>Dans le cas du Web, les événements sont déclenchés à l'intérieur de la fenêtre du navigateur et tendent à être rattachés à un élément spécifique qui s'y trouve - il peut s'agir d'un élément unique, d'un ensemble d'éléments, du document HTML chargé dans l'onglet en cours ou</span> <span>toute la fenêtre du navigateur.</span> <span>Il y a beaucoup de types différents </span></span><span lang="fr"><span>d'événements qui peuvent se produire, par exemple :</span></span></p>

<ul>
 <li><span>L'utilisateur clique avec la souris sur un certain élément ou en place le curseur sur un certain élément.</span></li>
 <li><span lang="fr"><span>L'utilisateur appuie sur une touche du clavier.</span>     </span></li>
 <li><span lang="fr"><span>L'utilisateur redimensionne ou ferme la fenêtre du navigateur.</span>     </span></li>
 <li><span lang="fr"><span>Une page web finissant de se charger.</span>     </span></li>
 <li><span lang="fr"><span>Un formulaire en cours de soumission</span>     </span></li>
 <li><span lang="fr"><span>Une vidéo en cours de lecture, en pause ou en fin de lecture.</span>     </span></li>
 <li><span lang="fr"><span>Une erreur qui survient.</span></span></li>
</ul>

<p><span id="result_box" lang="fr"><span>Vous vous en rendrez compte (notamment en jetant un coup d'œil à la</span></span> section <span lang="fr"><span>MDN </span></span><a href="https://developer.mozilla.org/fr/docs/Web/Events">Référence des événements</a><span lang="fr"><span> ), il y a <strong>beaucoup</strong> d'événements auxquels vous pouvez répondre.</span><br>
 <br>
 <span>Chaque événement disponible a un <strong>gestionnaire d'événement</strong>, 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.</span> <span>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 <strong>enregistrons un gestionnaire d'événements</strong>.</span> <span>Notez que les gestionnaires d'événements sont parfois appelés <strong>écouteurs d'événements</strong> - ils sont à peu près interchangeables pour ce qui nous concerne, même si à la rigueur, ils fonctionnent ensemble.</span> <span>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.</span></span></p>

<div class="note">
<p><strong>Note</strong>: 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</p>
</div>

<h3 id="Un_exemple_simple">Un exemple simple</h3>

<p>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:</p>

<pre class="brush: html">&lt;button&gt;Change color&lt;/button&gt;</pre>

<div class="hidden">
<pre class="brush: css">button { margin: 10px };</pre>
</div>

<p>Le JavaScript ressemblera à ça :</p>

<pre class="brush: js">var btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}</pre>

<p> </p>

<p>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 <code>btn</code> pointe sur un élément <code>&lt;button&gt;</code> , 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é <code>onclick</code>   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 <code>&lt;body&gt;</code> .<br>
 <br>
 Ce code sera maintenant exécuté chaque fois que l'événement "click" se déclenchera sur l'élément <code>&lt;button&gt;</code>, c'est-à-dire chaque fois qu'un utilisateur cliquera dessus.</p>

<p>Vous pourrez voir cet exemple s'afficher sur toute la page en cliquant sur <a href="https://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">ce lien.</a></p>

<p> </p>

<h3 id="Ce_ne_sont_pas_que_des_pages_web">Ce ne sont pas que des pages web</h3>

<p><span id="result_box" lang="fr"><span>Une autre chose qui mérite d'être mentionnée à ce stade est que les événements ne sont pas particuliers à JavaScript - la plupart des langages de programmation ont un certain type de modèle d'événement, et la façon dont cela fonctionne diffère souvent de celle de JavaScript.</span> <span>En fait, le modèle d'événement en JavaScript pour les pages Web diffère du modèle d'événement pour JavaScript tel qu'il est utilisé dans d'autres environnements.</span></span></p>

<p>Par exemple, <a href="/en-US/docs/Learn/Server-side/Express_Nodejs">Node.js</a> <span id="result_box" lang="fr"><span>est un runtime JavaScript très populaire qui permet aux développeurs d'utiliser JavaScript pour créer des applications réseau et serveur.</span></span> Le modèle <a href="https://nodejs.org/docs/latest-v5.x/api/events.html">Node.js event model</a> 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 <code>on()</code> pour enregistrer un écouteur d'événement, et <code>once()</code> pour enregistrer un écouteur d'événement qui s'efface après sa première exécution. le document <a href="https://nodejs.org/docs/latest-v8.x/api/http.html#http_event_connect">HTTP connect event docs</a> propose un bon exemple d'utilisation.</p>

<p><span id="result_box" lang="fr"><span>Comme autre exemple, vous pouvez désormais utiliser JavaScript pour créer des extensions inter-navigateurs </span></span>—<span lang="fr"><span> comme améliorations de la fonctionnalité du navigateur </span></span>—<span lang="fr"><span> à l'aide d'une technologie appelée</span></span> <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions">WebExtensions</a>. <span id="result_box" lang="fr"><span>Le modèle d'événement est similaire au modèle d'événements Web, mais un peu différent</span></span> — les écouteurs d'événements sont sensibles à la casse (p.ex.<code>onMessage</code> plutôt que <code>onmessage</code>), et doivent êtres combinés à la fonction <code>addListener</code>. Jetez un oeil à la page <a href="https://developer.mozilla.org/fr/Add-ons/WebExtensions/API/runtime/onMessage">runtime.onMessage page</a> pour voir un exemple.</p>

<p><span id="result_box" lang="fr"><span>Vous n'avez pas besoin de comprendre quoi que ce soit à propos d'autres environnements de ce type à ce stade de votre apprentissage;</span> <span>nous voulions juste préciser que les événements peuvent différer selon les environnements de programmation.</span></span></p>

<h2 id="De_quelle_manière_utiliser_les_événements_Web">De quelle manière utiliser les événements Web ?</h2>

<p><span id="result_box" lang="fr"><span>Il existe plusieurs façons d'ajouter un code d'écouteur d'événement aux pages Web afin qu'il soit exécuté lorsque l'événement associé se déclenche.</span> <span>Dans cette section, nous allons passer en revue les différents mécanismes et discuter de ceux que vous devriez utiliser.</span></span></p>

<h3 id="Les_propriétés_du_gestionnaire_d'événement">Les propriétés du gestionnaire d'événement</h3>

<p><span id="result_box" lang="fr"><span>Voici les propriétés qui existent pour contenir le code du gestionnaire d'événement que nous avons vu le plus fréquemment pendant le cours.</span> <span>Revenons à l'exemple ci-dessus :</span></span></p>

<pre class="brush: js">var btn = document.querySelector('button');

btn.onclick = function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}</pre>

<p>La propriété <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onclick">onclick</a></code> <span id="result_box" lang="fr"><span>est la propriété du gestionnaire d'événement utilisée dans cette situation.</span> <span>C'est essentiellement une propriété comme les autres disponibles sur le bouton</span></span> (p.ex. <code><a href="/en-US/docs/Web/API/Node/textContent">btn.textContent</a></code>, ou <code><a href="/en-US/docs/Web/API/HTMLElement/style">btn.style</a></code>), mais d'un type spécial —<span id="result_box" lang="fr"><span> 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.</span></span></p>

<p><span id="result_box" lang="fr"><span>Vous pouvez également définir la propriété du gestionnaire d'</span></span>événement<span lang="fr"><span> comme étant égale au nom d'une fonction définie </span></span>(comme nous l'avons vu dans <a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construire votre propre fonction</a>). Le code suivant fonctionnera tout pareil:</p>

<pre class="brush: js">var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.onclick = bgChange;</pre>

<p><span id="result_box" lang="fr"><span>De nombreuses propriétés de gestionnaire d'événement sont disponibles.</span> <span>Faisons une expérience.</span></span></p>

<p><span class="short_text" id="result_box" lang="fr"><span>Tout d'abord, faites une copie locale de</span></span> <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerproperty.html">random-color-eventhandlerproperty.html</a>, <span id="result_box" lang="fr"><span>et ouvrez-le dans votre navigateur.</span> <span>C'est juste une copie de l'exemple simple </span></span><span lang="fr"><span>de couleur aléatoire avec lequel nous avons déjà joué dans cet article.</span> <span>Maintenant, changez</span></span> <code>btn.onclick</code> <span id="result_box" lang="fr"><span>pour lui attribuer, tour à tour,</span></span><span lang="fr"><span> les différentes valeurs qui suivent, et observez le résultat:</span></span></p>

<ul>
 <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onfocus">btn.onfocus</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onblur">btn.onblur</a></code> — <span id="result_box" lang="fr"><span>La couleur change lorsque le bouton est net ou grisé (essayez d'appuyer sur la touche Tab pour l'activer et l'éteindre à nouveau).</span> <span>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.</span></span></li>
 <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/ondblclick">btn.ondblclick</a></code> — La couleur change seulement si l'élément est double-cliqué.</li>
 <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeypress">window.onkeypress</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeydown">window.onkeydown</a></code>, <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onkeyup">window.onkeyup</a></code> — La couleur change si l'on appuie sur une touche du clavier. <code>keypress</code> se réfère à un appui normal sur la touche (bouton appuyé puis relâché), alors que <code>keydown</code> et <code>keyup</code> se réfèrent respectivement à l'appui et au relâchement sur la touche. <span id="result_box" lang="fr"><span>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</span></span> <a href="https://developer.mozilla.org/fr/docs/Web/API/Window">window</a>, qui représente la fenêtre entière du navigateur.</li>
 <li><code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseover">btn.onmouseover</a></code> et <code><a href="/en-US/docs/Web/API/GlobalEventHandlers/onmouseout">btn.onmouseout</a></code> — <span id="result_box" lang="fr"><span>La couleur changera respectivement</span></span><span lang="fr"><span> 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.</span></span></li>
</ul>

<p><span id="result_box" lang="fr"><span>Certains événements sont très généraux et disponibles presque partout (par exemple un gestionnaire</span></span> <code>onclick</code> peut être enregistré sur presque n'importe quel élément), <span id="result_box" lang="fr"><span>alors que certains sont plus spécifiques et seulement utiles dans certaines situations (par exemple, il est logique d'utiliser</span></span> <a href="/en-US/docs/Web/API/GlobalEventHandlers/GlobalEventHandlers.onplay">onplay</a> seulement sur des éléments spécifiques, comme des {{htmlelement("video")}}).</p>

<h3 id="Les_gestionnaires_d'événements_en_ligne_ne_les_utilisez_pas_!">Les gestionnaires d'événements en ligne : ne les utilisez pas !</h3>

<p><span id="result_box" lang="fr"><span>Vous pourriez également voir un motif comme celui-ci dans votre code:</span></span></p>

<pre class="brush: html">&lt;button onclick="bgChange()"&gt;Press me&lt;/button&gt;
</pre>

<pre class="brush: js">function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}</pre>

<div class="note">
<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventhandlerattributes.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventhandlerattributes.html">le voir s'exécuter</a>).</p>
</div>

<p><span id="result_box" lang="fr"><span>La première méthode d'enregistrement des gestionnaires d'événements trouvés sur le Web impliquait des <strong>attributs HTML du gestionnaire d'événement</strong> (c'est-à-dire <strong>les gestionnaires d'événements en ligne</strong>) comme celui présenté ci-dessus</span></span> —<span lang="fr"><span> la valeur de l'attribut est littéralement le code JavaScript que vous souhaitez exécuter lorsque l'événement survient.</span> <span>L'exemple ci-dessus appelle une fonction définie dans un</span></span> élément {{htmlelement("script")}} sur la même page, mais vous pouvez également insérer du JavaScript directement dans l'attribut comme par exemple :</p>

<pre class="brush: html">&lt;button onclick="alert('Hello, this is my old-fashioned event handler!');"&gt;Press me&lt;/button&gt;</pre>

<p><span id="result_box" lang="fr"><span>Vous trouverez des équivalents d'attributs HTML pour la plupart des propriétés du gestionnaire d'événement;</span> <span>cependant, vous ne devriez pas les utiliser </span></span>—<span lang="fr"><span> ils sont considérés comme une mauvaise pratique.</span> <span>Il peut sembler facile d'utiliser un attribut de gestionnaire d'événement si vous voulez avancer rapidement, mais ils deviennent rapidement ingérables et inefficaces.</span><br>
 <br>
 <span>Pour commencer, ce n'est pas une bonne idée de mélanger votre HTML et votre JavaScript, car il deviennent difficile à analyser </span></span>— <span lang="fr"><span>garder votre JavaScript au même endroit est préférable;</span> <span>s'il se trouve dans un fichier séparé, vous pourrez l'appliquer à plusieurs documents HTML.</span></span></p>

<p><span id="result_box" lang="fr"><span>Même dans un fichier unique, les gestionnaires d'événement en ligne ne sont pas une bonne idée.</span> <span>Un bouton ça va, mais que faire si vous avez 100 boutons ?</span> <span>Vous devez ajouter 100 attributs au fichier;</span> <span>la maintenance se transformerait très vite en un cauchemar.</span> <span>Avec JavaScript, vous pouvez facilement ajouter une fonction de gestionnaire d'événement à tous les boutons de la page, peu importe leur nombre, en utilisant quelque chose comme ceci :</span></span></p>

<pre class="brush: js">var buttons = document.querySelectorAll('button');

for (var i = 0; i &lt; buttons.length; i++) {
  buttons[i].onclick = bgChange;
}</pre>

<div class="note">
<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Séparer votre logique de programmation de votre contenu rend également votre site plus convivial pour les moteurs de recherche.</span></span></p>
</div>

<h3 id="addEventListener()_et_removeEventListener()">addEventListener() et removeEventListener()</h3>

<p>Le dernier type de mécanisme d'événement est défini dans le <a href="https://www.w3.org/TR/DOM-Level-2-Events/">Document Object Model (DOM) Level 2 Events</a> , qui fournit aux navigateurs une nouvelle fonction: <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>. <span id="result_box" lang="fr"><span>Cela fonctionne de la même manière que les propriétés du gestionnaire d'événement, mais la syntaxe est évidemment différente.</span> <span>Nous pourrions réécrire notre exemple de couleur aléatoire comme ceci:</span></span></p>

<pre class="brush: js">var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

btn.addEventListener('click', bgChange);</pre>

<div class="note">
<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-addeventlistener.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-addeventlistener.html">le voir s'exécuter</a>).</p>
</div>

<p><span id="result_box" lang="fr"><span>Dans la fonction</span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span> , 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.</span> <span>Notez qu'il est parfaitement approprié de placer tout le code dans la fonction </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code><span lang="fr"><span>, dans une fonction anonyme, comme ceci:</span></span></p>

<pre class="brush: js">btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});</pre>

<p><span id="result_box" lang="fr"><span>Ce mécanisme a certains avantages par rapport aux mécanismes plus anciens discutés précédemment.</span> <span>Pour commencer, il existe une fonction réciproque, </span></span> <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code><span lang="fr"><span>, qui supprime un écouteur ajouté précédemment.</span> <span>Par exemple, cela supprimerait l'écouteur du premier bloc de code de cette section:</span></span></p>

<pre class="brush: js">btn.removeEventListener('click', bgChange);</pre>

<p><span id="result_box" lang="fr"><span>Ceci n'a pas beaucoup de sens pour les programmes simples et de petite taille, mais pour les programmes plus grands et plus complexes, cela peut améliorer l'efficacité, de nettoyer les anciens gestionnaires d'événements inutilisés.</span> <span>De plus, par exemple, cela vous permet d'avoir un même bouton qui effectue différentes actions dans des circonstances différentes - tout ce que vous avez à faire est d'ajouter / supprimer des gestionnaires d'événements convenablement.</span><br>
 <br>
 <span>D'autre part, vous pouvez également enregistrer plusieurs gestionnaires pour le même écouteur.</span> <span>Les deux gestionnaires suivants ne seraient pas appliqués:</span></span></p>

<pre class="brush: js">myElement.onclick = functionA;
myElement.onclick = functionB;</pre>

<p><span id="result_box" lang="fr"><span>Comme la deuxième ligne remplacerait la valeur de </span></span><code>onclick</code><span lang="fr"><span> définie par le premier.</span> <span>Cependant, ceci fonctionnerait:</span></span></p>

<pre class="brush: js">myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);</pre>

<p><span id="result_box" lang="fr"><span>Les deux fonctions seraient maintenant exécutées lorsque l'élément est cliqué.</span><br>
 <br>
 <span>En outre, il existe un certain nombre d'autres fonctionnalités et options puissantes disponibles avec ce mécanisme d'événement.</span> Celles<span>-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 </span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code> et <code><a href="/en-US/docs/Web/API/EventTarget/removeEventListener">removeEventListener()</a></code>.</p>

<h3 id="Quel_mécanisme_devrais-je_utiliser">Quel mécanisme devrais-je utiliser ?</h3>

<p><span id="result_box" lang="fr"><span>Parmi les trois mécanismes, vous ne devriez certainement pas utiliser les attributs du gestionnaire d'événement HTML - ceux-ci sont obsolètes et constituent une mauvaise pratique, comme mentionné ci-dessus.</span><br>
 <br>
 <span>Les deux autres sont relativement interchangeables, au moins pour des utilisations simples:</span></span><br>
  </p>

<ul>
 <li>     <span>Les propriétés du gestionnaire d'événement ont moins de puissance et d'options, mais une meilleure compatibilité entre les navigateurs (prise en charge depuis Internet Explorer 8).</span> <span>Vous devriez probablement commencer par ceux-ci pendant votre apprentissage.</span></li>
 <li><span lang="fr">     <span> Les événements</span></span> du <span lang="fr"><span>DOM Niveau 2 </span></span>(<code>addEventListener()</code>, etc.) <span id="result_box" lang="fr"><span>sont plus puissants, mais peuvent aussi devenir plus complexes et moins bien supportés (supportés depuis Internet Explorer 9).</span> <span>Vous devriez également vous entraîner avec, et tenter de les utiliser si possible.</span></span></li>
</ul>

<p><span id="result_box" lang="fr"><span>Les principaux avantages du troisième mécanisme : vous pouvez supprimer le code du gestionnaire d'événement si nécessaire en utilisant </span></span><code>removeEventListener()</code><span lang="fr"><span>, et vous pouvez ajouter plusieurs écouteurs du même type aux éléments si nécessaire.</span> <span>Par exemple, vous pouvez appeler </span></span><code>addEventListener('click', function() { ... })</code><span lang="fr"><span> sur un élément plusieurs fois, avec différentes fonctions spécifiées dans le deuxième argument.</span> <span>Cela est impossible avec les propriétés du gestionnaire d'événement car toute tentative ultérieure de définition d'une propriété remplacera les propriétés précédentes, par exemple:</span></span></p>

<pre class="brush: js">element.onclick = function1;
element.onclick = function2;
etc.</pre>

<div class="note">
<p><span id="result_box" lang="fr"><span><strong>Note:</strong> Si vous êtes appelé à prendre en charge des navigateurs plus anciens qu'Internet Explorer 8 dans votre travail, vous risquez de rencontrer des difficultés, car ces anciens navigateurs utilisent des modèles d'événements </span></span><span lang="fr"><span>différents des nouveaux navigateurs.</span> <span>Mais n'ayez crainte, la plupart des bibliothèques JavaScript (par exemple </span></span><code>jQuery</code><span lang="fr"><span>) ont des fonctions intégrées qui permettent d'éliminer les différences entre navigateurs.</span> <span>Ne vous en faites pas trop à ce stade de votre parcours d'apprentissage.</span></span></p>
</div>

<h2 id="D'autres_concepts_liés_aux_événements">D'autres concepts liés aux événements</h2>

<p><span id="result_box" lang="fr"><span>Dans cette section, nous aborderons brièvement quelques concepts avancés relatifs aux événements.</span> <span>Il n'est pas important de les comprendre entièrement à ce stade, mais cela pourra servir à expliquer certains modèles de code que vous rencontrerez probablement de temps en temps.</span></span></p>

<h3 id="L'objet_événement">L'objet événement</h3>

<p><span id="result_box" lang="fr"><span>Parfois, dans une fonction de gestionnaire d'événement, vous pouvez voir un paramètre spécifié avec un nom tel que </span></span> <code>event</code>, <code>evt</code>, <span lang="fr"><span>ou simplement </span></span><code>e</code><span lang="fr"><span> .</span> <span>C'est ce qu'on appelle l'objet événement, qui est automatiquement transmis aux gestionnaires d'événements pour fournir des fonctionnalités et des informations supplémentaires.</span> <span>Par exemple, réécrivons légèrement notre exemple de couleur aléatoire:</span></span></p>

<pre class="brush: js">function bgChange(e) {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
}

btn.addEventListener('click', bgChange);</pre>

<div class="note">
<p><strong>Note</strong>: Vous trouverez le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/random-color-eventobject.html">code source complet </a>de cet exemple sur GitHub (également <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/random-color-eventobject.html">le voir s'exécuter</a>).</p>
</div>

<p><span id="result_box" lang="fr"><span>Ici, vous pouvez voir que nous incluons un objet événement, <strong>e</strong>, dans la fonction, et dans la fonction définissant un style de couleur d'arrière-plan sur </span></span><code>e.target</code><span lang="fr"><span> - qui est le bouton lui-même.</span> <span>La propriété </span></span><code>target</code><span lang="fr"><span> de l'objet événement est toujours une référence à l'élément sur lequel l'événement vient de se produire.</span> <span>Donc, dans cet exemple, nous définissons une couleur d'arrière-plan aléatoire sur le bouton, pas sur la page.</span></span></p>

<div class="note">
<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>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.</span> </span><code>e</code>/<code>evt</code>/<code>event</code><span lang="fr"><span> sont les plus couramment utilisés par les développeurs car ils sont courts et faciles à retenir.</span> <span>C'est toujours bon de s'en tenir à une norme.</span></span></p>
</div>

<p><code>e.target</code><span id="result_box" lang="fr"><span>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.</span> <span>Vous pourriez, par exemple, avoir un ensemble de 16 tuiles qui disparaissent quand on clique dessus.</span> <span>Il est utile de toujours pouvoir affecter une action à </span></span> <code>e.target</code>, plutôt que de devoir la sélectionner de manière plus difficile. Dans l'exemple suivant (voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/useful-eventtarget.html">useful-eventtarget.html</a> pour le code source ; et ici pour le voir <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/useful-eventtarget.html">s'exécuter</a>), 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 <code>onclick</code> <span id="result_box" lang="fr"><span>à chacun de sorte qu'une couleur aléatoire est appliquée lorsque l'élément est cliqué:</span></span></p>

<pre class="brush: js">var divs = document.querySelectorAll('div');

for (var i = 0; i &lt; divs.length; i++) {
  divs[i].onclick = function(e) {
    e.target.style.backgroundColor = bgChange();
  }
}</pre>

<p><span id="result_box" lang="fr"><span>Le résultat est le suivant (essayez de cliquer dessus - amusez-vous):</span></span></p>

<div class="hidden">
<h6 id="Hidden_example">Hidden example</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Useful event target example&lt;/title&gt;
    &lt;style&gt;
      div {
        background-color: red;
        height: 100px;
        width: 25%;
        float: left;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;script&gt;
      for (var i = 1; i &lt;= 16; i++) {
        var myDiv = document.createElement('div');
        document.body.appendChild(myDiv);
      }

      function random(number) {
        return Math.floor(Math.random()*number);
      }

      function bgChange() {
        var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
        return rndCol;
      }

      var divs = document.querySelectorAll('div');

      for (var i = 0; i &lt; divs.length; i++) {
        divs[i].onclick = function(e) {
          e.target.style.backgroundColor = bgChange();
        }
      }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_example', '100%', 400, "", "", "hide-codepen-jsfiddle") }}</p>

<p><span id="result_box" lang="fr"><span>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 </span></span>(voir la liste complète sur {{domxref("Event")}} ). <span id="result_box" lang="fr"><span>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.</span></span> Le <a href="/en-US/docs/Web/API/MediaRecorder_API">Media Recorder API</a>, par exemple, a un événement <code>dataavailable</code> , <span id="result_box" lang="fr"><span>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).</span></span> <span id="result_box" lang="fr"><span>L'objet événement du gestionnaire </span></span><a href="/en-US/docs/Web/API/MediaRecorder/ondataavailable">ondataavailable</a><span lang="fr"><span> correspondant dispose d'une propriété </span></span><code>data</code><span lang="fr"><span> contenant les données audio ou vidéo enregistrées pour vous permettre d'y accéder et de l'utiliser.</span></span></p>

<h3 id="Éviter_le_comportement_par_défaut">Éviter le comportement par défaut</h3>

<p><span id="result_box" lang="fr"><span>Parfois, vous rencontrerez une situation où vous voudrez arrêter un événement qui adopte son comportement par défaut.</span> <span>L'exemple le plus courant est celui d'un formulaire Web, par exemple un formulaire d'inscription personnalisé.</span> <span>Lorsque vous remplissez les détails et appuyez sur le bouton "Soumettre", le comportement naturel consiste à soumettre les données à une page spécifiée sur le serveur pour traitement, et le navigateur redirige vers une page de "message de réussite" quelconque (ou</span> <span>la même page, si une autre n'est pas spécifiée.)</span>.<br>
 <br>
 <span>Le problème survient lorsque l'utilisateur n'a pas soumis les données correctement. En tant que développeur, vous devez arrêter la soumission au serveur et lui envoyer un message d'erreur indiquant ce qui ne va pas et ce qui doit être fait pour corriger les erreurs.</span> <span>Certains navigateurs prennent en charge les fonctions de validation automatique des données de formulaire, mais comme beaucoup ne le font pas, il est conseillé de ne pas vous y fier et d'implémenter vos propres contrôles de validation.</span> <span>Regardons un exemple simple.</span><br>
 <br>
 <span>Tout d'abord, un simple </span></span><span lang="fr"><span>formulaire HTML qui vous oblige à entrer votre nom et votre prénom:</span></span></p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="fname"&gt;First name: &lt;/label&gt;
    &lt;input id="fname" type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;label for="lname"&gt;Last name: &lt;/label&gt;
    &lt;input id="lname" type="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
     &lt;input id="submit" type="submit"&gt;
  &lt;/div&gt;
&lt;/form&gt;
&lt;p&gt;&lt;/p&gt;</pre>

<div class="hidden">
<pre class="brush: css">div {
  margin-bottom: 10px;
}
</pre>
</div>

<p><span id="result_box" lang="fr"><span>Maintenant un peu de JavaScript - ici nous implémentons une vérification très simple dans un gestionnaire d'événement </span></span><a href="/en-US/docs/Web/API/GlobalEventHandlers/onsubmit">onsubmit</a><span lang="fr"><span> (l'</span></span>événement<span lang="fr"><span> submit est renvoyé sur un formulaire quand il est soumis) qui vérifie si les champs de texte sont vides.</span> <span>Si c'est le cas, nous appelons la fonction </span></span> <code><a href="/en-US/docs/Web/API/Event/preventDefault">preventDefault()</a></code><span lang="fr"><span> sur l'objet événement - ce qui stoppe la soumission du formulaire - puis nous affichons un message d'erreur dans le paragraphe sous notre formulaire pour indiquer à l'utilisateur ce qui ne va pas :</span></span></p>

<pre class="brush: js">var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');

form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();
    para.textContent = 'You need to fill in both names!';
  }
}</pre>

<p><span id="result_box" lang="fr"><span>Évidemment, cette validation est assez faible - cela n'empêcherait pas l'utilisateur de valider le formulaire avec des espaces ou des nombres entrés dans les champs, par exemple - mais cela est acceptable.</span> <span>Le résultat est le suivant :</span></span></p>

<p>{{ EmbedLiveSample('Preventing_default_behavior', '100%', 140, "", "", "hide-codepen-jsfiddle") }}</p>

<div class="note">
<p><strong>Note</strong>: pour le code source, voir <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/preventdefault-validation.html">preventdefault-validation.html</a> (et le voir s'exécuter <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/preventdefault-validation.html">ici</a>.)</p>
</div>

<h3 id="Le_bouillonnement_et_la_capture">Le bouillonnement et la capture</h3>

<p><span id="result_box" lang="fr"><span>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.</span> <span>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.</span> <span>Regardons un exemple pour faciliter cela - ouvrez</span></span> l'exemple <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box.html">show-video-box.html</a> dans un nouvel onglet (et le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source </a>dans un autre). C'est également disponible en live ci-dessous.</p>

<div class="hidden">
<h6 id="Hidden_video_example">Hidden video example</h6>

<pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Show video box example&lt;/title&gt;
    &lt;style&gt;
      div {
        position: absolute;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 480px;
        height: 380px;
        border-radius: 10px;
        background-color: #eee;
        background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.1));
      }

      .hidden {
        left: -50%;
      }

      .showing {
        left: 50%;
      }

      div video {
        display: block;
        width: 400px;
        margin: 40px auto;
      }

    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;button&gt;Display video&lt;/button&gt;

    &lt;div class="hidden"&gt;
      &lt;video&gt;
        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.mp4" type="video/mp4"&gt;
        &lt;source src="https://raw.githubusercontent.com/mdn/learning-area/master/javascript/building-blocks/events/rabbit320.webm" type="video/webm"&gt;
        &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
      &lt;/video&gt;
    &lt;/div&gt;

    &lt;script&gt;

      var btn = document.querySelector('button');
      var videoBox = document.querySelector('div');
      var video = document.querySelector('video');

      btn.onclick = function() {
        displayVideo();
      }

      function displayVideo() {
        if(videoBox.getAttribute('class') === 'hidden') {
          videoBox.setAttribute('class','showing');
        }
      }

      videoBox.addEventListener('click',function() {
        videoBox.setAttribute('class','hidden');
      });

      video.addEventListener('click',function() {
        video.play();
      });

    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</pre>
</div>

<p>{{ EmbedLiveSample('Hidden_video_example', '100%', 500, "", "", "hide-codepen-jsfiddle") }}</p>

<p><span id="result_box" lang="fr"><span>Ceci est un exemple assez simple qui montre et cache</span></span> une balise {{htmlelement("div")}} avec une balise {{htmlelement("video")}} à l'intérieur:</p>

<pre class="brush: html">&lt;button&gt;Display video&lt;/button&gt;

&lt;div class="hidden"&gt;
  &lt;video&gt;
    &lt;source src="rabbit320.mp4" type="video/mp4"&gt;
    &lt;source src="rabbit320.webm" type="video/webm"&gt;
    &lt;p&gt;Your browser doesn't support HTML5 video. Here is a &lt;a href="rabbit320.mp4"&gt;link to the video&lt;/a&gt; instead.&lt;/p&gt;
  &lt;/video&gt;
&lt;/div&gt;</pre>

<p>Quand le {{htmlelement("button")}} <span id="result_box" lang="fr"><span>est cliqué, la vidéo est affichée, en changeant l'attribut de classe sur la balise</span></span> <code>&lt;div&gt;</code> de <code>hidden</code> à <code>showing</code> <span id="result_box" lang="fr"><span>( le CSS de l'exemple contient ces deux classes, qui positionnent respectivement </span></span><span lang="fr"><span>la boîte hors de l'écran et sur l'écran.) :</span></span></p>

<pre class="brush: js">btn.onclick = function() {
  videoBox.setAttribute('class', 'showing');
}</pre>

<p><span id="result_box" lang="fr"><span>Nous ajoutons ensuite quelques gestionnaires d'événements </span></span> <code>onclick</code> <span lang="fr"><span>supplémentaires - le premier à </span></span><code>&lt;div&gt;</code><span lang="fr"><span> et le second à </span></span><code>&lt;video&gt;</code><span lang="fr"><span>.</span> <span>L'idée est que lorsque l'on clique sur la zone du </span></span><code>&lt;div&gt;</code><span lang="fr"><span> en dehors de la vidéo, la boîte doit être masquée à nouveau;</span> <span>Lorsque la vidéo elle-même est cliquée, la vidéo devrait commencer à jouer. </span></span></p>

<pre>videoBox.onclick = function() {
  videoBox.setAttribute('class', 'hidden');
};

video.onclick = function() {
  video.play();
};</pre>

<p><span id="result_box" lang="fr"><span>Mais il y a un problème - actuellement, lorsque vous cliquez sur la vidéo, elle commence à jouer, mais cela entraîne le fait que </span></span><code>&lt;div&gt;</code><span lang="fr"><span> est également caché en même temps.</span> <span>C'est parce que la vidéo est dans le </span></span><code>&lt;div&gt;</code><span lang="fr"><span> - elle en fait partie - alors que cliquer sur la vidéo lance les <em>deux</em> gestionnaires d'événements ci-dessus.</span></span></p>

<h4 id="Explication_du_bouillonnement_et_de_la_capture">Explication du bouillonnement et de la capture</h4>

<p>Quand un événement se déclenche sur un élément qui a des éléments parents (p.ex. l'élément {{htmlelement("video")}} dans notre cas), <span id="result_box" lang="fr"><span>les navigateurs modernes utilisent deux phases différentes: la phase de <strong>capture</strong> et la phase de <strong>bouillonnement</strong></span></span><span lang="fr"><span>.</span><br>
 <br>
 <span>Dans la phase de capture:</span></span></p>

<ul>
 <li><span lang="fr"><span>Le navigateur vérifie si l'ancêtre le plus éloigné de l'élément </span></span>({{htmlelement("html")}}) dispose d'un gestionnaire d'événement <code>onclick</code> enregistré pendant la phase de capture et le lance si c'est le cas.</li>
 <li><span id="result_box" lang="fr"><span>Ensuite, il passe à l'élément suivant à l'intérieur de </span></span><code>&lt;html&gt;</code><span lang="fr"><span> 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é.</span></span></li>
</ul>

<p><span id="result_box" lang="fr"><span>Dans la phase de bouillonnement, l'opposé exact se produit:</span><br>
 <br>
      <span>Le navigateur vérifie si l'élément qui a été cliqué a un gestionnaire d'événement </span></span><code>onclick</code><span lang="fr"><span> enregistré dans la phase de bouillonnement et l'exécute si c'est le cas.</span><br>
      <span>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 </span></span><code>&lt;html&gt;</code><span lang="fr"><span>.</span></span></p>

<p><a href="https://mdn.mozillademos.org/files/16064/bubbling-capturing.png"><img alt="" src="https://mdn.mozillademos.org/files/14075/bubbling-capturing.png" style="display: block; height: 452px; margin: 0px auto; width: 960px;"></a></p>

<p>(Cliquez sur l'image pour l'agrandir et la voir traduite en français.)</p>

<p><span id="result_box" lang="fr"><span>Dans les navigateurs modernes, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement.</span> <span>Ainsi, dans notre exemple actuel, lorsque vous cliquez sur la vidéo, l'événement click fait un bouillonnement de l'élément </span></span><code>&lt;video&gt;</code><span lang="fr"><span> vers l'élément </span></span><code>&lt;html&gt;</code><span lang="fr"><span>.</span> <span>Comme ceci :</span></span></p>

<ul>
 <li>Il trouve d'abord le gestionnaire <code>video.onclick...</code> et le lance, de manière à ce que la vidéo soit jouée en premier.</li>
 <li>Ensuite il trouve le gestionnaire <code>videoBox.onclick...</code> et le lance, de sorte que la vidéo est cachée.</li>
</ul>

<h4 id="Régler_le_problème_avec_stopPropagation()">Régler le problème avec stopPropagation()</h4>

<p><span id="result_box" lang="fr"><span>C'est un comportement ennuyeux, mais il y a un moyen de l'éviter !</span> <span>L'objet événement standard dispose d'une fonction appelée</span></span> <code><a href="/en-US/docs/Web/API/Event/stopPropagation">stopPropagation()</a></code>, <span id="result_box" lang="fr"><span>qui, lorsqu'il est invoqué sur l'objet événement d'un gestionnaire, fait en sorte que le gestionnaire soit exécuté, mais l'événement ne remonte pas plus haut dans la chaîne, et donc plus aucun autre gestionnaire ne sera exécuté.</span><br>
 <br>
 <span>Nous pouvons donc résoudre notre problème actuel en changeant la fonction du deuxième gestionnaire dans le bloc de code précédent comme ceci:</span></span></p>

<pre class="brush: js">video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};</pre>

<p>Vous pouvez faire une copie locale du <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box.html">code source show-video-box.html </a> <span id="result_box" lang="fr"><span>et le modifier vous-même ou regarder le résultat ici : </span></span> <a href="http://mdn.github.io/learning-area/javascript/building-blocks/events/show-video-box-fixed.html">show-video-box-fixed.html</a> (ou voir le <a href="https://github.com/mdn/learning-area/blob/master/javascript/building-blocks/events/show-video-box-fixed.html">code source</a>).</p>

<div class="note">
<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Pourquoi s'embêter à capturer et bouillonner ?</span> <span>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.</span> <span>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.</span></span></p>
</div>

<div class="note">
<p><strong>Note</strong>: <span id="result_box" lang="fr"><span>Comme mentionné ci-dessus, par défaut, tous les gestionnaires d'événements sont enregistrés dans la phase de bouillonnement, ce qui est plus logique la plupart du temps.</span> <span>Si vous voulez vraiment enregistrer un événement dans la phase de capture, vous pouvez le faire en enregistrant votre gestionnaire avec</span></span> <code><a href="/en-US/docs/Web/API/EventTarget/addEventListener">addEventListener()</a></code>, et en positionnant la troisième propriété, qui est optionnelle, sur<code>true</code>.</p>
</div>

<h4 id="Délégation_d'événement">Délégation d'événement</h4>

<p><span id="result_box" lang="fr"><span>Le bouillonnement nous permet également de tirer parti de la délégation d'événements - ce concept repose sur le fait que si vous voulez exécuter du code lorsque vous cliquez sur l'un des nombreux éléments enfants, vous pouvez définir l'écouteur d'événement sur leur parent et ainsi leur répercuter les </span></span>événement<span lang="fr"><span>, plutôt que de devoir définir l'écouteur d'événement sur chaque enfant individuellement.</span><br>
 <br>
 <span>Un bon exemple est une série d'éléments de liste - si vous voulez que chacun d'eux fasse apparaître un message lorsque vous cliquez dessus, vous pouvez définir l'écouteur d'événement </span></span><code>click</code><span lang="fr"><span> sur la balise parente </span></span><code>&lt;ul&gt;</code><span lang="fr"><span>, et il apparaîtra sur les éléments de la liste.</span></span></p>

<p><span id="result_box" lang="fr"><span>Ce concept est expliqué plus loin sur le blog de David Walsh, avec de multiples exemples - voir</span></span> <a href="https://davidwalsh.name/event-delegate">How JavaScript Event Delegation Works</a>.</p>

<h2 id="Conclusion">Conclusion</h2>

<p><span id="result_box" lang="fr"><span>Vous devriez maintenant maîtriser tout ce que vous devez savoir sur les événements Web à ce stade de votre apprentissage.</span> <span>Comme mentionné ci-dessus, les événements ne font pas vraiment partie du langage du noyau JavaScript principal - ils sont définis dans les API Web du navigateur.</span><br>
 <br>
 <span>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).</span> <span>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.</span></span></p>

<p><span id="result_box" lang="fr"><span>S'il y a quelque chose que vous n'avez pas compris, n'hésitez pas à relire l'article, ou</span></span> <a href="/en-US/Learn#Contact_us">contactez-nous </a>pour demander de l'aide.</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="http://www.quirksmode.org/js/events_order.html">Event order</a> (discussion sur la capture et le bouillonnement) — une pièce superbement détaillée de Peter-Paul Koch.</li>
 <li><a href="http://www.quirksmode.org/js/events_access.html">Event accessing</a> (discussion sur l'objet événement) — une autre pièce superbement détaillée de Peter-Paul Koch.</li>
 <li><a href="/en-US/docs/Web/Events">Event reference</a></li>
</ul>

<p>{{PreviousMenuNext("Learn/JavaScript/Building_blocks/Return_values","Learn/JavaScript/Building_blocks/Image_gallery", "Learn/JavaScript/Building_blocks")}}</p>

<p> </p>

<h2 id="Dans_ce_module">Dans ce module</h2>

<ul>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/conditionals">Prendre des décisions dans le code - les conditions</a></li>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Looping_code">Les boucles dans le code</a></li>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Fonctions">les fonctions - des blocs de code réutilisables</a></li>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Build_your_own_function">Construisez votre propre fonction</a></li>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Return_values">les valeurs de retour des fonction</a><a href="/en-US/docs/Learn/JavaScript/Building_blocks/Return_values">s</a></li>
 <li><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">Introduction aux événement</a><a href="https://developer.mozilla.org/fr/Apprendre/JavaScript/Building_blocks/Ev%C3%A8nements">s</a></li>
 <li><a href="https://developer.mozilla.org/fr/docs/Apprendre/JavaScript/Building_blocks/Image_gallery">Galerie d'images</a></li>
</ul>

<p> </p>