Wydarzenia formularzy JavaScript

Larysa Witczak

Wydarzenia JavaScript są zdefiniowane jako interakcja między JavaScript i HTML. Zdarzenia występują za każdym razem, gdy strona internetowa jest manipulowana przez użytkownika lub przeglądarkę. Dokument Model Object (DOM) Wersja 3 składa się z zdarzeń JavaScript i są one częścią prawie wszystkich elementów HTML i mogą aktywować kod JavaScript. Kliknięcie przycisku, naciśnięcie klawisza, maksymalizacja okna itp. Są uważane za zdarzenie.

Istnieją różne rodzaje zdarzeń JavaScript, jednak w tym zapisie omówimy konkretnie zdarzenia formy JavaScript.

Zdarzenia, które występują poprzez interakcję użytkownika z formularzem HTML, nazywane są zdarzeniami formularza JavaScript. Istnieją różne rodzaje zdarzeń, które należą do kategorii zdarzeń formularzy JavaScript, które są wymienione poniżej.

Onblur
Onchange
onContextmenu
onfocus
oninput
oninvalidl
Onreset
Onsearch
Onselect
OnSubmit

Każde z wyżej wymienionych wydarzeń omówiono poniżej.

Wydarzenie Onblur

Zdarzenie Onblur ma miejsce, gdy koncentracja elementu zostanie utracona. Jest go głównie używany w kodzie sprawdzania poprawności formularza. Nie bulgot i nie można go anulować. Obsługuje wszystkie tagi HTML inne niż , ,
, , , , , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onblur jest następująca.</p> <p>Składnia HTML</p> <element onblur="functionName()"> <p>Składnia JavaScript</p> obiekt.onBlur = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Blur”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wpisz swoje imię: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>W powyższym przykładzie, gdy użytkownik opuszcza pole wejściowe, zdarzenie OnBlur uruchamia się, a kolor tła pola wejściowego zmienia się na żółty.</p> <p><strong>Wyjście</strong></p> <p>wydarzenie onchange</p> <p>Gdy użytkownik zmienia wartość elementu i opuszcza element, zdarzenie onchange zachodzi. To zdarzenie przypomina zdarzenie OnInput, jednak odróżnia je od zdarzenia OnInput, jest to, że może działać na elemencie i dzieje się, gdy element stracił skupienie.</p> <p>Ponadto może obsługiwać ,,,,,,,. Bubbles, ale nie można go anulować i jest częścią DOM wersja 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onchange jest następująca.</p> <p>Składnia HTML</p> <element onchange="functionName()"> <p>Składnia JavaScript</p> obiekt.onChange = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („zmiana”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Nazwa: <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>W powyższym przykładzie, gdy użytkownik wchodzi do swojego nazwy w polu wejściowym, a następnie opuszcza pole wejściowe, zdarzenie onchange jest wyzwalane, ponieważ element (pole wejściowe) straciło skupienie, a w rezultacie małe litery są przeniesione na litery górne.</p> <p><strong>Wyjście</strong></p> <p>Wydarzenie onContextmenu</p> <p>Gdy menu kontekstowe elementu jest otwarte za pomocą kliknięcia prawym przyciskiem myszy, zdarzenie OnContextMenu dzieje się. Bubbles i można również anulować. To wydarzenie obsługuje wszystkie tagi HTML i jest zawarte w DOM w wersji 3.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onContextMenu podano poniżej.</p> <p>Składnia HTML</p> <element oncontextmenu="funtionName()"> <p>Składnia JavaScript</p> obiekt.onContextMenu = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („contextMenu”, skrypt); <p>Przykład</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>W powyższym przykładzie, po kliknięciu w polu wejściowym, zdarzenie OnContextMenu uruchomi się, a najpierw pojawi się pole DialoAg, informując, że właśnie wykonałeś prawym przyciskiem myszy, a po kliknięciu OK w oknie dialogowym Otwarte menu kontekstowe zostanie otwarte.</p> <p><strong>Wyjście</strong></p> <p>Teraz, gdy klikniesz pole wejściowe prawym przyciskiem myszy, pojawi się okno dialogowe.</p> <p>Po kliknięciu OK otwarte menu kontekstowe.</p> <p>Wydarzenie Onfocus</p> <p>Zdarzenie Onfocus ma miejsce, gdy elementy są skupione. Jest najczęściej używany z, i . Nie bulgot i nie można go anulować. Obsługuje wszystkie tagi HTML inne niż , , <br>, , , <iframe>, , , , , i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onfocus jest następująca.</p> <p>Składnia HTML</p> <element onfocus="functionName"> <p>Składnia JavaScript</p> obiekt.onfocus = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Focus”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wpisz swoje imię: <br><p>Funkcja zmienia kolor tła pola wejściowego, gdy jest ono skupione.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Wyjście</strong></p> <p>Po kliknięciu pola wejściowego kolor tła pola wejściowego zostanie zmieniony na niebieski. Pokazaliśmy poniżej i po polu wejściowym poniżej.</p> <p><strong>Zanim</strong></p> <p><strong>Po</strong></p> <p>zdarzenie oninput</p> <p>Kiedy użytkownik daje wejście do elementu, zdarzenie oninput zdarzenia. To zdarzenie przypomina zdarzenie onchange, jednak odróżnia je od zdarzenia onchange, jest to, że dzieje się to natychmiast po wyrzuceniu wartości elementu. Ponadto może obsługiwać ,,,,,,,. Bubbles, ale nie można go anulować i jest częścią DOM wersja 3.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia oninput jest następująca.</p> <p>Składnia HTML</p> <element oninput="functionName"> <p>Składnia JavaScript</p> obiekt.onInput = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („wejście”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Nazwa: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>W powyższym przykładzie, gdy próbujesz zmienić wartość wewnątrz pola wejściowego, pojawia się zdarzenie OnInput i pojawia się okno dialogowe, które informuje, że właśnie zmieniłeś wartość pola wejściowego.</p> <p><strong>Wyjście</strong></p> <p>Gdy tylko zmiana wartości wejściowej wartość pola, komunikat ostrzeżenia pojawi się.</p> <p>zdarzenie oninvalid</p> <p>Gdy użytkownik podaje dane wejściowe, które jest niedozwolone, lub nieprawidłowe wejście, zdarzenie OnInvalid zachodzi. To wydarzenie nie ma bąbelków, ale można je anulować. Obsługuje tylko znacznik HTML i jest zawarty na poziomie DOM 3.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia oninvalid jest następująca.</p> <p>Składnia HTML</p> <element oninvalid="functionName"> <p>Składnia JavaScript</p> obiekt.onInValid = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Nieprawidłowy”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><form><br>Wpisz swoje imię:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>W powyższym przykładzie, jeśli naciśniesz przycisk Prześlij bez podania swojego nazwiska w polu wejściowym, zdarzenie oninValid uruchomi się, a komunikat o alercie pojawi się informujący, że pole nazwy jest wymagane.</p> <p><strong>Wyjście</strong></p> <p>Wydarzenie Onreset</p> <p>Gdy użytkownik resetuje formę zdarzenia OnReset. Ten bąbelki zdarzeń i może zostać anulowane, co więcej, obsługuje tylko HTML i jest zawarty w DOM w wersji 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia OnReset jest następująca.</p> <p>Składnia HTML</p> <element onreset="functionName"> <p>Składnia JavaScript</p> obiekt.onReset = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („reset”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Wprowadź imię: <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>W powyższym przykładzie, po naciśnięciu przycisku resetowania, zdarzenie OnReset zostaje uruchomione i pojawia się komunikat ostrzegawczy, a gdy tylko naciśniesz przycisk OK w oknie dialogowym, pole wejściowe zostanie wyczyszczone.</p> <p><strong>Wyjście</strong></p> <p>Po naciśnięciu przycisku resetowania pojawia się komunikat ostrzegawczy.</p> <p>Po naciśnięciu przycisku OK, formularz zresetuje.</p> <p>wydarzenie onsearch</p> <p>Kiedy użytkownik rozpoczyna wyszukiwanie elementu z type = „wyszukiwanie”, zdarzenie onsearch zdarza się. To wydarzenie, ani bąbelki, ani nie można anulować, a ponadto obsługuje tylko znacznik HTML i jest zawarty na poziomie DOM 3.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onsearch jest następująca.</p> <p>Składnia HTML</p> <element onsearch="functionName"> <p>Składnia JavaScript</p> obiekt.onSeAcrh = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Seacrh”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><p>Wpisz to, co chcesz wyszukać i naciśnij 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>W powyższym przykładzie, kiedy wpiszesz coś w pasku wyszukiwania i naciśnij ENTER, wydarzenie onsearch zostaje uruchomione, a wiadomość zostanie wyświetlona, informując, że wyszukiwanie się rozpoczęło.</p> <p><strong>Wyjście</strong></p> <p>Po wpisaniu Google.com na pasku wyszukiwania i naciśnięcie Enter.</p> <p>zdarzenie onselect</p> <p>Występuje, gdy kawałek tekstu jest wybierany w elemencie. Nie można go anulować i żaden bąbel. Obsługuje, i tagi HTML i jest zawarte w DOM poziom 2.</p> <p><strong>Składnia</strong></p> <p>Składnia zdarzenia onselect jest następująca.</p> <p>Składnia HTML</p> <element onselect="funtionName()"> <p>Składnia JavaScript</p> obiekt.onSelect = function () script; <p>Składnia JavaScript addEventListener ()</p> obiekt.addEventListener („Wybierz”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br>Wybierz tekst: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Wyjście</strong></p> <p>Przed wybraniem.</p> <p>Po wybraniu.</p> <p>Wydarzenie onSubmit</p> <p>Gdy użytkownik przesyła formularz, zdarzenie onSubmit zdarza się. Te zdarzenia bąbelki i można zostać anulowane, co więcej, obsługuje tylko znacznik HTML i jest zawarty na poziomie DOM 2.</p> <p><strong>Składnia:</strong></p> <p>Składnia zdarzenia onSubmit jest następująca.</p> <p>Składnia HTML:</p> <element onsubmit="funtionName()"> <p>Składnia JavaScript:</p> obiekt.onSubmit = function () script; <p>JavaScript addEventListener () Składnia:</p> obiekt.addEventListener („Zwrot”, skrypt); <p>Przykład</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Wprowadź imię: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>W powyższym przykładzie, po naciśnięciu przycisku Prześlij, wydarzenie onSubmit zostaje uruchomione i pojawia się okno dialogowe informujące, że formularz został przesłany.</p> <p><strong>Wyjście</strong></p> <p>Wniosek</p> <p>Zdarzenia, które występują, gdy użytkownik wchodzi w interakcje z formularzem HTML, nazywane są zdarzeniami formularzy JavaScript. Wydarzenia, które należą do kategorii wydarzeń JavaScript Form, to wydarzenie Onblur, Onchange Event, OncontextMenu Event, Onfocus Event, Oninput Event, Oninvalid Event, OnReset Event, OnSearch Event, OnSelect Event i OnSubmit Event. Wszystkie te wydarzenia są szczegółowo omówione wraz z odpowiednim przykładem. </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://pl.cyberaxe.org/article/javascript-focus-and-blur-events">« Wydarzenia JavaScript Focus i Blur</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://pl.cyberaxe.org/article/what-is-java">Co to jest 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://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-set-variable-command-in-powershell">Jak używać polecenia set-variable w PowerShell</a> </div> <div class="white-news__text"> CMDLET „SET-VARIAble” ustawia lub zmienia wartość istniejącej zmiennej. Ponadto, jeśli wymagana zmie... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/justyna-flak">Justyna Flak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/powershell">PowerShell</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">Jak korzystać z cmdlet podobytw w PowerShell</a> </div> <div class="white-news__text"> CMDLET „SORT-OBject” jest odpowiedzialny za sortowanie obiektów na podstawie ich właściwości. Może s... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a> </div> <div class="white-news__name"> <a href="http://pl.cyberaxe.org/article/conditions-and-if-then-statements-in-c">Warunki, a jeśli wówczas stwierdzenia w C#</a> </div> <div class="white-news__text"> Warunki w C# Oceń do prawdziwego lub fałszu. Warunki podejmują decyzje, które blok kodu należy wykon... </div> <div class="white-news__author"> <a href="http://pl.cyberaxe.org/author/bruno-dobrowolski">Bruno Dobrowolski</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://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-install-and-use-oracle-virtualbox-extension-pack">Jak zainstalować i korzystać z Oracle VirtualBox Extension Pack?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/numpy-save-dict">Numpy Save Dict</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/albert-szczesniak">Albert Szcześniak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/seaborn-save-plot">Seborn Save Fout</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/renata-borowiec">Renata Borowiec</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/seaborn-horizontal-bar-plot">Seborn poziome działki barowe</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/python">Pyton</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/seaborn-axis-labels">Etykiety osi morskiej</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/pani-julia-szwed">Pani Julia Szwed</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/php">php</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-an-undefined-index-error-in-php-and-how-to-fix-it">Jaki jest niezdefiniowany błąd indeksu w PHP i jak go naprawić?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/larysa-witczak">Larysa Witczak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-aws-tools-and-devops-are-needed-to-develop-a-web-app">To, co AWS narzędzia i DevOps są potrzebne do opracowania aplikacji internetowej?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/zofia-gora">Zofia Góra</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-ec2-is-different-from-elastic-beanstalk">Czym EC2 różni się od elastycznej lodu fasoli?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/igor-skrzypek">Igor Skrzypek</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/how-to-use-aws-systems-manager-session-manager">Jak korzystać z menedżera sesji AWS Systems Manager?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/makary-stasiak">Makary Stasiak</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://pl.cyberaxe.org/category/aws">AWS</a> </div> <div class="header-news__name"> <a href="http://pl.cyberaxe.org/article/what-is-the-difference-between-aws-aurora-and-mysql">Jaka jest różnica między AWS aurora i mysql?</a> </div> <div class="header-news__author"> <a href="http://pl.cyberaxe.org/author/bruno-dobrowolski">Bruno Dobrowolski</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Witryna poświęcona systemowi operacyjnemu Linux. Tutaj znajdziesz wiele ciekawych artykułów i przydatnych poradników</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/python">Pyton</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/windows-os">System systemu Windows</a></li> </li> </ul> </div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/docker">Doker</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/c-sharp">c ostre</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://pl.cyberaxe.org/category/oracle-database">Baza danych Oracle</a></li> </li> <li class="menu-item"><a href="http://pl.cyberaxe.org/all-categories"><b>Wszystkie kategorie</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>