JavaScript Focus og uskarpe hendelser

HTML DOM inkluderer forskjellige JavaScript -hendelser som å klikke på en knapp, trykke på en tast, maksimere et vindu osv. Hendelser er interaksjoner mellom HTML og JavaScript som skjer når en webside blir manipulert av enten brukeren eller nettleseren.

Det er mange kategorier av JavaScript -hendelser, men i denne artikkelen vil vi understreke bruken av JavaScript Focus og uskarpe hendelser.

Når HTML -elementer får fokus eller mister fokus, skjer JavaScript -fokuset eller uskarpe hendelser som er en del av Focusevent -objektet.

Hendelsene som er klassifisert i kategorien JavaScript Focus og Blur -hendelser er demonstrert nedenfor:

Onblur -arrangementet
Onfocus -arrangement
Onfocusin -hendelse
Onfocusout -arrangement

Hver av de ovennevnte hendelsene er diskutert nedenfor.

Onblur -arrangementet

Onblur -hendelsen skjer når fokuset til et objekt 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><p>Funksjonen vil endre små bokstaver til store bokstaver.</p><br><script><br>function myFunc() <br>var x = document.getElementById("fname");<br>x.value = x.value.toUpperCase();<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du forlater inngangsfeltet, oppstår onblur-hendelsen og brevene med lavere tilfeller blir flyttet til øvre sakbrev.</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>Onfocusin -hendelse</p> <p>Onnfocusin -hendelsen er den samme som Onfocus -hendelsen og skjer når et element bare får fokus. 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 Onfocusin -hendelsen er som følger.</p> <p>HTML -syntaks</p> <element onfocusin="functionName()"> <p>JavaScript -syntaks</p> gjenstand.onFocusin = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Focusin", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Navn: <br><p>Klikk på inngangsfeltet</p><br><script><br>function abFunction() <br>document.getElementById("fname").style.backgroundColor = "pink";<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Før du klikker på inngangsfeltet.</p> <p>Etter å ha klikket på inngangsfeltet, vil bakgrunnsfargen på inngangsfeltet bli endret til rosa.</p> <p>Onfocusout -arrangement</p> <p>Onnfocusout -hendelsen er den samme som Onblur -hendelsen og skjer når et element bare mister fokus. 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 Onfocusout -hendelsen er som følger.</p> <p><strong>HTML -syntaks</strong></p> <element onfocusout="functionName()"> <p>JavaScript -syntaks</p> gjenstand.OnFocusout = funksjon () script; <p>JavaScript AddEventListener () Syntaks</p> gjenstand.AddEventListener ("Focusout", manus); <p>Eksempel</p> <!DOCTYPE html><br><html><br><body><br>Skriv inn navnet ditt: <br><p>La inngangsfeltet for å skifte bokstaver til øvre sak til øvre sak.</p><br><script><br>function abFunction() <br>var out = document.getElementById("fname");<br>out.value = out.value.toUpperCase();<br><br></script><br></body><br></html> <p><strong>Produksjon</strong></p> <p>Når du forlater inngangsfeltet, blir brevene i små bokstaver flyttet til store bokstaver.</p> <p>Konklusjon</p> <p>Hendelser som oppstår når et element vinner eller mister fokuset blir referert til som JavaScript Focus og uskarpe hendelser. Hendelser som er klassifisert i kategorien JavaScript Focus og Blur -arrangementer er Onblur Event, Onfouc Event, Onfocusin Event og OnFocusout 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-bitwise-operators">« JavaScript bitvis operatører</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://no.cyberaxe.org/article/javascript-form-events">JavaScript -skjema hendelser »</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/oracle-database">Oracle Database</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/how-to-cache-oracle-sequence-to-improve-data-dictionary-resources">Hvordan cache Oracle Sequence for å forbedre dataordboksressursene?</a> </div> <div class="white-news__text"> Alternativene Cache, Noorder og Keep kan brukes til å cache Oracle Sequence for å forbedre datagboks... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/martin-berge">Martin Berge</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://no.cyberaxe.org/category/c-sharp">C skarp</a> </div> <div class="white-news__name"> <a href="http://no.cyberaxe.org/article/break-and-continue-statements-in-c">Bryt og fortsett uttalelser i C#</a> </div> <div class="white-news__text"> Break -uttalelsen kan forlate en sløyfe tidlig, mens fortsette kan hoppe over visse iterasjoner av e... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/anders-fjeld-moe">Anders Fjeld Moe</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/books-and-guides-for-c-language">Bøker og guider for C -språk</a> </div> <div class="white-news__text"> Det er 6 nyttige bøker og guider for å lære C -språk. Følg denne artikkelen for å lære i detalj om d... </div> <div class="white-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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/python-not-all-arguments-converted-during-string-formatting">Python Ikke alle argumenter som er konvertert under strengformatering</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> <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/convert-a-string-to-json-python">Konverter en streng til Json Python</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/r">R</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-create-an-empty-data-frame-r">Hvordan lage en tom dataramme r</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/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-does-onclick-event-work-in-javascript">Hvordan fungerer OnClick -arrangementet i JavaScript</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/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-convert-string-to-integer-type-in-golang">Hvordan konvertere streng til heltallstype i Golang?</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/windows-os">Windows OS</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-to-turn-on-remote-desktop-on-pc">Hvordan slå på eksternt skrivebord på PC</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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/what-is-import-java-io--in-java">Hva er import Java.io.*; I Java?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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/how-to-install-oracle-instant-client-in-linux">Hvordan installere Oracle Instant Client i Linux?</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/how-to-use-get-adprincipalgroupmembership--in-powershell">Hvordan bruke get-adprincipalGroupMembership i PowerShell</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/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://no.cyberaxe.org/article/how-does-docker-differ-from-docker-desktop">Hvordan skiller Docker seg fra Docker Desktop?</a> </div> <div class="header-news__author"> <a href="http://no.cyberaxe.org/author/oskar-fossum">Oskar Fossum</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>