diff options
| -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) |