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 |