emit
En utilisant la méthode emit, vous pouvez déclencher activement des événements, et les événements déclenchés possèdent un mécanisme de propagation. Le mécanisme de propagation signifie que l'événement remonte de l'élément interne vers l'élément externe, en déclenchant les événements de l'intérieur vers l'extérieur selon les niveaux hiérarchiques.
Ci-dessous un exemple démontrant comment utiliser la méthode emit pour déclencher un événement personnalisé et utiliser le mécanisme de propagation pour transmettre l'événement à un élément externe.
-
Je suis la cible
-
-
Dans cet exemple, nous avons enregistré le même gestionnaire d'événements personnalisé custom-event pour l'élément <ul> et l'élément <li>. Lorsque nous utilisons la méthode emit pour déclencher l'événement, celui-ci remonte de l'élément <li> à l'élément <ul>, déclenchant ainsi les deux gestionnaires d'événements.
Données personnalisées
En passant le paramètre data, vous pouvez transmettre des données personnalisées au gestionnaire d'événements :
-
Je suis la cible
-
-
Dans cet exemple, nous passons des données personnalisées au gestionnaire d'événements via le paramètre data. Le gestionnaire d'événements peut récupérer les données transmises via event.data.
Déclencher un événement sans propagation
Si vous ne souhaitez pas que l'événement se propage, vous pouvez ajouter le paramètre bubbles: false lors du déclenchement de l'événement :
-
I am target
-
-
Dans cet exemple, nous déclenchons un événement personnalisé avec le paramètre bubbles: false. Cet événement ne remonte pas aux éléments parents, seul le gestionnaire d’événements de l’élément <li> est donc déclenché.
Pénétration du nœud racine
Par défaut, les événements ne traversent pas le DOM fantôme des composants personnalisés. Mais vous pouvez permettre aux événements personnalisés de traverser le nœud racine et de déclencher des éléments en dehors du nœud racine en définissant composed: true.
{{loggerText}}
Dans cet exemple, nous avons créé un composant personnalisé composed-test qui contient un élément dans un DOM fantôme et un bouton qui déclenche un événement. Par défaut, les événements ne traversent pas le DOM fantôme pour atteindre le nœud racine. Cependant, en utilisant le paramètre composed: true lors du déclenchement de l'événement, nous avons permis à l'événement de traverser jusqu'au nœud racine, déclenchant ainsi l'élément en dehors du nœud racine.