8.1 Création d'événements personnalisés
Les événements personnalisés (ou événements utilisateur) en JavaScript permettent aux développeurs de créer et de déclencher leurs propres événements, ce qui peut être utile pour transmettre des informations et interagir entre différentes parties de l'application. Créer et utiliser des événements personnalisés peut améliorer la structure et la flexibilité de votre code, offrant un moyen de notifier et de gérer l'état de l'application.
Pour créer des événements personnalisés, on utilise le constructeur CustomEvent. Ce constructeur permet de créer de nouveaux événements avec des paramètres personnalisables et des données supplémentaires.
Syntaxe :
const event = new CustomEvent(type, {detail: additionalData});
Où :
type: une chaîne représentant le nom de l'événementdetail: un objet contenant des données supplémentaires qui seront transmises avec l'événement
Exemple de création d'un événement personnalisé :
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
8.2 Déclenchement d'événements personnalisés
Le déclenchement d'un événement se fait à l'aide de la méthode dispatchEvent. Cette méthode est appelée sur l'élément
où l'événement doit se produire.
Explication :
- Un gestionnaire d'événement
myCustomEventest ajouté au boutonmyButton, qui affiche dans la console le message des données de l'événement - Un événement personnalisé
myCustomEventest créé avec un message dansdetail - L'événement est déclenché sur le bouton
myButton, appelant le gestionnaire et affichant le message dans la console
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Ajout d'un gestionnaire pour l'événement personnalisé
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Création et déclenchement d'un événement personnalisé
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Utilisation des événements personnalisés
Les événements personnalisés sont utiles pour créer un code plus modulaire et maintenable, en particulier lors du travail avec des composants et des applications complexes. Ils permettent à un composant d'informer d'autres composants des changements ou actions qui se sont produits.
Explication :
- Le module A déclenche un événement personnalisé
notifyBsur l'élémentmoduleB, en transmettant des données - Le module B écoute l'événement
notifyBet le traite, affichant un message dans la console
Exemple d'utilisation des événements personnalisés dans une application modulaire :
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Le module A déclenche un événement personnalisé
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// Le module B écoute l'événement personnalisé
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// Simulation d'une action dans le module A
notifyModuleB();
</script>
</body>
</html>
8.4 Paramètres des événements personnalisés
Les événements personnalisés peuvent être configurés en utilisant les paramètres suivants :
bubbles: une valeur booléenne indiquant si l'événement doit remonter. Par défautfalsecancelable: une valeur booléenne indiquant si l'événement peut être annulé. Par défautfalsecomposed: une valeur booléenne indiquant si l'événement doit se propager au-delà des arbres DOM ombragés. Par défautfalse
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Ajout de gestionnaires pour le conteneur et le bouton
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Création et déclenchement d'un événement personnalisé avec des paramètres
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION