GestioneEventi-1

Gestione degli eventi HTML - 1

Come JavaScript può essere utilizzato per gestire gli eventi HTML

Evento HTML

Qualcosa che succede ad un elemento HTML

L'elenco è enorme. Qui mi limiterò ad esaminare alcuni eventi di uso comune e le modalità di interazione con JavaScript.

Gestione in un file esterno

Il codice che gestisce l'evento è in un file esterno con estensione .js. (In questo caso il file js_02.js).
I passi da compiere sono i seguenti:

assegnazione dell'elemento con cui interagire ad una variabile. Può essere fatto con uno dei seguenti comandi:
- var variabile=document.querySelector('#id')
- var variabile=document.getElementById('id')
associazione di un event handler alla variabile mediante:
- variabile.addEventListener('tipoDiEvento', funzione);
dove ad esempio 'tipoDiEvento' = 'click', e funzione il nome della funzione per la gestione dell'evento.
definizione dell'event handler:
- funzione(){...};

Il codice è il seguente:

		 /*	File js_02.js
		Gestione dell'evento "click" sul pulsante "b0".
		
		1) Definizione della variabile "button0" a cui viene
			assegnato l'elemento html identificato dall'id "b0"; */

		var button0 = document.getElementById('b0');
		
		/*2) Creazione del gestore dell'evento "click" sull'oggetto button0.
		   Su "click" verrà eseguita la funzione "b0Handler";*/

		button0.addEventListener('click', b0Handler);

		/*3) La funzione "b0Handler" cambia la scritta sul pulsante.*/

		function b0Handler(){ 
			if (button0.textContent == "Clicca qui") {
				button0.textContent="Clicca di nuovo!";
			}
			else {
				button0.textContent="Clicca qui";
			}				
		return;
		}

Gestione interna all'elemento HTML che genera l'evento

Consiste nell'inserire nell'elemento HTML il codice dell'event handler stesso con una scrittura del tipo:

<element event="Codice JavaScript">

Ad esempio l'HTML del pulsante che segue è:

< button id='b1' onclick="document.getElementById('b1').textContent='Bravo!'">Cliccami</button>

Si possono scrivere anche più istruzioni separate da ';':

< button id='b1' onclick="document.getElementById('b1').textContent='Vedo che hai capito;'
document.getElementById('b2').textContent='Bravo!'">Cliccami</button>

Ma così il codice è una schifezza.

Per migliorare le cose si può fare così:

Invocazione di una funzione dall'interno dell'elemento HTML che genera l'evento

Stesso esempio di prima ma facenco così:

< button id='b3' onclick="cambiaScritta()'">Cliccami</button>

Dove la funzione cambiaScritta può essere definita all'interno del documento HTML o in un file esterno .js.

Se all'interno del documento HTML deve essere fra le tag <script></script>:

Io preferisco scrivere le funzioni in un file esterno e così saranno fatti tutti gli esempi che seguono.