Comment puis-je déclencher par programme des événements JavaScript ?

Déclenchement d'événements par programmation en JavaScript

La gestion des événements joue un rôle crucial dans les applications Web réactives. Bien qu'attacher des écouteurs d'événements à des éléments HTML soit simple, il peut devenir difficile de déclencher des événements par programmation à partir d'autres fonctions.

Solution :

Pour déclencher un événement par programmation, vous pouvez utilisez les approches suivantes :

1. Constructeurs d'événements :

Les navigateurs modernes prennent en charge la création d'événements personnalisés à l'aide du constructeur d'événements. Voici un exemple :

const event = new Event('customEvent', {
  bubbles: true,
  cancelable: true
});

element.dispatchEvent(event);

2. Envoi basé sur des documents :

Cette méthode est compatible avec la plupart des navigateurs. Vous pouvez créer et distribuer un événement à l'aide de l'objet document :

const event = document.createEvent('HTMLEvents');
event.initEvent('customEvent', true, true);
event.eventName = 'customEvent';

element.dispatchEvent(event);

3. Prise en charge d'IE hérité :

Pour Internet Explorer 8 ou version antérieure, vous pouvez utiliser la méthode fireEvent :

const event = document.createEventObject();
event.eventName = 'customEvent';
event.eventType = 'customEvent';

element.fireEvent('on' + event.eventType, event);

Remarque :

• La méthode initEvent est désormais obsolète.
• bubbles précise si l'événement fait remonter le message Arbre DOM.
• cancelable permet d'annuler l'événement par un gestionnaire.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!