HTML DOM consente JavaScript per reagire agli eventi HTML:
Reagire agli eventi
può essere eseguito un JavaScript quando si verifica un evento, come 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 un attributo evento HTML:
onclick=JavaScript
Esempi di eventi HTML:
- Quando un utente fa clic con il mouse
- Quando una pagina web è stata caricata
- Quando un'immagine è stata caricata
- Quando il mouse si muove sopra un elemento
- Quando un campo di input viene modificato
- Quando viene inviato un modulo HTML
- Quando un utente colpi chiave
In questo esempio, il contenuto del <h1> elemento è cambiato quando un utente clicca su di esso:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
</body>
</html>
Prova tu stesso " In questo esempio, una funzione viene chiamata dal gestore di eventi:
Esempio
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
Prova tu stesso " HTML evento Attributi
Per assegnare gli eventi agli elementi HTML è possibile utilizzare gli attributi di evento.
Esempio
Assegnare un evento onclick di un elemento pulsante:
<button onclick="displayDate()">Try it</button>
Prova tu stesso " Nell'esempio precedente, una funzione denominata displayDate verrà eseguita quando il pulsante viene premuto.
Assegnare Eventi Uso del DOM HTML
Il HTML DOM consente di assegnare gli eventi agli elementi HTML usando JavaScript:
Esempio
Assegnare un evento onclick di un elemento pulsante:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Prova tu stesso " Nell'esempio precedente, una funzione denominata displayDate viene assegnato a un elemento HTML con il id="myBtn" .
La funzione verrà eseguita quando il pulsante viene premuto.
I onload e onunload Eventi
I onload e onunload eventi vengono attivati quando l'utente entra o esce dalla pagina.
L' onload evento può essere utilizzato per verificare il tipo di browser e versione del browser del visitatore, e caricare la versione corretta della pagina web in base alle informazioni.
I onload e onunload eventi possono essere utilizzati per trattare con i cookie.
Il onchange evento
L' onchange evento viene spesso usato in combinazione con la convalida dei campi di input.
Di seguito è riportato un esempio di come utilizzare il onchange . Il upperCase() la funzione verrà chiamato quando un utente modifica il contenuto di un campo di input.
I onmouseover e onmouseout Eventi
Il onmouseover e onmouseout eventi può essere utilizzato per attivare una funzione quando l'utente posiziona il mouse sopra o fuori, un elemento HTML:
Il onmousedown , onmouseup e onclick Eventi
Il onmousedown , onmouseup e onclick eventi sono tutte parti di un clic del mouse. In primo luogo, quando un pulsante del mouse viene premuto, il onmousedown evento viene attivato, quindi, quando il pulsante del mouse viene rilasciato, il onmouseup evento viene attivato, infine, quando il clic del mouse è completato, il onclick evento viene attivato.
Altri esempi
onMouseDown e onmouseup
Cambiare l'immagine quando un utente tiene premuto il pulsante del mouse.
onload
Visualizzare una finestra di avviso quando la pagina ha terminato il caricamento.
onfocus
Cambiare il colore di sfondo di un campo di input quando viene messa a fuoco.
eventi mouse
Cambiare il colore di un elemento quando il cursore si sposta su di esso.
HTML DOM oggetto evento di riferimento
Per un elenco di tutti gli eventi HTML DOM, guarda la nostra completa HTML DOM oggetto evento di riferimento .
Mettiti alla prova con esercizi!
Esercizio 1 » Esercizio 2» Esercizio 3 »