Eventi di forma JavaScript

Nunzia Martini

Gli eventi JavaScript sono definiti come l'interazione tra JavaScript e HTML. Gli eventi si verificano ogni volta che la pagina Web viene manipolata dall'utente o dal browser. Document Object Model (DOM) La versione 3 è costituita da eventi JavaScript e questi fanno parte di quasi tutti gli elementi HTML e possono attivare il codice JavaScript. Facendo clic su un pulsante, premendo un tasto, massimizzare una finestra, ecc.

Esistono vari tipi di eventi JavaScript, tuttavia discuteremo specificamente eventi di forma JavaScript in questo articolo.

Gli eventi che si verificano attraverso l'interazione di un utente con un modulo HTML sono chiamati eventi del modulo JavaScript. Esistono vari tipi di eventi che rientrano nella categoria di eventi di forma JavaScript che sono elencati di seguito.

sfocato
Onchange
OnContextMenu
onfocus
OnInput
oninvalidl
onreset
Onsearch
Onselect
Onsubmit

Ognuno degli eventi sopra menzionati è discusso di seguito.

Evento OnBur

L'evento OnBur si verifica quando il focus di un elemento viene perso. Viene utilizzato principalmente all'interno del codice di convalida di un modulo. Non bolle e non può essere cancellato. Supporta tutti i tag HTML diversi da , ,
, , , , , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnBur è la seguente.</p> <p>Sintassi HTML</p> <element onblur="functionName()"> <p>Sintassi di JavaScript</p> oggetto.onblur = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Blur", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Inserisci il tuo nome: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando l'utente lascia il campo di input l'evento OnBur viene attivato e il colore di sfondo del campo di input cambia in giallo.</p> <p><strong>Produzione</strong></p> <p>Evento OnChange</p> <p>Quando un utente modifica il valore di un elemento e lascia l'elemento, l'evento OnChange si verifica. Questo evento ricorda l'evento OnInput, tuttavia, ciò che lo differenzia dall'evento OnInput è che può funzionare sull'elemento e accade quando un elemento ha perso la sua attenzione.</p> <p>Inoltre, può supportare i tag HTML ,,,,,,,. Bolle ma non può essere annullato e fa parte della versione 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnChange è la seguente.</p> <p>Sintassi HTML</p> <element onchange="functionName()"> <p>Sintassi di JavaScript</p> oggetto.onchange = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("cambiamento", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Nome: <br><script><br>function functionName() <br>var change = document.getElementById("tutorial");<br>change.value = change.value.toUpperCase();<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando un utente entra nel proprio nome nel campo di input e quindi lascia il campo di input, l'evento di OnChange viene attivato perché un elemento (campo di input) ha perso la messa a fuoco e di conseguenza le lettere minuscole vengono spostate su lettere maiuscole.</p> <p><strong>Produzione</strong></p> <p>Evento OnContextMenu</p> <p>Quando il menu contestuale di un elemento viene aperto utilizzando il tasto destro del mouse, si verifica l'evento OnContextMenu. Fa bolle ed è anche cancellabile. Questo evento supporta tutti i tag HTML ed è incluso nella versione DOM 3.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnContextMenu è riportata di seguito.</p> <p>Sintassi HTML</p> <element oncontextmenu="funtionName()"> <p>Sintassi di JavaScript</p> oggetto.oncontextMenu = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("ContextMenu", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br><br><script><br>function functionName() <br>alert("You just right-clicked!");<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando si fa clic con il pulsante destro del mouse sul campo di input, l'evento OnContextMenu attiverà e prima verrà visualizzata una casella DiaTOOG dicendo che hai appena eseguito un clic destro e dopo aver fatto clic su OK nella finestra di dialogo Il menu di contesto si aprirà.</p> <p><strong>Produzione</strong></p> <p>Ora, quando fai clic con il tasto destro del mouse sul campo di input, verrà visualizzata la finestra di dialogo.</p> <p>Dopo aver fatto clic su OK, il menu contestuale si aprirà.</p> <p>evento onfocus</p> <p>L'evento OnFocus si verifica quando un elemento è focalizzato. È principalmente usato con, e . Non bolle e non può essere cancellato. Supporta tutti i tag HTML diversi da , , <br>, , , <iframe>, , , , , ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento Onfocus è il seguente.</p> <p>Sintassi HTML</p> <element onfocus="functionName"> <p>Sintassi di JavaScript</p> oggetto.onfocus = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Focus", Script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Inserisci il tuo nome: <br><p>Una funzione cambia il colore di sfondo del campo di input quando è focalizzata.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Produzione</strong></p> <p>Quando si fa clic sul campo di input, il colore di sfondo del campo di input verrà modificato in blu. Abbiamo mostrato lo stato prima e dopo il campo di input in basso.</p> <p><strong>Prima</strong></p> <p><strong>Dopo</strong></p> <p>Evento OnInput</p> <p>Quando un utente fornisce un input a un elemento, si verifica l'evento OnInput. Questo evento ricorda l'evento OnChange, tuttavia, ciò che lo differenzia dall'evento OnChange è che accade immediatamente dopo che un valore dell'elemento è stato acceso. Inoltre, può supportare i tag HTML ,,,,,,,. Bolle ma non può essere annullato e fa parte della versione 3.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnInput è il seguente.</p> <p>Sintassi HTML</p> <element oninput="functionName"> <p>Sintassi di JavaScript</p> oggetto.oninput = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("input", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Nome: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>Nell'esempio sopra quando si tenta di modificare il valore all'interno del campo di input, appare l'evento OnInput e appare una finestra di dialogo che ti dice che hai appena cambiato il valore del campo di input.</p> <p><strong>Produzione</strong></p> <p>Non appena si cambia il valore del campo di input, verrà visualizzato il messaggio di avviso.</p> <p>evento oninvalid</p> <p>Quando un utente fornisce un input che non è consentito o un input non valido, si verifica l'evento oninvalid. Questo evento non bolle ma può essere cancellato. Supporta solo il tag HTML ed è incluso nel livello DOM 3.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento oninvalid è la seguente.</p> <p>Sintassi HTML</p> <element oninvalid="functionName"> <p>Sintassi di JavaScript</p> oggetto.oninvalid = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("non valido", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br><form><br>Inserisci il tuo nome:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>Nell'esempio sopra, se si preme il pulsante di invio senza fornire il tuo nome nel campo di input, l'evento oninvalid si attiverà e verrà visualizzato un messaggio di avviso che ti dice che il campo è richiesto.</p> <p><strong>Produzione</strong></p> <p>Evento OnReset</p> <p>Quando un utente ripristina un modulo, si verifica l'evento OnReset. Questo evento fa bolle e può essere annullato, inoltre, supporta solo HTML ed è incluso nella versione DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnReset è il seguente.</p> <p>Sintassi HTML</p> <element onreset="functionName"> <p>Sintassi di JavaScript</p> oggetto.onreset = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("reset", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Inserisci il nome: <br><br></form><br><br><script><br>function functionName() <br>alert("Press OK to reset the form.");<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando si preme il pulsante di ripristino, l'evento OnReset viene attivato e viene visualizzato un messaggio di avviso e non appena si preme il pulsante OK nella finestra di dialogo, il campo di input viene cancellato.</p> <p><strong>Produzione</strong></p> <p>Quando si preme il pulsante di ripristino, viene visualizzato il messaggio di avviso.</p> <p>Dopo aver premuto il pulsante OK, il modulo si ripristinerà.</p> <p>Evento OnSearch</p> <p>Quando un utente inizia una ricerca in un elemento con type = "ricerca", si verifica l'evento OnSearch. Questo evento non bolle né può essere annullato, inoltre, supporta solo il tag HTML ed è incluso nel livello DOM 3.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento OnSearch è il seguente.</p> <p>Sintassi HTML</p> <element onsearch="functionName"> <p>Sintassi di JavaScript</p> oggetto.onseacrh = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Seacrh", Script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br><p>Digita ciò che vuoi cercare e premere Invio.</p><br><br><br><script><br>function functionName() <br>var search = document.getElementById("mySearch");<br>alert ("Searching for google.com");<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando digiti qualcosa nella barra di ricerca e premi Invio, l'evento OnSearch viene attivato e verrà visualizzato un messaggio che ti dice che la ricerca è iniziata.</p> <p><strong>Produzione</strong></p> <p>Dopo aver digitato Google.com nella barra di ricerca e premendo Invio.</p> <p>Evento Onselect</p> <p>Si verifica quando un pezzo di testo viene selezionato in un elemento. Non è cancellabile e né bolle. Supporta i tag HTML ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi</strong></p> <p>La sintassi dell'evento Onselect è la seguente.</p> <p>Sintassi HTML</p> <element onselect="funtionName()"> <p>Sintassi di JavaScript</p> oggetto.onselect = function () script; <p>Sintassi JavaScript addEventListener ()</p> oggetto.addEventListener ("Seleziona", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br>Seleziona il testo: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Produzione</strong></p> <p>Prima di selezionare.</p> <p>Dopo aver selezionato.</p> <p>Evento OnSubmit</p> <p>Quando un utente presenta un modulo, si verifica l'evento OnSubmit. Questo evento fa bolle e può essere annullato, inoltre, supporta solo il tag HTML ed è incluso nel livello DOM 2.</p> <p><strong>Sintassi:</strong></p> <p>La sintassi dell'evento OnSubmit è il seguente.</p> <p>Sintassi HTML:</p> <element onsubmit="funtionName()"> <p>Sintassi di JavaScript:</p> oggetto.onsubmit = function () script; <p>JavaScript AddEventListener () Sintassi:</p> oggetto.addEventListener ("Invia", script); <p>Esempio</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Inserisci il nome: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>Nell'esempio sopra, quando si preme il pulsante di invio l'evento OnSubmit viene attivato e appare una finestra di dialogo che ti dice che il modulo è stato inviato.</p> <p><strong>Produzione</strong></p> <p>Conclusione</p> <p>Gli eventi che si verificano quando un utente interagisce con un modulo HTML sono chiamati eventi del modulo JavaScript. Gli eventi che rientrano nella categoria degli eventi del modulo JavaScript sono eventi OnBur, evento OnChange, evento OnContextMenu, evento OnFocus, evento OnInput, evento OnInvalid, evento OnReset, evento OnSearch, evento Onselect e evento OnSubmit. Tutti questi eventi sono discussi in dettaglio insieme all'esempio appropriato. </p> </div> <div class="rek-block rek-block-article"> </div> <ul class="prev-next"> <li class="prev-next__item prev-next__item--left"><a href="http://it.cyberaxe.org/article/javascript-focus-and-blur-events">« Focus javascript e eventi sfocati</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://it.cyberaxe.org/article/what-is-java">Cos'è Java? »</a></li> </ul> <style> .prev-next { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 20px 0; list-style: none; gap: 30px; } .prev-next li { max-width: 50%; } .prev-next__item { display: inline-block; font-weight: bold; } .prev-next__item--left { text-align: left; } .prev-next__item--right { text-align: right; } @media(max-width: 768px) { .prev-next li { max-width: 85%; } .prev-next__item--left { align-self: flex-start; } .prev-next__item--right { align-self: flex-end; } .prev-next { display: flex; flex-direction: column; } } </style> </div> <div class="col-xl-4"> <div class="sidebar-news"> <div class="rek-block rek-block-sidebar"> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/salesforce-apex---triggers">Salesforce Apex - Trigger</a> </div> <div class="white-news__text"> Tutorial pratico su Salesforce Apex trigger e i diversi exmaples per licenziare il grilletto al mome... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/java">Giava</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/java-stream-examples">Esempi di streaming Java</a> </div> <div class="white-news__text"> Guida sui diversi usi del flusso Java nella programmazione Java come generare l'array e la raccolta ... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://it.cyberaxe.org/category/debian">Debian</a> </div> <div class="white-news__name"> <a href="http://it.cyberaxe.org/article/how-to-configure-the-apache-web-server-on-debian">Come configurare il server Web Apache su Debian</a> </div> <div class="white-news__text"> Per configurare il server Web Apache su Debian, installare e impostare il server Apache, quindi conf... </div> <div class="white-news__author"> <a href="http://it.cyberaxe.org/author/cristyn-de-santis">Cristyn De Santis</a> </div> </div> </div> </div> </div> </div> <div class="container"> <div class="my-slider"> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/pandas-explode-multiple-columns">I panda esplodono più colonne</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/python">Pitone</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/filter-nan-pandas">Filtro nan panda</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-css-flex-grow-property">Come utilizzare la proprietà CSS Flex-Grow?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/sarita-negri">Sarita Negri</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/can-you-explain-the-functionality-of-powershells-get-location-command">Puoi spiegare la funzionalità del comando Get-Location di PowerShell?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/domiziano-conte">Domiziano Conte</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-is-the-difference-between---and--operators-in-php">Qual è la differenza tra .= e += operatori in PHP</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nestore-caruso">Nestore Caruso</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Come usare la pausa e continuare in PHP?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nunzia-martini">Nunzia Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-while-loop-in-php">Come usare mentre loop in PHP?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/nick-marini">Nick Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-throw-keyword-in-c">Come usare la parola chiave di lancio in c#</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/how-to-use-strings-replace-function-in-golang---examples">Come usare le stringhe.Sostituisci la funzione in Golang - Esempi</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/osea-martini">Osea Martini</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://it.cyberaxe.org/category/powershell">Powershell</a> </div> <div class="header-news__name"> <a href="http://it.cyberaxe.org/article/what-are-the-steps-to-run-remote-commands-in-powershell">Quali sono i passaggi per eseguire comandi remoti in PowerShell?</a> </div> <div class="header-news__author"> <a href="http://it.cyberaxe.org/author/dr-ursula-marini">Dr. Ursula Marini</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Un sito sul sistema operativo Linux. Qui troverai molti articoli interessanti e guide utili</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/python">Pitone</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/postgresql">Postgresql</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/windows-os">OS Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://it.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/c-sharp">c affilato</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://it.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://it.cyberaxe.org/all-categories"><b>Tutte le categorie</b></a></li> </ul> </div> </div> </div> </footer> <script src="/assets/artline/js/app.min.js"></script> <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" /> <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script> <script> window.addEventListener("load", function(){ window.cookieconsent.initialise({ "palette": { "popup": { "background": "#edeff5", "text": "#838391" }, "button": { "background": "#4b81e8" } }, "theme": "classic", "position": "bottom-right" })}); </script> <script> const images = document.querySelectorAll('img'); for (let i = 0; i < images.length; i++) { images[i].onerror = function() { this.src = 'https://cyberaxe.org/storage/img/nophoto.jpg'; } } </script> </body> </html>