Änderung des JavaScript-Eingabewerts
Dieses kurze Tutorial behandelt die Verwendung des addEventListener in JavaScript.
das input Event in JavaScript
Das input-Ereignis ist mit den folgenden Arten von HTML-Elementen verbunden.
- Eingabetyp - Textfelder, Optionsfeld und Kontrollkästchen
- Textbereichstyp
- Dropdown- oder Auswahltyp
Immer wenn sich ein Wert eines solchen Elements ändert, wird das input-Ereignis ausgelöst. Es gibt einen signifikanten Unterschied zwischen den Ereignissen Eingabe und Änderung, bei denen das Ereignis Eingabe jedes Mal ausgelöst wird, wenn sich der Elementwert ändert, das Ereignis Änderung jedoch nur ausgelöst wird, wenn das Element seinen Fokus verliert.
Außerdem ist die den Eingabe- und Textbereichselementen zugeordnete Ereignisschnittstelle das InputEvent. Bei den anderen Elementtypen wäre es die generische Event-Schnittstelle.
das Eingabeereignis mit JavaScript-Ereignis-Listener
Bei einer Benutzerinteraktion kann ein Ereignis auf dem Ziel ausgelöst werden. Die Web-API ermöglicht die Registrierung von Ereignis-Listenern, bei denen eine Funktion bei einem bestimmten Ereignis aufgerufen wird, das auf einem Zielelement ausgelöst wird.
Das Folgende ist die grundlegende Syntax zum Registrieren eines Ereignis-Listeners für ein Ereignis vom Typ Eingabe.
Syntax:
addEventListener(event_type, listener);
Der Parameter event_type ist der Ereignistyp als Zeichenfolgendarstellung. In diesem Szenario wäre der Ereignistyp Eingang.
Der listener ist die JavaScript-Funktion, die aufgerufen wird, wenn ein Ereignis ausgelöst wird. Diese Funktion oder dieses Objekt erhält sofort eine Benachrichtigung, wenn das angegebene Ereignis ausgelöst wurde.
Lassen Sie uns eine einfache HTML-Seite mit Eingabe- und Absatzelementen erstellen, wie im Folgenden gezeigt.
Code - HTML:
<html>
<head>
</head>
<body>
<input placeholder="your name" name="name"/>
<p id="nameList"></p>
<script type="text/javascript" src="inputev.js"></script>
</body>
</html>
Zusätzlich haben wir die JavaScript-Datei inputev.js in die HTML-Seite eingebunden. Verwenden wir JavaScript-Logik, um einen Ereignis-Listener für das Eingabeelement zu registrieren.
Code - inputev.js:
// make the link to the element objects
const inputField = document.querySelector('input');
const displayAreaField = document.getElementById('nameList');
// adding the event listener for input event type
inputField.addEventListener('input', addNames);
// addNames is the function to be called
function addNames(inputevent) {
displayAreaField.textContent = inputevent.target.value;
}
Wie im obigen Beispiel haben wir einen Ereignis-Listener für das Eingabefeld registriert und die Funktion übergeben, die aufgerufen werden soll, wenn ein Ereignis ausgelöst wird. Die Rückruffunktion ist in diesem Fall addNames.
Wenn Sie den Beispielcode ausführen, werden die eingegebenen Buchstaben unter dem Textfeld angezeigt.
Das erwähnte input-Event und die Event-Listener-Techniken sind nützliche Funktionen, die die Web-API in hochgradig interaktiven Anwendungen bietet.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.