ES6 - Eventi
JavaScript ha lo scopo di aggiungere interattività alle tue pagine. JavaScript lo fa utilizzando un meccanismo che utilizza eventi.Events fanno parte del Document Object Model (DOM) di livello 3 e ogni elemento HTML contiene un insieme di eventi che possono attivare il codice JavaScript.
Un evento è un'azione o un evento riconosciuto dal software. Può essere attivato da un utente o dal sistema. Alcuni esempi comuni di eventi includono un utente che fa clic su un pulsante, carica la pagina web, fa clic su un collegamento ipertestuale e così via. Di seguito sono riportati alcuni degli eventi HTML comuni.
Gestori di eventi
Al verificarsi di un evento, l'applicazione esegue una serie di attività correlate. Il blocco di codice che raggiunge questo scopo è chiamatoeventhandler. Ogni elemento HTML ha una serie di eventi ad esso associati. Possiamo definire come gli eventi verranno elaborati in JavaScript utilizzando i gestori di eventi.
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, avviso, ecc. Contro questo tipo di evento.
Esempio
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello World")
}
</script>
</head>
<body>
<p> Click the following button and see result</p>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
onsubmitEvent Type
onsubmitè un evento che si verifica quando si tenta di inviare un modulo. Puoi mettere la convalida del modulo contro questo tipo di evento.
L'esempio seguente mostra come utilizzare onsubmit. Qui stiamo chiamando una funzione validate () prima di inviare i dati di un modulo al server web. Se la funzione validate () restituisce true, il modulo verrà inviato, altrimenti non invierà i dati.
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 porta il mouse su un elemento e il file onmouseout si attiva quando sposti il mouse fuori da quell'elemento.
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>Il seguente output viene visualizzato in caso di corretta esecuzione del codice precedente.
Eventi standard HTML 5
Gli eventi HTML 5 standard sono elencati nella tabella seguente per riferimento. 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 lo stato attivo |
| oncanplay | script | Si attiva quando il supporto può avviare la riproduzione, ma potrebbe essere necessario interromperla per il buffering |
| oncanplaythrough | script | Si attiva quando il supporto può essere riprodotto fino alla fine, senza fermarsi per il buffering |
| onchange | script | Si attiva quando un elemento cambia |
| al clic | script | Trigger su 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 lascia un obiettivo di rilascio valido |
| ondragover | script | Si attiva quando un elemento viene trascinato su una destinazione di rilascio valida |
| ondragstart | script | Si attiva 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 |
| onemptied | 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 viene modificato |
| 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 |
| 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 inizierà la riproduzione dei dati multimediali |
| 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 venisse 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 il supporto interrompe la riproduzione, ma dovrebbe riprendere |