JavaScript -skjema hendelser

JavaScript -hendelser er definert som samspillet mellom JavaScript og HTML. Hendelser skjer hver gang websiden blir manipulert av brukeren eller nettleseren. Document Object Model (DOM) versjon 3 består av JavaScript -hendelser, og disse er en del av nesten alle HTML -elementer og kan aktivere JavaScript -kode. Å klikke på en knapp, trykke på en tast, maksimere et vindu osv.

Det er forskjellige typer JavaScript-hendelser, men vi vil spesifikt diskutere JavaScript-skjema-hendelser i denne skrivingen.

Hendelser som skjer gjennom samspillet mellom en bruker med en HTML -form kalles JavaScript -skjemahendelser. Det er forskjellige typer hendelser som faller inn under kategorien JavaScript -skjema -hendelser som er listet opp nedenfor.

Onblur
Onchange
ONCONTEXTMENU
Onfokus
Oninput
OnInvalidl
OnReset
ONSEARCH
OnSelect
Onsubmit

Hver av de ovennevnte hendelsene er diskutert nedenfor.

Onblur -arrangementet

Onblur -hendelsen skjer når fokuset på et element går tapt. Det brukes mest i valideringskoden til et skjema. Den bobler ikke og kan ikke kanselleres. Den støtter alle andre HTML -tagger enn , ,
, , , , , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onblur -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onblur="functionName()"> <p>JavaScript -syntaks</p> gjenstand.onblur = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Blur", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>I eksemplet ovenfor, når brukeren forlater inngangsfeltet, blir Onblur -hendelsen utløst og bakgrunnsfargen på inngangsfeltet endres til gult.</p> <p><strong>Produksjon</strong></p> <p>Onchange -arrangement</p> <p>Når en bruker endrer verdien av et element og forlater elementet, skjer Onchange -hendelsen. Denne hendelsen ligner på OnInput -hendelsen, men det som skiller den fra OnInput -hendelsen er at det kan fungere på elementet og skjer når et element har mistet fokuset.</p> <p>Dessuten kan det støtte ,,,,,,, og HTML -tagger. Den bobler, men kan ikke avlyses og er en del av DOM versjon 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks for OnChange -arrangementet er som følger.</p> <p>HTML -syntaks</p> <element onchange="functionName()"> <p>JavaScript -syntaks</p> gjenstand.onchange = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("endring", skript); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Navn: <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>I eksemplet ovenfor, når en bruker oppgir navnet sitt i inngangsfeltet og deretter forlater inngangsfeltet, utløses Onchange -hendelsen fordi et element (inngangsfelt) mistet fokuset og som et resultat av små bokstaver blir flyttet til store bokstaver.</p> <p><strong>Produksjon</strong></p> <p>OnContextMenu -arrangement</p> <p>Når hurtigmenyen til et element åpnes ved hjelp av høyreklikk, skjer OnContextMenu-hendelsen. Den bobler og kan også kanselleres. Denne hendelsen støtter alle HTML -tagger og er inkludert i DOM versjon 3.</p> <p><strong>Syntaks</strong></p> <p>Syntaksen til OnContextMenu -hendelsen er gitt nedenfor.</p> <p>HTML -syntaks</p> <element oncontextmenu="funtionName()"> <p>JavaScript -syntaks</p> gjenstand.onContextMenu = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("ContextMenu", skript); <p>Eksempel</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>I eksemplet ovenfor, når du høyreklikker på inndatafeltet, vil OnContextMenu -hendelsen utløse, og først vil en dialoag -boks vises og fortelle at du nettopp har utført et høyreklikk, og etter at du klikker på OK på dialogboksen, åpnes hurtigmenyen å åpne.</p> <p><strong>Produksjon</strong></p> <p>Når du nå vil høyreklikke på inndatafeltet, vises dialogboksen.</p> <p>Etter å ha klikket OK, åpnes hurtigmenyen.</p> <p>Onfocus -arrangement</p> <p>Onfocus -hendelsen skjer når et elementer er fokusert. Det brukes stort sett med, og . Den bobler ikke og kan ikke kanselleres. Den støtter alle andre HTML -tagger enn , , <br>, , , <iframe>, , , , , og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av Onfocus -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onfocus="functionName"> <p>JavaScript -syntaks</p> gjenstand.OnFocus = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Fokus", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><p>En funksjon endrer bakgrunnsfargen på inngangsfeltet når den er fokusert.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du klikker på inngangsfeltet, vil bakgrunnsfargen på inngangsfeltet bli endret til blå. Vi har vist før og etter tilstanden til inngangsfeltet nedenfor.</p> <p><strong>Før</strong></p> <p><strong>Etter</strong></p> <p>Oninput -arrangement</p> <p>Når en bruker gir et innspill til et element, skjer OnInput -hendelsen. Denne hendelsen ligner på Onchange -hendelsen, men det som skiller den fra OnChange -hendelsen er at det skjer umiddelbart etter at en elementverdi er blitt chnages. Dessuten kan det støtte ,,,,,,, og HTML -tagger. Den bobler, men kan ikke avlyses og er en del av DOM versjon 3.</p> <p><strong>Syntaks</strong></p> <p>Syntaks for OnInput -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element oninput="functionName"> <p>JavaScript -syntaks</p> gjenstand.onInput = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("input", skript); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Navn: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>I eksemplet ovenfor når du prøver å endre verdien inne i inngangsfeltet, vises OnInput -hendelsen og vises en dialogboks som forteller deg at du nettopp endret inngangsfeltverdien.</p> <p><strong>Produksjon</strong></p> <p>Så snart du endrer inngangsfeltverdien, vises varslingsmeldingen.</p> <p>OnValid -arrangement</p> <p>Når en bruker gir et innspill som ikke er tillatt eller en ugyldig inngang, skjer OnValid -hendelsen. Denne hendelsen bobler ikke, men kan avlyses. Den støtter bare HTML -taggen og er inkludert i DOM -nivå 3.</p> <p><strong>Syntaks</strong></p> <p>Syntaks for OnInvalid -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element oninvalid="functionName"> <p>JavaScript -syntaks</p> gjenstand.onInValID = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Ugyldig", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br><form><br>Skriv inn navnet ditt:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>I eksemplet ovenfor, hvis du trykker på sendeknappen uten å oppgi navnet ditt i inngangsfeltet, vil OnInvalid -hendelsen utløse og en varslingsmelding vil vises som forteller deg at Navnfeltet er påkrevd.</p> <p><strong>Produksjon</strong></p> <p>OnReset -arrangementet</p> <p>Når en bruker tilbakestiller et skjema, oppstår OnReset -hendelsen. Denne hendelsen bobler og kan avbestilles, dessuten støtter den bare HTML og er inkludert i DOM versjon 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks av OnReset -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onreset="functionName"> <p>JavaScript -syntaks</p> gjenstand.onReset = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Reset", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Skriv inn navn: <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>I eksemplet ovenfor, når du trykker på tilbakestillingsknappen, blir OnReset -hendelsen utløst og en varslingsmelding vises, og så snart du trykker på OK -knappen på dialogboksen, blir inngangsfeltet ryddet ut.</p> <p><strong>Produksjon</strong></p> <p>Når du trykker på tilbakestillingsknappen, vises varslingsmeldingen.</p> <p>Etter å ha trykket på OK -knappen, vil skjemaet tilbakestilles.</p> <p>Onsarch -arrangement</p> <p>Når en bruker begynner et søk i et element med type = “søk”, skjer onsearch -hendelsen. Denne hendelsen verken bobler eller kan kanselleres, dessuten støtter den bare HTML -tag og er inkludert i DOM -nivå 3.</p> <p><strong>Syntaks</strong></p> <p>Syntaks for onsearch -arrangement er som følger.</p> <p>HTML -syntaks</p> <element onsearch="functionName"> <p>JavaScript -syntaks</p> gjenstand.onseAcrh = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Seacrh", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br><p>Skriv inn det du vil søke og trykk Enter.</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>I eksemplet ovenfor, når du vil skrive noe i søkefeltet og trykke Enter, blir onsearch -hendelsen utløst og en melding vises.</p> <p><strong>Produksjon</strong></p> <p>Etter å ha skrevet Google.com i søkefeltet og trykke Enter.</p> <p>Onselect -arrangement</p> <p>Det oppstår når et stykke tekst er valgt i et element. Det er ikke kansellerbar og ingen av boblene. Den støtter ,, og HTML -tagger og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks</strong></p> <p>Syntaks for OnSelect -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onselect="funtionName()"> <p>JavaScript -syntaks</p> gjenstand.onSelect = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Select", skript); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Velg tekst: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Før du velger.</p> <p>Etter å ha valgt.</p> <p>OnSubmit -arrangement</p> <p>Når en bruker sender inn et skjema, skjer OnSubmit -hendelsen. Denne hendelsen bobler og kan kanselleres, dessuten støtter den bare HTML -taggen og er inkludert i DOM -nivå 2.</p> <p><strong>Syntaks:</strong></p> <p>Syntaks for OnSubmit -hendelsen er som følger.</p> <p>HTML SYNTAX:</p> <element onsubmit="funtionName()"> <p>JavaScript Syntax:</p> gjenstand.onSubmit = funksjon () script; <p>JavaScript AddEventListener () Syntaks:</p> gjenstand.AddEventListener ("Send", skript); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Skriv inn navn: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>I eksemplet ovenfor, når du trykker på Send -knappen, blir OnSubmit -hendelsen utløst og en dialogboks vises og forteller deg at skjemaet ble sendt inn.</p> <p><strong>Produksjon</strong></p> <p>Konklusjon</p> <p>Hendelser som oppstår når en bruker samhandler med en HTML -form kalles JavaScript -skjema -hendelser. Hendelser som faller inn under kategorien JavaScript -skjema -arrangementer er Onblur Event, OnChange Event, OnContextMenu Event, OnFocus Event, OnInput Event, OnInValid Event, OnReset Event, OnSearch Event, OnSelect Event og OnSubmit Event. Alle disse hendelsene blir diskutert i detalj sammen med passende eksempel. </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://no.cyberaxe.org/article/javascript-focus-and-blur-events">« JavaScript Focus og uskarpe hendelser</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/what-is-java">Hva er 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://no.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/difference-between--and--operators-in-c">Forskjell mellom+= og =+operatører i C ++</a> </div> <div class="white-news__text"> I C ++,+= tilfører en verdi til en variabel og tildeler resultatet, mens =+tildeler verdi før du leg... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/batch-apex-in-salesforce">Batch Apex i Salesforce</a> </div> <div class="white-news__text"> Opplæring om hvordan du gjør Mass DML-operasjoner som Sett inn, oppdaterer og sletter med batch-spis... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-trim-a-string-in-golang">Hvordan trimme en streng i Golang</a> </div> <div class="white-news__text"> Strengtrimming er en prosess for å fjerne ekstra mellomrom eller tegn fra begynnelsen eller slutten ... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/anders-fjeld-moe">Anders Fjeld Moe</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://no.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/seaborn-axis-labels">Seaborn Axis -etiketter</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/do-oracle-fusion-considered-better-than-sap">Gjør oracle fusion ansett som bedre enn sap?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-arrayreverse-function-in-php">Hvordan du bruker array_reverse -funksjon i php</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/php">PHP</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-fetch-php-timezone-list">Hvordan hente PHP Timezone List</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-aalerud-aasen">Elias Aalerud Aasen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-the-docker-copy-command-to-transfer-a-file-from-a-docker-container-to-the-host-machine">Hvordan bruke kommandoen “Docker Copy” for å overføre en fil fra en Docker -beholder til vertsmaskinen?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/elias-krogh-svendsen">Elias Krogh Svendsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-are-data-types-in-golang">Hva er datatyper i Golang</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/java">Java</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-convert-a-map-to-a-string-in-java">Hvordan konvertere et kart til en streng i Java?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/mathias-halvorsen">Mathias Halvorsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/html">html</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-create-html-bullet-points">Hvordan lage HTML -kulepunkter?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/aws">Aws</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-aws-systems-manager-session-manager">Hvordan bruke AWS Systems Manager Session Manager?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/daniel-johnsen">Daniel Johnsen</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/java-database-connectivity-with-oracle">Java Database Connectivity med Oracle</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/simen-odegard">Simen Ødegård</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Et nettsted om Linux-operativsystemet. Her finner du mange interessante artikler og nyttige guider</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/postgresql">PostgreSql</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/windows-os">Windows OS</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://no.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://no.cyberaxe.org/category/oracle-database">Oracle Database</a></li> </li> <li class="menu-item"><a href="http://no.cyberaxe.org/all-categories"><b>Alle Kategorier</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>