JavaScript - Eventi
Cos'è un evento?
L'interazione di JavaScript con l'HTML viene gestita tramite eventi che si verificano quando l'utente o il browser manipola una pagina.
Quando la pagina viene caricata, viene chiamato evento. Quando l'utente fa clic su un pulsante, anche quel clic è un evento. Altri esempi includono eventi come la pressione di un tasto qualsiasi, la chiusura di una finestra, il ridimensionamento di una finestra, ecc.
Gli sviluppatori possono utilizzare questi eventi per eseguire risposte codificate JavaScript, che causano la chiusura delle finestre dei pulsanti, la visualizzazione di messaggi agli utenti, la convalida dei dati e virtualmente qualsiasi altro tipo di risposta immaginabile.
Gli eventi fanno parte del livello 3 del Document Object Model (DOM) e ogni elemento HTML contiene una serie di eventi che possono attivare il codice JavaScript.
Segui questo piccolo tutorial per una migliore comprensione del riferimento agli eventi HTML . Qui vedremo alcuni esempi per comprendere una relazione tra Event e JavaScript -
fare clic su Tipo di evento
Questo è il tipo di evento più frequentemente utilizzato che si verifica quando un utente fa clic con il pulsante sinistro del mouse. Puoi mettere la tua convalida, avvertimento ecc. Contro questo tipo di evento.
Esempio
Prova il seguente esempio.
<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>Produzione
onsubmit Tipo di evento
onsubmitè un evento che si verifica quando si tenta di inviare un modulo. Puoi mettere la convalida del tuo modulo contro questo tipo di evento.
Esempio
L'esempio seguente mostra come utilizzare onsubmit. Qui stiamo chiamando avalidate()prima di inviare i dati di un modulo al server web. Sevalidate() la funzione restituisce true, il modulo verrà inviato, altrimenti non invierà i dati.
Prova il seguente esempio.
<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>onmouseover e onmouseout
Questi due tipi di eventi ti aiuteranno a creare effetti piacevoli con le immagini o anche con il testo. Ilonmouseover l'evento si attiva quando si posiziona il mouse su un elemento e il file onmouseoutsi attiva quando sposti il mouse fuori da quell'elemento. Prova il seguente esempio.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>Produzione
Eventi standard HTML 5
Gli eventi HTML 5 standard sono elencati qui per riferimento. Qui lo script indica una funzione Javascript da eseguire su quell'evento.
| Attributo | Valore | Descrizione |
|---|---|---|
| disconnesso | script | Si attiva quando il documento va offline |
| Onabort | script | Trigger su un evento di interruzione |
| onafterprint | script | Si attiva dopo la stampa del documento |
| onbeforeonload | script | Si attiva prima del caricamento del documento |
| onbeforeprint | script | Si attiva prima che il documento venga stampato |
| sfocato | script | Si attiva quando la finestra perde il focus |
| oncanplay | script | Si attiva quando il supporto può avviare la riproduzione, ma potrebbe essere necessario interrompere il buffering |
| oncanplaythrough | script | Si attiva quando i media possono essere riprodotti fino alla fine, senza fermarsi per il buffering |
| onchange | script | Si attiva quando un elemento cambia |
| al clic | script | Si attiva con un clic del mouse |
| oncontextmenu | script | Si attiva quando viene attivato un menu contestuale |
| ondblclick | script | Trigger su un doppio clic del mouse |
| ondrag | script | Si attiva quando un elemento viene trascinato |
| ondragend | script | Si attiva alla fine di un'operazione di trascinamento |
| ondragenter | script | Si attiva quando un elemento è stato trascinato su una destinazione di rilascio valida |
| ondragleave | script | Si attiva quando un elemento viene trascinato su una destinazione di rilascio valida |
| ondragover | script | Trigger all'inizio di un'operazione di trascinamento |
| ondragstart | script | Trigger all'inizio di un'operazione di trascinamento |
| ondrop | script | Si attiva quando l'elemento trascinato viene rilasciato |
| ondurationchange | script | Si attiva quando la lunghezza del supporto viene modificata |
| svuotato | script | Si attiva quando un elemento di una risorsa multimediale diventa improvvisamente vuoto. |
| onended | script | Si attiva quando il supporto raggiunge la fine |
| onerror | script | Si attiva quando si verifica un errore |
| onfocus | script | Si attiva quando la finestra diventa attiva |
| onformchange | script | Si attiva quando un modulo cambia |
| onforminput | script | Si attiva quando un modulo riceve l'input dell'utente |
| onhaschange | script | Si attiva quando il documento ha subito modifiche |
| oninput | script | Si attiva quando un elemento riceve l'input dell'utente |
| oninvalid | script | Si attiva quando un elemento non è valido |
| onkeydown | script | Si attiva quando viene premuto un tasto |
| onkeypress | script | Si attiva quando un tasto viene premuto e rilasciato |
| onkeyup | script | Si attiva quando viene rilasciato un tasto |
| onload | script | Si attiva quando il documento viene caricato |
| onloadeddata | script | Si attiva quando vengono caricati i dati del supporto |
| onloadedmetadata | script | Si attiva quando vengono caricati la durata e altri dati multimediali di un elemento multimediale |
| onloadstart | script | Si attiva quando il browser inizia a caricare i dati multimediali |
| onmessage | script | Si attiva quando il messaggio viene attivato |
| onmousedown | script | Si attiva quando viene premuto un pulsante del mouse |
| onmousemove | script | Si attiva quando il puntatore del mouse si sposta |
| onmouseout | script | Si attiva quando il puntatore del mouse esce da un elemento |
| onmouseover | script | Si attiva quando il puntatore del mouse si sposta su un elemento |
| onmouseup | script | Si attiva quando viene rilasciato un pulsante del mouse |
| onmousewheel | script | Si attiva quando la rotellina del mouse viene ruotata |
| onoffline | script | Si attiva quando il documento va offline |
| onoine | script | Si attiva quando il documento è online |
| ononline | script | Si attiva quando il documento è online |
| onpagehide | script | Si attiva quando la finestra è nascosta |
| onpageshow | script | Si attiva quando la finestra diventa visibile |
| in pausa | script | Si attiva quando i dati multimediali vengono messi in pausa |
| onplay | script | Si attiva quando i dati multimediali stanno per iniziare la riproduzione |
| onplaying | script | Si attiva quando inizia la riproduzione dei dati multimediali |
| onpopstate | script | Si attiva quando cambia la cronologia della finestra |
| onprogress | script | Si attiva quando il browser sta recuperando i dati multimediali |
| onratechange | script | Si attiva quando la velocità di riproduzione dei dati multimediali cambia |
| onreadystatechange | script | Si attiva quando cambia lo stato di pronto |
| onredo | script | Si attiva quando il documento esegue una ripetizione |
| onresize | script | Si attiva quando la finestra viene ridimensionata |
| onscroll | script | Si attiva quando viene fatto scorrere la barra di scorrimento di un elemento |
| onseeked | script | Si attiva quando l'attributo di ricerca di un elemento multimediale non è più vero e la ricerca è terminata |
| alla ricerca | script | Si attiva quando l'attributo di ricerca di un elemento multimediale è vero e la ricerca è iniziata |
| onselect | script | Si attiva quando viene selezionato un elemento |
| onstalled | script | Si attiva quando si verifica un errore durante il recupero dei dati multimediali |
| onstorage | script | Si attiva quando viene caricato un documento |
| onsubmit | script | Si attiva quando viene inviato un modulo |
| onsuspend | script | Si attiva quando il browser sta recuperando i dati multimediali, ma si è arrestato prima che l'intero file multimediale fosse recuperato |
| ontimeupdate | script | Si attiva quando il supporto cambia la sua posizione di riproduzione |
| onundo | script | Si attiva quando un documento esegue un annullamento |
| onunload | script | Si attiva quando l'utente lascia il documento |
| onvolumechange | script | Si attiva quando il supporto cambia il volume, anche quando il volume è impostato su "muto" |
| in attesa | script | Si attiva quando la riproduzione del supporto viene interrotta, ma dovrebbe riprendere |