MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Création et déclenchement d'événements

Cette traduction est incomplète. Aidez à traduire cet article depuis l'anglais.

Cet article montre comment créer et dispatcher des événements DOM. De tels événements sont généralement appelés événements synthétiques afin de les distinguer des événements levés par le navigateur lui-même.

Création d'événements personnalisés

Les événements peuvent être créés avec le constructeur Event de cette manière :

var event = new Event('build');

//Ecoutez l'événement.
elem.addEventListener('build', function (e) { ... }, false);

//distribuer l'événement.
elem.dispatchEvent(event);

Ce constructeur est pris en charge par la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeuse (qui fonctionne avec Internet Explorer), voir l'ancienne approche ci-dessous.

Ajout de données personnalisée - CustomEvent ()

Pour ajouter d'autres données à l'objet événement, il existe l'interface CustomEvent. Dans cette interface, la propriété detail peut être utilisée pour transmettre des données personnalisées. Par exemple, l'événement peut être créé de la manière suivante :

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

Cela permet à la fonction qui capture l'événement (la fonction de rappel) d'accéder aux données supplémentaires :

function eventHandler(e) {
  log('The time is: ' + e.detail);
}

L'ancienne approche

L'ancienne manière de créer des événements utilise des API inspirées par Java. Le code suivant en montre un exemple :

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.dispatchEvent(event);

Le déclenchement d'événements intégrés

Cet exemple démontre la simulation d'un clic (programmation générant un événement de clic) sur une case à cocher en utilisant des méthodes DOM. Voir l'exemple en action.

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    //Un gestionnaire appelé preventDefault. 
    alert("canceled");
  } else {
    //Aucun gestionnaires appelé preventDefault.
    alert("not canceled");
  }
}

Navigateurs compatibles

caractéristique Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 (Oui) Pas de support 11.60 6
Caractéristique Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
support de base ? ? ? ? 6

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : csblo, yasakura_, jmh
 Dernière mise à jour par : csblo,