Eventi HTML DOM JavaScript

HTML DOM permette a JavaScript di rispondere agli eventi HTML:

Il mouse è sopra!
Clicca qui

Rispondere agli eventi

JavaScript può eseguire codice quando si verifica un evento, come quando l'utente clicca su un elemento HTML.

Per eseguire codice quando l'utente clicca un elemento, aggiungi codice JavaScript all'attributo evento HTML:

onclick=JavaScript

Esempio di evento HTML:

  • Quando l'utente clicca il mouse
  • Quando la pagina web viene caricata
  • Quando l'immagine viene caricata
  • Quando il mouse si posiziona sopra un elemento
  • Quando il campo di input viene modificato
  • Quando il modulo HTML viene inviato
  • Quando l'utente preme una tastiera

In questo esempio, quando l'utente clicca <h1> Il contenuto viene cambiato:

Esempio

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Clicca su questo testo!</h1>
</body>
</html>

Prova tu stesso

In questo esempio, viene chiamata la funzione da un gestore di eventi:

Esempio

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Clicca su questo testo!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Prova tu stesso

Attributi degli eventi HTML

Per assegnare eventi agli elementi HTML, puoi utilizzare gli attributi degli eventi.

Esempio

Assegnare all'elemento button onclick Evento:

<button onclick="displayDate()">Prova</button>

Prova tu stesso

Nel esempio precedente, la funzione chiamata displayDate viene eseguita quando si clicca sul pulsante.

Assegnazione degli eventi utilizzando HTML DOM

HTML DOM ti permette di assegnare eventi agli elementi HTML utilizzando JavaScript:

Esempio

Specificare per l'elemento button onclick Evento:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Prova tu stesso

Nel esempio precedente, la funzione chiamata displayDate viene assegnata all'elemento HTML con id="myBtn".

Quando si clicca su un pulsante viene eseguita la funzione.

Eventi onload e onunload

Vengono attivati quando l'utente entra e lascia la pagina onload e onunload Eventi.

onload Gli eventi possono essere utilizzati per rilevare il tipo di browser e la versione del browser dell'utente, e poi caricare la versione appropriata della pagina web in base a queste informazioni.

onload e onunload Gli eventi possono essere utilizzati per gestire i cookie.

Esempio

<body onload="checkCookies()">

Prova tu stesso

Evento onchange

onchange Questi eventi vengono spesso utilizzati insieme alla convalida dei campi di input.

Di seguito è riportato un esempio di come utilizzare onchange di esempio. Quando l'utente cambia il contenuto del campo di input, viene chiamata la funzione upperCase().

Esempio

<input type="text" id="fname" onchange="upperCase()">

Prova tu stesso

eventi onmouseover e onmouseout

onmouseover e onmouseout Gli eventi possono essere utilizzati per attivare una funzione quando l'utente mette il mouse su o fuori da un elemento HTML:

Il mouse è sopra!

Prova tu stesso

eventi onmousedown, onmouseup e onclick

onmousedown, onmouseup e onclick Gli eventi formano l'intero evento di click del mouse.

Prima di tutto quando il pulsante del mouse viene cliccato:onmousedown L'evento è stato attivato; quindi quando il pulsante del mouse viene rilasciato:onmouseup L'evento è stato attivato; infine, quando il click del mouse è completato:onclick L'evento è stato attivato.

Clicca qui

Prova tu stesso

Più esempi

onmousedown e onmouseup
Cambia l'immagine quando l'utente preme il pulsante del mouse.
onload
Mostra una finestra di avviso quando la pagina è completamente caricata.
onfocus
Cambia il colore di sfondo del campo di input quando ottiene il focus.
Eventi mouse
Cambia il colore dell'elemento quando il puntatore si muove sopra di esso.

Manuale di riferimento dell'oggetto evento DOM HTML

Per una lista completa di tutti gli eventi DOM HTML, visitare la nostra Manuale di riferimento dell'oggetto evento DOM HTML.