Il metodo createEvent() in Javascript
Il metodo createEvent() in Javascript è stato utilizzato in passato per creare un evento che poteva poi essere innescato su elementi del DOM (Document Object Model).
CreateEvent()
Oggi, l'uso di createEvent() è stato superato da un approccio più diretto e semplice mediante il costruttore CustomEvent.
Tuttavia, è utile conoscere come funziona il vecchio metodo perché, pur essendo obsoleto, è ancora funzionante e può capitare di trovarlo nei vecchi script.
Un esempio pratico
Questo documento include uno script che genera un evento tramite createEvent()
<html>
<body>
<div id="mioDiv">Aspettando l'evento...</div>
<script>
// Creazione e inizializzazione dell'evento
var mioEvento = document.createEvent('CustomEvent');
mioEvento.initCustomEvent('eventoPersonalizzato', true, true, null);
// Aggiunta del listener per l'evento su 'mioDiv'
var elemento = document.getElementById('mioDiv');
elemento.addEventListener('eventoPersonalizzato', function(e) {
elemento.textContent = "Evento personalizzato ricevuto!";
});
// Innesco dell'evento
elemento.dispatchEvent(mioEvento);
</script>
</body>
</html>
In questo script creo un evento custom chiamato "eventoPersonalizzato" e lo innesco su un elemento della pagina, ad esempio un div con l'ID "mioDiv".
Per prima cosa creo un'istanza di un evento con createEvent().
var mioEvento = document.createEvent('CustomEvent');
Poi utilizzo initCustomEvent() per inizializzare l'evento con dettagli specifici.
Anche initCustomEvent è stato deprecato a favore di CustomEvent, ma lo utilizzo qui per coerenza con l'uso di createEvent().
mioEvento.initCustomEvent('eventoPersonalizzato', true, true, null);
Prima di innescare l'evento, devo assicurarmi che ci sia un gestore pronto a riceverlo.
Seleziono un elemento con id="mioDiv" e gli aggiungo un listener tramite addEventListener che reagirà al mio evento personalizzato.
var elemento = document.getElementById('mioDiv');
elemento.addEventListener('eventoPersonalizzato', function(e) {
elemento.textContent = "Evento personalizzato ricevuto!";
});
Ora che è tutto configurato, posso innescare l'evento sull'elemento con il metodo dispatchEvent().
elemento.dispatchEvent(mioEvento);
Quando l'evento viene innescato, il listener reagisce, mostrando un messaggio nella console e aggiornando il testo di mioDiv.
Sullo schermo viene visualizzato "Evento personalizzato ricevuto!" nel div in sostituzione del precedente contenuto "Aspettando l'evento..."
Evento personalizzato ricevuto!
Esempio 2
Lo stesso script precedente posso realizzarlo con il costruttore CustomEvent in una forma più moderna
<html>
<body>
<div id="mioDiv">Aspettando l'evento...</div>
<script>
// Creazione dell'evento utilizzando il costruttore Event
var mioEvento = new CustomEvent('eventoPersonalizzato', {
bubbles: true,
cancelable: true,
detail: null
});
// Aggiunta del listener per l'evento su 'mioDiv'
var elemento = document.getElementById('mioDiv');
elemento.addEventListener('eventoPersonalizzato', function(e) {
elemento.textContent = "Evento personalizzato ricevuto!";
});
// Innesco dell'evento
elemento.dispatchEvent(mioEvento);
</script>
</body>
</html>
E così via.
