Eventi (Events) JavaScript

Gli eventi sono operazioni che si verificano nel browser, innescate dall'utente o dal browser stesso.

Ecco alcuni esempi di eventi comuni che possono verificarsi su un sito web:

• Quando la pagina è completamente caricata

• Quando l'utente clicca su un pulsante

• Quando l'utente scorre il documento

• Quando l'utente ridimensiona la finestra del browser

• Quando l'utente muove il mouse

• Quando l'utente invia un modulo

• Quando l'utente preme una tastiera

• Cambiamento di campo di input HTML

Ogni evento disponibile haelaboratore eventiilelaboratore eventiè un blocco di codice (solitamente una funzione JavaScript definita dall'utente) che viene eseguito quando si verifica un evento.

Conoscendo gli eventi, sarete in grado di offrire agli utenti finali un'esperienza web più interattiva.

Un esempio semplice

Quando si verifica un evento, come un click dell'utente su un pulsante, è possibile eseguire un blocco di codice JavaScript.

Nel seguente esempio, abbiamo un pulsante che, quando premuto, chiamashowDate()Funzione:

<button onclick="showDate()">Cliccami</button>

JavaScript showDate()La funzione è così presentata:

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

Modi di utilizzare gli eventi

Gli eventi possono essere assegnati agli elementi in tre modi diversi, in modo che vengano eseguiti quando si verifica un evento correlato:

• Gestione degli eventi inline

• Attributo gestore eventi

• Ascoltatori degli eventi

Vi introdurremo tutte e tre le modalità per assicurarci che voi siate familiarizzati con ogni modo di attivare un evento.

Attributi di gestione degli eventi inline

Per assegnare un evento a un elemento HTML, possiamo utilizzareProprietà degli eventi HTML.

Nell'esempio seguente, quando l'utente clicca<p>Al clic dell'elemento, il suo contenuto cambierà:

<p onclick="this.innerHTML = 'Hello world'">Clicca qui per cambiare questo testo</p>

Nell'esempio seguente, quando l'utente clicca su<p>Al clic dell'elemento, verrà chiamata una funzione:

<p onclick="changeText(this)">Clicca qui per cambiare questo testo</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

Nell'esempio seguente, abbiamo un pulsante, premendo il quale illo sfondo diventerà un colore casuale:

<button onclick="bgChange()">Clicca su di me</button>
<script>
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}
</script>

Il gestore evento inline è un modo semplice per iniziare a comprendere gli eventi, ma di solito non dovrebbe essere utilizzato al di fuori di scopi di test e formazione.

Attributo gestore eventi

Il passo successivo per il gestore evento inline èAttributo gestore eventiÈ molto simile a un gestore evento inline, eccetto che impostiamo l'attributo dell'elemento in JavaScript invece dell'HTML.

Nell'esempio seguente, assegniamo l'evento onclick all'elemento HTML con id "para":

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

Possiamo anche impostare l'attributo gestore eventi come uguale al nome della funzione nomeata:

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

Nell'esempio sopra, assegniamo il nomechangeTextla funzione assegnata all'elemento conid="para"dell'elemento HTML.

Al clic di questo elemento verrà eseguita la funzione.

Nell'esempio seguente, abbiamo un pulsante, premendo il quale illo sfondo diventerà un colore casuale:

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb(" + random(255) + "," + random(255) + "," + random(255) + ")";
　　　document.body.style.backgroundColor = color;
}

Attenzione:elaboratore eventinon segueLa maggior parte del codice JavaScript segue la convenzione di nomi camelCase. Nota che il codice èonclick, non èonClick.

Eventi onfocus e onblur

onfocus viene attivato quando l'elemento riceve il focus.

onblur viene attivato quando l'elemento perde il focus.

<input type="text" onfocus="func1(this)" onblur="func2(this)">

Evento onchange

onchange viene attivato quando il valore dell'elemento cambia.

<input type="text" onchange="myFunc(this)" value="Hello">

Eventi onmouseover e onmouseout

onmouseover viene attivato quando il dispositivo di puntamento (solitamente il mouse) viene mosso sopra l'elemento o uno dei suoi elementi figli.

onmouseout viene attivato quando il dispositivo di puntamento (solitamente il mouse) viene spostato fuori dall'elemento o da uno dei suoi elementi figli.

Leggi di più

Riferimento HTML:Riferimento proprietà evento HTML

Riferimento JavaScript:Riferimento oggetto evento HTML DOM