diff options
author | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-29 22:30:13 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-10-29 22:30:13 +0200 |
commit | 5fe5348d14d1a6e8d07fe282f866aaa870aad240 (patch) | |
tree | 4ba6b616cdcd884f91e651acc68b9e721b53a7db /files | |
parent | c08c48e16cb9e47c586925999362de104ecd710d (diff) | |
download | translated-content-5fe5348d14d1a6e8d07fe282f866aaa870aad240.tar.gz translated-content-5fe5348d14d1a6e8d07fe282f866aaa870aad240.tar.bz2 translated-content-5fe5348d14d1a6e8d07fe282f866aaa870aad240.zip |
Fixes #2835 / update vs en-US / xref macro removal (#2840)
Diffstat (limited to 'files')
-rw-r--r-- | files/fr/web/api/eventlistener/index.md | 58 |
1 files changed, 33 insertions, 25 deletions
diff --git a/files/fr/web/api/eventlistener/index.md b/files/fr/web/api/eventlistener/index.md index 38de4de0de..98c64c2b50 100644 --- a/files/fr/web/api/eventlistener/index.md +++ b/files/fr/web/api/eventlistener/index.md @@ -1,19 +1,14 @@ --- title: EventListener slug: Web/API/EventListener -tags: - - API - - DOM - - Evènement - - Interface - - Écouteurs translation_of: Web/API/EventListener +browser-compat: api.EventListener --- {{APIRef("DOM Events")}} -L'interface **`EventListener`** représente un objet qui peut gérer un évènement distribué par un objet {{domxref("EventTarget")}}. +L'interface **`EventListener`** représente un objet qui peut gérer un évènement diffusé par un objet [`EventTarget`](/fr/docs/Web/API/EventTarget). -> **Note :** En raison du besoin de compatibilité avec le contenu existant, `EventListener` accepte à la fois une fonction et un objet avec une fonction de propriété `handleEvent`. Ceci est illustré dans l'exemple ci-dessous. +> **Note :** En raison du besoin de compatibilité avec le contenu existant, `EventListener` accepte à la fois une fonction et un objet avec une fonction de propriété `handleEvent`. Ceci est illustré dans l'[exemple](#exemple) ci-dessous. ## Propriétés @@ -23,47 +18,60 @@ _Cette interface n'implémente ni n'hérite d'aucune propriété._ _Cette interface n'hérite d'aucune méthode._ -- {{domxref("EventListener.handleEvent()")}} - - : une fonction qui est appelée lorsque se produit un événement du type spécifié. +- [`EventListener.handleEvent()`](/fr/docs/Web/API/EventListener/handleEvent) + - : Une fonction qui est appelée lorsque se produit un événement du type spécifié. ## Exemple ### HTML ```html -<button id="btn">Click here!</button> +<button id="btn">Cliquez ici !</button> + +<p id="funcOutput"></p> +<p id="handleEvtOutput"></p> ``` ### JavaScript - - ```js const buttonElement = document.getElementById('btn'); +const funcOutput = document.getElementById('funcOutput'); +const handleEvtOutput = document.getElementById('handleEvtOutput'); -// Ajoute un gestionnaire pour l'évènement 'click' qui fournit une fonction de rappel. -// Chaque fois que l'élément est cliqué, une fenêtre contextuelle avec "Élément clické!" -// apparaîtra. +// On ajoute un gestionnaire pour l'évènement 'click' en fournissant +// une fonction de rappel (callback). +// Lorsqu'on clique sur l'élément, la sortie "Élément cliqué avec une fonction !" +// apparaîtra dans le paragraphe avec l'identifiant "funcOut". buttonElement.addEventListener('click', function (event) { - alert('Element clicked through function!'); + funcOutput.textContent = 'Élément cliqué avec une fonction !'; }); -// Pour la compatibilité, un objet qui n'est pas une fonction avec une propriété `handleEvent` (gestion d'évènement) -// sera traitée exactement comme la fonction elle-même. +// À des fins de compatibilité, un objet qui n'est pas une fonction +// mais qui possède une propriété `handleEvent` sera traité comme si +// cette propriété avait été passée comme argument fonctionnel. +// La sortie "Élément cliqué via la propriété handleEvent !" +// apparaîtra simultanément dans le paragraphe avec l'identifiant +// "handleEvtOutput". buttonElement.addEventListener('click', { handleEvent: function (event) { - alert('Element clicked through handleEvent property!'); + handleEvtOutput.textContent = 'Élément cliqué via la propriété handleEvent !'; } }); ``` ### Résultat -{{EmbedLiveSample('Example')}} +{{EmbedLiveSample('Exemple')}} ## Spécifications -| Spécification | Statut | Commentaire | -| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('DOM WHATWG', '#callbackdef-eventlistener', 'EventListener')}} | {{Spec2('DOM WHATWG')}} | Pas de changement. | -| {{SpecName('DOM2 Events', '#Events-EventListener', 'EventListener')}} | {{Spec2('DOM2 Events')}} | Définition initiale. | +{{Specifications}} + +## Compatibilité des navigateurs + +{{Compat}} + +### See also + +- [`addEventListener`](/fr/docs/Web/API/EventTarget/addEventListener) |