Eine kurze Analyse des Hinzufügens von Listener-Ereignissen bei Wertänderungen in der HTML-Eingabe

Der zu erzielende Effekt
In vielen Fällen überwachen wir die Änderungen im Eingabefeldwert in Echtzeit, sodass wir sofort Maßnahmen ergreifen können, um den Browser anzuweisen, das Benutzererlebnis der Website zu verbessern. Zeigen Sie beispielsweise sofort die Anzahl der Bytes an, die in das Eingabefeld eingegeben wurden, oder lesen Sie den Eingabewert sofort vor, um die Suche zu leiten. Dies ist der zugehörige Sucheffekt von Google.
Wir können viel erreichen, wenn es uns gelingt, den Moment festzuhalten.
Was Sie wissen müssen
Zuerst müssen wir den Unterschied zwischen onchange und onpropertychange verstehen :

Wenn sich im Internet Explorer die Eigenschaften eines HTML-Elements ändern, können diese sofort über „onpropertychange“ erfasst werden.
Wenn sich der Wert des Onchange-Attributs ändert, muss das aktuelle Element auch den Fokus verlieren (Onblur), um das Ereignis zu aktivieren.

Nachdem wir dies verstanden haben, stellen wir fest, dass der Effekt von onpropertychange den gewünschten ist, aber leider funktioniert es nur unter IE. Können wir einen anderen Zeitpunkt finden, um onpropertychange zu ersetzen?

Nachdem ich die Informationen gelesen hatte, erfuhr ich, dass das Oninput- Ereignis verwendet werden kann, um in anderen Browsern denselben Effekt zu erzielen . Es ist großartig. Wir müssen nur den IE-Browser unterscheiden.

Verwendung von oninput

Sehen wir uns als Nächstes an, wie oninput verwendet wird.
Wenn du die Anmeldezeit direkt auf der Seite einträgst, kannst du das folgendermaßen machen:
<、input Typ="Text" Name="Textfeld" oninput="Alarm(dieser.Wert);" onpropertychange="Alarm(dieser.Wert)" />

Wenn Oninput jedoch vom JS-Code getrennt ist, unterscheidet es sich etwas von der normalen Ereignisregistrierungsmethode und muss mit addEventListener registriert werden.

Unterschied zwischen attachEvent und addEventListener

Schauen wir uns an dieser Stelle an, wie attachEvent und addEventListener verwendet werden:

Die Methode attachEvent hängt an ein Ereignis weitere Verarbeitungsereignisse an. (Wird von der Mozilla-Serie nicht unterstützt)
addEventListener-Methode für die Mozilla-Serie

Beispiel:

Wenn es so geschrieben wird, wird nur medhot3 ausgeführt

Schreiben Sie es so:

Die Ausführungsreihenfolge ist Methode3->Methode2->Methode1

Wenn es sich um die Mozilla-Serie handelt, wird diese Methode nicht unterstützt und addEventListener wird benötigt

Nachdem wir nun wissen, wie man addEventListener zum Registrieren des Oninput-Ereignisses verwendet, kehren wir zu dem Problem zurück, das wir lösen müssen [Aufteilen des Browsers].

Bestimmen Sie den IE-Browser

Wie unterscheidet man IE?
Dies scheint ein weit verbreitetes Problem zu sein. Es gibt viele Möglichkeiten, es im Internet zu finden, die in zwei Kategorien eingeteilt werden können:
Die erste besteht darin, die funktionalen Eigenschaften des Browsers zu bestimmen.
Die zweite Methode besteht darin, die herkömmliche Benutzeragentzeichenfolge zu ermitteln. Dabei handelt es sich vermutlich um die älteste und beliebteste Erkennungsmethode.
Wir werden hier nicht ins Detail gehen. Wir verwenden eine einfachere Methode zur Beurteilung

Die Probleme, auf die wir bisher gestoßen sind, sind gelöst. Beginnen wir mit dem Schreiben von Code, um zu testen, ob unsere Ideen umgesetzt werden können.

Die obige kurze Analyse der HTML-Eingabe und der Wertänderung zum Hinzufügen von Abhörereignissen ist der gesamte Inhalt, den der Editor mit Ihnen teilt. Ich hoffe, er kann Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen werden.

Original-URL: http://www.web600.net/html/editor/JavaScript/201001131529.html