Eventi HTML e Javascript - acostaRossi/javascript-programs GitHub Wiki

Un evento HTML rappresenta qualcosa che accade nel browser o che fa l’utente.

Alcuni esempi sono:

• la fine del caricamento di una pagina web nel browser
• la modifica del contenuto di un campo HTML di input (ad es., di una casella di testo, un menu di scelta ecc.)
• il click di un bottone (onclick)
• il passaggio del mouse sopra uno specifico elemento HTML, ecc.

Quando in una pagina web accade un evento, si potrebbe volere fare qualcosa nel browser, nel senso che si vorrebbe vengano eseguite delle istruzioni che facciano una determinata cosa.

Questo è reso possibile da Javascript.

Con l’accoppiata HTML-Javascript, è possibile associare l’esecuzione di istruzioni Javascript al verificarsi di un evento HTML, cioè sfruttare quello che viene detto il meccanismo della programmazione ad eventi.

L’HTML, infatti, permette di aggiungere agli elementi di una pagina HTML i gestori di evento, a cui è possibile assegnare l’esecuzione di istruzioni Javascript.

<button onclick="document.getElementById('console').innerHTML = 'Saluti da Javascript'">Saluta</button>

<p id="console"></p>

Nell’esempio di sopra è stato inserito un gestore dell’evento “click del bottone” che, quando il bottone viene cliccato, manda in esecuzione l’istruzione Javascript ad esso assegnata, ossia l’inserimento della stringa dei saluti nel paragrafo con id=’console’.

Gli eventi disponibili sono veramente tanti, ma per ricordare almeno quelli più utilizzati, diciamo che grazie al meccanismo degli eventi è possibile far fare qualcosa a Javascript nei seguenti casi più tipici:

• ogni volta che una pagina viene caricata (onload);
• ogni volta che una pagina viene chiusa (onunload);
• quando un elemento viene cliccato (onclick);
• quando il contenuto di un elemento di input cambia (onchange).

I modi con cui associare l’esecuzione di codice Javascript con gli eventi, anch’essi sono vari:

• con un gestore di evento HTML che esegue codice Javascript direttamente;
• con un gestore di evento HTML che chiama una funzione Javascript;
• assegnando la funzione di gestione di evento agli elementi HTML.

<button onclick="alert('Saluti da Javascript')">Messaggio</button>

<button onclick="messaggio()">Messaggio</button>
<script type="text/javascript">
function messaggio(){
    alert('Saluti da Javascript'):
}
</script>

<button onclick="messaggio()" id="pulsante">Messaggio</button>
<script type="text/javascript">
document.getElementById("pulsante").onclick = function() {
    alert("Saluti!");
}
</script>