Latest web development tutorials

evento HTML DOM

HTML DOM consente eventi JavaScript di reagire in HTML.

Esempi

Mouse Over Me
Click Me


Reagire agli eventi

Quando si verifica un evento, è possibile eseguire JavaScript, come ad esempio quando un utente fa clic su un elemento HTML.

Per eseguire il codice quando un utente fa clic su un elemento, aggiungere il codice JavaScript per l'evento attributi HTML:

onclick=JavaScript

Esempi di eventi HTML:

  • Quando l'utente fa clic con il mouse
  • Quando la pagina viene caricata
  • Quando l'immagine è caricata
  • Quando il mouse si muove sopra l'elemento
  • Quando il campo di input viene modificato
  • Al momento della presentazione del modulo HTML
  • Quando l'utente attiva il tasto

In questo esempio, quando un utente seleziona, cambierà il contenuto dell'elemento <h1>:

Esempi

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>

Prova »

In questo caso, la funzione verrà chiamata dal gestore di eventi:

Esempi

<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">Click on this text!</h1>
</body>
</html>

Prova »


HTML evento Attributi

Per assegnare gli eventi agli elementi HTML, è possibile utilizzare gli attributi di evento.

Esempi

Assegnato alla elemento pulsante di un evento onclick:

<button onclick =" displayDate() ">Try it</button>

Prova »

Nell'esempio precedente, quando il pulsante viene premuto, esegue la funzione denominata displayDate.


Utilizzare il DOM HTML per assegnare un evento

evento HTML DOM consente di utilizzare JavaScript per assegnare elementi HTML:

Esempi

Assegnato onclick elemento pulsante dell'evento:

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

Prova »

Nell'esempio precedente, la funzione denominata displayDate vengono assegnati alla id = myButn "elemento HTML.

Quando il pulsante viene premuto, la funzione di esecuzione.


onLoad ed evento onunload

Quando un utente entra o esce pagina, si innescherà onload ed evento onunload.

evento onload può essere utilizzato per controllare i visitatori tipo e versione del browser in modo sulla base delle informazioni di caricare diverse versioni di una pagina.

onLoad e onunload evento per la gestione dei cookie.

Esempi

<body onload ="checkCookies()">

Prova »


evento onchange

evento onchange è spesso utilizzato per convalidare il campo di input.

L'esempio seguente mostra come utilizzare onchange. Quando l'utente modifica il contenuto del campo di inserimento verrà chiamata la funzione maiuscole ().

Esempi

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

Prova »


onmouseover e onmouseout eventi

onmouseover e onmouseout eventi possono essere utilizzati per attivare funzioni quando il puntatore del mouse si sposta dentro o fuori degli elementi.

Esempi

Un semplice esempio onmouseover-onmouseout:

Mouse Over Me

Prova »


onMouseDown, onmouseup ed evento onclick

onMouseDown, onmouseup onclick evento è un clic del mouse e l'intero processo. In primo luogo, quando un pulsante del mouse viene premuto, innescare onMouseDown evento, e poi, quando il pulsante del mouse viene rilasciato, si innescherà onmouseup evento, e, infine, quando fai clic con il mouse su Fine, l'evento onclick viene attivato.

Esempi

Un semplice esempio onmousedown-onmouseup:

Click Me

Prova »


HTML DOM oggetto evento di riferimento

Per una descrizione completa ed esempi di ogni evento, si prega di visitare il nostro manuale di riferimento HTML DOM .