Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

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

Cette traduction est en cours.

Cet article montre comment créer des événements.

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

Les événements peuvent être créés avec le constructeur Event comme suit:

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 dans la plupart des navigateurs modernes (Internet Explorer étant l'exception). Pour une approche plus verbeux (qui fonctionne avec Internet Explorer), voir la manière démodée ci-dessous.

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

Pour ajouter d'autres données à l'objet événement, l'interface CustomEvent existe et la propriété detail peut être utilisée pour transmettre des données personnalisées.
Par exemple, l'événement pourrait être créé comme suit :

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

Cela permettra à l'écouteur d'accéder aux données supplémentaires :

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

L'ancienne façon

L'ancienne approche de la création d'événements utilise des API inspirés 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 : yasakura_, jmh
 Dernière mise à jour par : yasakura_,