5.1 Fondamenti del lavoro con eventi
Gli eventi in JavaScript ti permettono di interagire con l'utente e rispondere alle sue azioni, come i click del mouse, la pressione di tasti, modifiche nei form e molto altro. Comprendere come aggiungere e rimuovere i gestori di eventi è una parte importante dello sviluppo di applicazioni web interattive.
Cosa sono gli eventi?
Un evento è un segnale dal browser che indica che qualcosa è accaduto. Ad esempio, l'utente ha cliccato su un pulsante o una pagina è stata caricata. Gli eventi ti permettono di eseguire azioni specifiche in risposta a questi segnali.
Tipi di eventi
Esistono molti tipi di eventi. Alcuni dei più comunemente usati includono:
- Mouse:
click,dblclick,mouseover,mouseout,mousedown,mouseup,mousemove - Tastiera:
keydown,keyup,keypress - Form:
submit,change,focus,blur - Documento/Finestra:
load,resize,scroll,unload
Gestori di eventi
I gestori di eventi (o listener di eventi) sono funzioni che vengono eseguite in risposta a un evento specifico. "Ascoltano" eventi specifici e si attivano quando questi eventi si verificano.
5.2 Aggiunta di gestori di eventi
Aggiungere gestori di eventi con addEventListener
Il metodo addEventListener permette di aggiungere gestori di eventi agli elementi. Fornisce maggiore flessibilità e controllo rispetto ai metodi tradizionali di aggiunta eventi, come l'uso degli attributi HTML (onclick, onchange ecc.).
Sintassi:
element.addEventListener(event, handler, options);
Dove:
element: elemento a cui viene aggiunto il gestore di eventievent: tipo di evento a cui rispondere (ad esempio 'click', 'input', 'keydown')handler: funzione che verrà chiamata al verificarsi dell'eventooptions: parametri aggiuntivi (argomento opzionale)
Esempio: Aggiunta di un gestore di eventi click
In questo esempio, un gestore di eventi viene aggiunto a un pulsante. Quando l'utente clicca sul pulsante, appare un messaggio di notifica.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
</script>
</body>
</html>
Esempio: Aggiunta di più gestori di eventi
Con addEventListener è possibile aggiungere più gestori per un singolo evento.
In questo esempio, due gestori di eventi vengono aggiunti a un pulsante. Al click, entrambi i gestori vengono eseguiti in sequenza, mostrando i messaggi corrispondenti nella console.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('First handler');
});
button.addEventListener('click', function() {
console.log('Second handler');
});
</script>
</body>
</html>
5.3 Uso del parametro options
Il parametro options permette di configurare il comportamento del gestore di eventi. Le opzioni più comunemente usate sono:
once: setrue, il gestore verrà richiamato solo una volta, quindi rimosso automaticamentecapture: setrue, l'evento verrà gestito durante la fase di cattura invece di quella di bubblingpassive: setrue, indica che il gestore non chiamerà maipreventDefault()
Esempio: Gestore che si esegue solo una volta
In questo esempio, il gestore dell'evento si attiverà solo una volta, quindi sarà rimosso automaticamente.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('This will be shown only once');
}, { once: true });
</script>
</body>
</html>
5.4 Rimozione dei gestori di eventi
Rimozione dei gestori di eventi con removeEventListener
Il metodo removeEventListener permette di rimuovere gestori di eventi che sono stati aggiunti tramite addEventListener. Per farlo, è necessario passare gli stessi argomenti che sono stati usati durante l'aggiunta del gestore.
Sintassi:
element.removeEventListener(event, handler, options)
Dove:
element: elemento dal quale viene rimosso il gestore dell'eventoevent: tipo di evento di cui si vuole rimuovere il gestorehandler: funzione che è stata impostata come gestore dell'eventooptions: parametri aggiuntivi (devono corrispondere ai parametri usati durante l'aggiunta del gestore)
Esempio: Rimozione di un gestore di eventi click
In questo esempio, un gestore di eventi click viene aggiunto a un pulsante. Cliccando su un altro pulsante viene rimosso il gestore di eventi click.
<!DOCTYPE html>
<html>
<head>
<title>Event Example</title>
</head>
<body>
<button id="myButton">Click me</button>
<button id="removeButton">Remove Click Handler</button>
<script>
const button = document.getElementById('myButton');
const removeButton = document.getElementById('removeButton');
function clickHandler() {
alert('Button clicked!');
}
button.addEventListener('click', clickHandler);
removeButton.addEventListener('click', function() {
button.removeEventListener('click', clickHandler);
alert('Click handler removed');
});
</script>
</body>
</html>
GO TO FULL VERSION