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/sqlite">Sqlite</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-download--install-sqlite-tools">Hvordan laste ned og installere SQLite Tools?</a> </div> <div class="white-news__text"> SQLite er et mye brukt, lett og effektivt databasestyringssystem som du enkelt kan installere i Wind... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/jorgen-christiansen">Jørgen Christiansen</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/fedora">Fedora</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-enable-the-rpm-fusion-repository-on-fedora">Hvordan aktivere RPM Fusion Repository på Fedora</a> </div> <div class="white-news__text"> Omfattende opplæring om hvordan du aktiverer RPM Fusion Free og ikke-frie pakkelagre på Fedora og hv... </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/c-programming">C programmering</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-print-an-address-of-a-variable-in-c-programming">Hvordan skrive ut en adresse på en variabel i C -programmering?</a> </div> <div class="white-news__text"> Skrive ut adressen til en variabel i C -programmering kan gjøres ved hjelp av... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/daniel-berntsen">Daniel Berntsen</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/how-to-unzip-files-in-python">Hvordan pakke ut filer i Python</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/python">Python</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/python-count-occurrences-in-list">Python teller forekomster i listen</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/erik-roed">Erik Røed</a> </div> </div> </div> </div> <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/how-do-i-check-if-a-string-is-empty-in-python">Hvordan sjekker jeg om en streng er tom i python</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/sqlite">Sqlite</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-use-sqlite-viewer-web-app">Hvordan bruke SQLite Viewer Web App</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/alexander-sorlie">Alexander Sørlie</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://no.cyberaxe.org/category/salesforce">Salesforce</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/salesforce-data-loader">Salesforce Data Loader</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/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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-does-atob-method-do-in-javascript">Hva gjør ATOB -metoden i JavaScript</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/powershell">Kraftskall</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/can-you-explain-the-functionality-of-powershells-get-location-command">Kan du forklare funksjonaliteten til PowerShells kommando?</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-check-typescript-version">Hvordan sjekke typeskriptversjonen</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/typescript">Typeskrift</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/what-is-typescript-and-how-to-use-it">Hva er TypeScript og hvordan du bruker det?</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> <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>