JavaScript -Formularereignisse

JavaScript -Ereignisse werden als die Interaktion zwischen JavaScript und HTML definiert. Ereignisse treten jedes Mal auf, wenn die Webseite vom Benutzer oder dem Browser manipuliert wird. DOM -Version 3 des Dokumentobjektmodells (DOM) besteht aus JavaScript -Ereignissen. Diese sind Teil aller HTML -Elemente und können Javascript -Code aktivieren. Klicken Sie auf eine Taste, Drücken einer Taste, Maximierung eines Fensters usw. werden als Ereignis angesehen.

Es gibt verschiedene Arten von JavaScript-Ereignissen, wir werden jedoch speziell JavaScript-Formularereignisse in diesem Artikel diskutieren.

Ereignisse, die durch die Interaktion eines Benutzers mit einem HTML -Formular auftreten, werden als JavaScript -Formularereignisse bezeichnet. Es gibt verschiedene Arten von Ereignissen, die unter die Kategorie von JavaScript -Formularereignissen fallen, die unten aufgeführt sind.

Onblur
bei Änderung
OncontextMenu
im Fokus
aufInput
aufinvalidl
Onreset
Onsearch
OnSelect
ONSUBMIT

Jedes der oben genannten Ereignisse wird unten diskutiert.

Onblur -Veranstaltung

Das Onblur -Ereignis tritt auf, wenn der Fokus eines Elements verloren geht. Es wird hauptsächlich im Validierungscode eines Formulars verwendet. Es sprudelt nicht und kann nicht storniert werden. Es unterstützt alle anderen HTML -Tags als , ,
, , , , , , , , und ist in DOM Level 2 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Onblur -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element onblur="functionName()"> <p>JavaScript -Syntax</p> Objekt.onblur = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("Blur", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br>Gib deinen Namen ein: <br><script><br>function functionName() <br>document.getElementById("tutorial").style.background = "yellow";<br><br></script><br></body><br></html> <p>Wenn der Benutzer im obigen Beispiel das Eingangsfeld verlässt, wird das Onblur -Ereignis ausgelöst und die Hintergrundfarbe des Eingangsfeldes ändert sich in Gelb.</p> <p><strong>Ausgang</strong></p> <p>Onchange -Event</p> <p>Wenn ein Benutzer den Wert eines Elements ändert und das Element verlässt, findet das OnChange -Ereignis statt. Dieses Ereignis ähnelt jedoch dem Oninput -Ereignis, was es jedoch vom Oninput -Ereignis unterscheidet, dass es am Element funktionieren kann und geschieht, wenn ein Element seinen Fokus verloren hat.</p> <p>Darüber hinaus kann es unterstützen, ,,,, ,,, und HTML -Tags. Es sprudelt, kann aber nicht storniert werden und ist Teil von DOM Version 2.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Onchange -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element onchange="functionName()"> <p>JavaScript -Syntax</p> Objekt.onchange = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("Change", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br>Name: <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>Wenn ein Benutzer im obigen Beispiel seinen Namen in das Eingabefeld eingibt und dann das Eingangsfeld verlässt, wird das Onchange -Ereignis ausgelöst, da ein Element (Eingabefeld) seinen Fokus verloren hat und infolgedessen Kleinbuchstaben in Großbuchstaben verschoben werden.</p> <p><strong>Ausgang</strong></p> <p>OncontextMenu -Ereignis</p> <p>Wenn das Kontextmenü eines Elements mit dem Rechtsklick geöffnet wird, findet das OncontextMenu-Ereignis statt. Es sprudelt und ist auch stornierbar. Diese Veranstaltung unterstützt alle HTML -Tags und ist in DOM Version 3 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des OncontextMenu -Ereignisses ist unten angegeben.</p> <p>HTML -Syntax</p> <element oncontextmenu="funtionName()"> <p>JavaScript -Syntax</p> Objekt.oncontextMenu = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("contextMenu", Skript); <p>Beispiel</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>Wenn Sie im obigen Beispiel mit der rechten Maustaste auf das Eingabebuch klicken, wird das Ereignis oncontextMenu ausgelöst. Zuerst wird ein Dialoag -Feld angezeigt.</p> <p><strong>Ausgang</strong></p> <p>Wenn Sie nun mit der rechten Maustaste auf das Eingangsfeld klicken, wird das Dialogfeld angezeigt.</p> <p>Nach dem Klicken auf OK wird das Kontextmenü geöffnet.</p> <p>Onfocus -Event</p> <p>Das Onfocus -Ereignis tritt auf, wenn ein Element fokussiert ist. Es wird hauptsächlich mit, und verwendet . Es sprudelt nicht und kann nicht storniert werden. Es unterstützt alle anderen HTML -Tags als , , <br>, , , <iframe>, , , , , und ist in DOM Level 2 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Onfocus -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element onfocus="functionName"> <p>JavaScript -Syntax</p> Objekt.onfocus = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("Focus", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br>Gib deinen Namen ein: <br><p>Eine Funktion ändert die Hintergrundfarbe des Eingangsfeldes, wenn sie fokussiert ist.</p><br><script><br>function abFunction(focus) <br>focus.style.background = "pink";<br><br></script><br></body><br></html> <p><strong>Ausgang</strong></p> <p>Wenn Sie auf das Eingabefeld klicken, wird die Hintergrundfarbe des Eingangsfeldes in Blau geändert. Wir haben den Vorher und nach dem Zustand des Eingabefeldes unten gezeigt.</p> <p><strong>Vor</strong></p> <p><strong>Nach</strong></p> <p>aufInput -Event</p> <p>Wenn ein Benutzer eine Eingabe für ein Element gibt. Dieses Ereignis ähnelt jedoch dem Onchange -Ereignis, was es jedoch vom Onchange -Ereignis unterscheidet, ist, dass es unmittelbar nach dem Chnaged eines Elementwerts geschieht. Darüber hinaus kann es unterstützen, ,,,, ,,, und HTML -Tags. Es sprudelt, kann aber nicht abgesagt werden und ist Teil von DOM Version 3.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Oninput -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element oninput="functionName"> <p>JavaScript -Syntax</p> Objekt.onInput = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("input", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br>Name: <br><script><br>function functionName() <br>alert("You just changed the input field value!");<br><br></script><br></body><br></html> <p>Wenn Sie im obigen Beispiel versuchen, den Wert im Eingangsfeld zu ändern.</p> <p><strong>Ausgang</strong></p> <p>Sobald Sie den Eingabefeldwert ändern, wird die Warnmeldung angezeigt.</p> <p>auf deminvalid Ereignis</p> <p>Wenn ein Benutzer eine Eingabe angibt, die nicht zulässig ist, oder eine ungültige Eingabe des Oninvalid -Ereignisses erfolgt. Dieses Ereignis sprudelt nicht, kann aber abgesagt werden. Es unterstützt nur das HTML -Tag und ist in DOM Level 3 enthalten.</p> <p><strong>Syntax</strong></p> <p>Syntax des OninValid -Ereignisses lautet wie folgt.</p> <p>HTML -Syntax</p> <element oninvalid="functionName"> <p>JavaScript -Syntax</p> Objekt.oninvalid = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.addEventListener ("ungültig", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br><form><br>Gib deinen Namen ein:<br><br><br></form><br><script><br>function functionName() <br>alert("Name field required!");<br><br></script><br></body><br></html> <p>Wenn Sie im obigen Beispiel auf die Taste Sendene drücken, ohne Ihren Namen im Eingangsfeld anzugeben, wird das OninValid -Ereignis ausgelöst und eine Warnmeldung wird angezeigt, dass das Feld des Namens erforderlich ist.</p> <p><strong>Ausgang</strong></p> <p>Onreset -Event</p> <p>Wenn ein Benutzer ein Formular zurücksetzt, tritt das OnReset -Ereignis auf. Diese Veranstaltung bluft und kann abgesagt werden. Darüber hinaus unterstützt es nur die HTML und ist in DOM Version 2 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des OnReset -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element onreset="functionName"> <p>JavaScript -Syntax</p> Objekt.onReset = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("Reset", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br><form onreset="functionName()"><br>Name eingeben: <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>Wenn Sie im obigen Beispiel die Taste Reset -Reset -Taste drücken, wird das OnReset -Ereignis ausgelöst und eine Warnmeldung wird angezeigt. Sobald Sie im Dialogfeld OK -Taste drücken, wird das Eingabefeld gelöscht.</p> <p><strong>Ausgang</strong></p> <p>Wenn Sie die RESET -Taste drücken, wird die Warnmeldung angezeigt.</p> <p>Nach dem Drücken der OK -Taste wird das Formular zurückgesetzt.</p> <p>Onsearch -Ereignis</p> <p>Wenn ein Benutzer eine Suche in einem Element mit type = „Suche“ beginnt, erfolgt das Onsearch -Ereignis. Dieses Ereignis wird weder Blasen noch abgesagt werden, außerdem unterstützt es nur HTML -Tag und ist in DOM Level 3 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Onsearch -Ereignisses ist wie folgt.</p> <p>HTML -Syntax</p> <element onsearch="functionName"> <p>JavaScript -Syntax</p> Objekt.onseach = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.AddEventListener ("SeaCrh", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br><p>Geben Sie ein, was Sie suchen möchten, und drücken Sie die Eingabetaste.</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>Wenn Sie im obigen Beispiel etwas in die Suchleiste eingeben und die Eingabetaste drücken, wird das OnSearch -Ereignis ausgelöst und eine Nachricht wird angezeigt, in der Sie mit der Suche nach der Suche angezeigt werden.</p> <p><strong>Ausgang</strong></p> <p>Nach dem Eingeben von Google.com in der Suchleiste und Drückeneingabe.</p> <p>OnSelect -Veranstaltung</p> <p>Es tritt auf, wenn ein Textstück in einem Element ausgewählt wird. Es ist nicht stornierbar und weder Blasen. Es unterstützt,, und HTML -Tags und ist in DOM Level 2 enthalten.</p> <p><strong>Syntax</strong></p> <p>Die Syntax des Onselect -Ereignisses lautet wie folgt.</p> <p>HTML -Syntax</p> <element onselect="funtionName()"> <p>JavaScript -Syntax</p> Objekt.Onselect = function () script; <p>JavaScript addEventListener () Syntax</p> Objekt.addEventListener ("select", script); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br>Text auswählen: <br><script><br>function myFunction() <br>alert("Text selected");<br><br></script><br></body><br></html> <p><strong>Ausgang</strong></p> <p>Vor der Auswahl.</p> <p>Nach Auswahl.</p> <p>ONSUBMIT -Ereignis</p> <p>Wenn ein Benutzer ein Formular einreicht, erfolgt das OnSubmit -Ereignis. Diese Veranstaltung bluft und kann abgesagt werden. Darüber hinaus unterstützt es nur das HTML -Tag und ist in DOM Level 2 enthalten.</p> <p><strong>Syntax:</strong></p> <p>Die Syntax des Onsubmit -Ereignisses ist wie folgt.</p> <p>HTML -Syntax:</p> <element onsubmit="funtionName()"> <p>JavaScript -Syntax:</p> Objekt.OnSubmit = function () script; <p>JavaScript addEventListener () Syntax:</p> Objekt.addEventListener ("subieren", Skript); <p>Beispiel</p> <!DOCTYPE html><br><html><br><body><br><form action="/action_page.php" onsubmit="functionName()"><br>Name eingeben: <br><br></form><br><script><br>function functionName() <br>alert("Form submitted!");<br><br></script><br></body><br></html> <p>Wenn Sie im obigen Beispiel auf die Taste Sendene drücken, wird das ONSUBMIT -Ereignis ausgelöst und ein Dialogfeld wird angezeigt, dass das Formular eingereicht wurde.</p> <p><strong>Ausgang</strong></p> <p>Abschluss</p> <p>Ereignisse, die auftreten, wenn ein Benutzer mit einem HTML -Formular interagiert, werden als JavaScript -Formularereignisse bezeichnet. Ereignisse, die unter die Kategorie der JavaScript -Formularereignisse fallen. Alle diese Ereignisse werden ausführlich zusammen mit geeigneten Beispielen erörtert. </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://www.cyberaxe.org/article/javascript-focus-and-blur-events">« JavaScript Focus- und Blur -Ereignisse</a></li> <li class="prev-next__item prev-next__item--right"><a href="http://www.cyberaxe.org/article/what-is-java">Was ist 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://www.cyberaxe.org/category/php">Php</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-break-and-continue-in-php">Wie man Pause benutzt und in PHP fortgesetzt wird?</a> </div> <div class="white-news__text"> In PHP wird die Break -Anweisung verwendet, um eine Schleife oder eine Schaltanweisung zu beenden, w... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c-programming">C -Programmierung</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-print-an-address-of-a-variable-in-c-programming">So drucken Sie eine Adresse einer Variablen in der C -Programmierung?</a> </div> <div class="white-news__text"> Das Drucken der Adresse einer Variablen in der C -Programmierung kann mit dem durchgeführt werden... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> <div class="white-news white-news--article"> <div class="white-news__cat"> <a href="http://www.cyberaxe.org/category/c">C ++</a> </div> <div class="white-news__name"> <a href="http://www.cyberaxe.org/article/how-to-find-the-size-of-a-string-in-c">So finden Sie die Größe einer Zeichenfolge in C++?</a> </div> <div class="white-news__text"> Um die Größe einer Zeichenfolge in C ++ zu finden, können Sie die Funktionen oder Schleifen wie für ... </div> <div class="white-news__author"> <a href="http://www.cyberaxe.org/author/gian-eisenlauer">Gian Eisenlauer</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://www.cyberaxe.org/category/postgresql">PostgreSQL</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/postgresql-create-index-concurrently">Postgresql erstellen Index gleichzeitig</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/python">Python</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/numpy-astype">Numpy Astype</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/golang">Golang</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-are-structures-in-golang">Was sind Strukturen in Golang?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/hussein-burkhard">Hussein Burkhard</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/docker">Docker</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/docker-engine-plugins">Docker -Motor -Plugins</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/ahmed-stockert">Ahmed Stöckert</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/javascript">JavaScript</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-run-typescript-in-vs-code">So führen Sie TypeScript in VS -Code aus</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-should-be-minimum-system-specifications-for-oracle-linux">Was sollte minimale Systemspezifikationen für Oracle Linux sein?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/mohamed-flore">Mohamed Flore</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-get-service-command-in-powershell">So verwenden Sie den Befehl „Get-Service“ in PowerShell</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/fr-chris-frisch">Fr. Chris Frisch</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-write-output-cmdlet-in-powershell">So verwenden Sie das CMDLET Write-Output in PowerShell?</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jessica-schimmer">Jessica Schimmer</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/powershell">Power Shell</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/how-to-use-the-sort-object-cmdlet-in-powershell">So verwenden Sie das Sort-Objekt-CMDLet in PowerShell</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/lars-daub">Lars Daub</a> </div> </div> </div> </div> <div> <div> <div class="header-news"> <div class="header-news__cat"> <a href="http://www.cyberaxe.org/category/php">Php</a> </div> <div class="header-news__name"> <a href="http://www.cyberaxe.org/article/what-is-the-difference-between---and--operators-in-php">Was ist der Unterschied zwischen .= und += Operatoren in PHP</a> </div> <div class="header-news__author"> <a href="http://www.cyberaxe.org/author/jean-dengler">Jean Dengler</a> </div> </div> </div> </div> </div> </div> <footer> <div class="container"> <div class="footer"> <div class="footer__about">Eine Seite über das Linux-Betriebssystem. Hier finden Sie viele interessante Artikel und nützliche Ratgeber</div> <div class="footer__cats"> <ul class="sub-menu"> <li class="menu-item"><a href="http://www.cyberaxe.org/category/python">Python</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/postgresql">PostgreSQL</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-linux">Oracle Linux</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c">C ++</a></li> <li class="menu-item"><a href="http://www.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://www.cyberaxe.org/category/docker">Docker</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/c-sharp">c scharf</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/r">R</a></li> <li class="menu-item"><a href="http://www.cyberaxe.org/category/oracle-database">Oracle -Datenbank</a></li> </li> <li class="menu-item"><a href="http://www.cyberaxe.org/all-categories"><b>Alle Kategorien</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>