Gli eventi in JavaScript sono azioni o accadimenti che avvengono nella pagina web. Possono essere innescati dall'interazione dell'utente, come il clic di un pulsante, il passaggio del mouse su un elemento, o dal caricamento della pagina. La gestione degli eventi consente di rendere interattive le pagine web.
Un evento è un'azione che può essere rilevata dal browser. JavaScript può essere utilizzato per intercettare questi eventi e rispondere con un'azione specifica.
Ci sono molti tipi di eventi in JavaScript, tra cui:
Per gestire un evento, è necessario associare una funzione chiamata event handler all'elemento che genererà l'evento. Questo può essere fatto in diversi modi:
È possibile utilizzare attributi HTML per assegnare gestori di eventi direttamente agli elementi HTML.
<button onclick="alert('Cliccato!')">Cliccami</button>
È possibile utilizzare JavaScript per assegnare gestori di eventi agli elementi. Questo metodo è preferibile perché separa il contenuto HTML dalla logica JavaScript.
document.getElementById('myButton').onclick = function() {
alert('Cliccato!');
};
Il metodo addEventListener è il modo più flessibile e moderno per gestire gli eventi. Consente di aggiungere più gestori di eventi a un singolo elemento e offre un migliore controllo sul flusso degli eventi.
document.getElementById('myButton').addEventListener('click', function() {
alert('Cliccato!');
});
Quando si verifica un evento, il browser crea un oggetto Event che contiene informazioni sull'evento. Questo oggetto viene passato come argomento al gestore dell'evento.
document.getElementById('myButton').addEventListener('click', function(event) {
console.log('Tipo di evento:', event.type);
console.log('Elemento target:', event.target);
});
L'event delegation è una tecnica che sfrutta il concetto di bubbling degli eventi per gestire eventi su elementi che vengono aggiunti dinamicamente. Invece di aggiungere gestori di eventi a ogni singolo elemento, è possibile aggiungere un solo gestore a un elemento padre.
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target && event.target.matches('button.classname')) {
alert('Bottone cliccato!');
}
});