8.1 Creazione di eventi personalizzati
Eventi personalizzati (o eventi utente) in JavaScript permettono agli sviluppatori di creare e gestire i propri eventi personalizzati, il che può essere utile per la trasmissione di informazioni e l'interazione tra diverse parti dell'applicazione. Creare e utilizzare eventi personalizzati può migliorare la struttura e la flessibilità del tuo codice, fornendo un modo per notificare e gestire lo stato dell'applicazione.
Per creare eventi personalizzati, si utilizza il costruttore CustomEvent. Questo costruttore permette di creare nuovi eventi con parametri personalizzabili e dati aggiuntivi.
Sintassi:
const event = new CustomEvent(type, {detail: additionalData});
Dove:
type: stringa che rappresenta il nome dell'eventodetail: oggetto contenente dati aggiuntivi che saranno trasmessi con l'evento
Esempio di creazione di un evento personalizzato:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Ciao, mondo!' } });
8.2 Dispatciare eventi personalizzati
Il dispatch di un evento avviene tramite il metodo dispatchEvent. Questo metodo è chiamato sull'elemento su cui l'evento dovrebbe avvenire.
Spiegazione:
- Si aggiunge un event handler per l'evento
myCustomEvental pulsantemyButton, che logga in console il messaggio dai dati dell'evento - Si crea un evento personalizzato
myCustomEventcon un messaggio indetail - L'evento è dispatchato sul pulsante
myButton, invocando l'handler e loggando il messaggio in console
Esempio:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Aggiunta di un handler per l'evento personalizzato
button.addEventListener('myCustomEvent', function(event) {
console.log('Evento personalizzato ricevuto:', event.detail.message);
});
// Creazione e dispatch dell'evento personalizzato
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Ciao, mondo!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Applicazione degli eventi personalizzati
Gli eventi personalizzati sono utili per creare codice più modulare e mantenibile, specialmente quando si lavora con componenti e applicazioni complesse. Permettono a un componente di notificare ad altri componenti i cambiamenti o le azioni avvenute.
Spiegazione:
- Il Modulo A dispatcha un evento personalizzato
notifyBsull'elementomoduleB, passando dei dati - Il Modulo B ascolta l'evento
notifyBe lo gestisce, loggando un messaggio in console
Esempio di utilizzo degli eventi personalizzati in un'applicazione modulare:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Modulo A</div>
<div id="moduleB">Modulo B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Il Modulo A dispatcha un evento personalizzato
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Dati dal Modulo A' } });
moduleB.dispatchEvent(event);
}
// Il Modulo B ascolta l'evento personalizzato
moduleB.addEventListener('notifyB', function(event) {
console.log('Modulo B ha ricevuto:', event.detail.message);
});
// Simulazione di un'azione nel Modulo A
notifyModuleB();
</script>
</body>
</html>
8.4 Parametri degli eventi personalizzati
Gli eventi personalizzati possono essere ulteriormente configurati con i seguenti parametri:
bubbles: un valore booleano che indica se l'evento deve propagarsi. Di defaultfalsecancelable: un valore booleano che indica se l'evento può essere annullato. Di defaultfalsecomposed: un valore booleano che indica se l'evento deve propagarsi al di fuori dei Shadow DOM. Di defaultfalse
Esempio:
<!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');
// Aggiunta di handlers per il container e il pulsante
container.addEventListener('customEvent', function(event) {
console.log('Container ha ricevuto:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button ha ricevuto:', event.detail.message);
});
// Creazione e dispatch di un evento personalizzato con parametri
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Ciao dal pulsante' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION