EventListener

L'interface EventListener représente un objet qui peut gérer un évènement diffusé par un objet 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.

Propriétés

Cette interface n'implémente ni n'hérite d'aucune propriété.

Méthodes

Cette interface n'hérite d'aucune méthode.

EventListener.handleEvent() (en-US)

Une fonction qui est appelée lorsque se produit un événement du type spécifié.

Exemple

HTML

<button id="btn">Cliquez ici !</button>

<p id="funcOutput"></p>
<p id="handleEvtOutput"></p>

JavaScript

const buttonElement = document.getElementById('btn');
const funcOutput = document.getElementById('funcOutput');
const handleEvtOutput = document.getElementById('handleEvtOutput');

// 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) {
  funcOutput.textContent = 'Élément cliqué avec une fonction !';
});

// À 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) {
    handleEvtOutput.textContent = 'Élément cliqué via la propriété handleEvent !';
  }
});

Résultat

Spécifications

No specification found

No specification data found for api.EventListener.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Compatibilité des navigateurs

No compatibility data found for api.EventListener.
Check for problems with this page or contribute missing data to mdn/browser-compat-data.

See also