Eine kurze Analyse der Änderungen des HTML-Eingabeäquivalentwerts und des Hinzufügens von Listening-Ereignissen

Der zu erzielende Effekt

In vielen Fällen überwachen wir die Änderungen des Eingabefeldwerts in Echtzeit, um sofortige Maßnahmen zur Anleitung des Betrachters zu ergreifen um das Benutzererlebnis der Website zu verbessern. Es kann beispielsweise sofort die Anzahl der Bytes anzeigen, die in das Eingabefeld eingegeben wurden, oder den eingegebenen Wert sofort zur Suchführung lesen, was den verwandten Sucheffekt von Google usw. darstellt.
Es kann viel getan werden, wenn wir unmittelbare Ereignisse erfassen können.
Was Sie wissen müssen
Zuerst müssen wir den Unterschied zwischen onchange und onpropertychange verstehen:

Wenn sich unter IE die Attribute von HTML-Elementen ändern, können diese sofort über onpropertychange erfasst werden.
onchange muss dazu führen, dass das aktuelle Element den Fokus verliert (onblur), bevor das Ereignis aktiviert werden kann, wenn sich der Attributwert ändert.

Nachdem wir dies verstanden hatten, stellten wir fest, dass der Effekt von onpropertychange genau das ist, was wir wollen, aber leider funktioniert er nur unter IE. Können wir einen anderen Zeitpunkt finden, um onpropertychange zu ersetzen?

Nachdem ich die Informationen gelesen habe, habe ich erfahren, dass das oninput-Ereignis verwendet werden kann, um den gleichen Effekt in anderen Browsern zu erzielen. Das ist großartig IE Unterscheide sie einfach voneinander.

Verwendung von oninput

Lassen Sie uns zunächst verstehen, wie man oninput verwendet.
Wenn Sie die Registrierungszeit direkt auf die Seite schreiben, kann die folgende Schreibmethode erreicht werden:
<, input type="text" name="textfield" oninput="alert(this.value); " onpropertychange="alert(this.value)" />

Wenn oninput jedoch in JS-Code geschrieben und getrennt wird, unterscheidet es sich etwas von der normalen Ereignisregistrierungsmethode. Sie müssen addEventListener zum Registrieren verwenden.

Der Unterschied zwischen attachmentEvent und addEventListener

Nachdem wir das gesagt haben, werfen wir einen Blick auf die Verwendung von attachmentEvent und addEventListener:

attachEvent-Methode, z einem bestimmten Ereignis andere Verarbeitungsereignisse hinzufügen. (Mozilla-Serie wird nicht unterstützt) Die
addEventListener-Methode wird in der Mozilla-Serie

verwendet. Beispiel:

document.getElementByIdx_x_x("btn").onclick = method1;   
  
document.getElementByIdx_x_x("btn").onclick = method2;   
  
document.getElementByIdx_x_x("btn").onclick = method3;

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

wird so geschrieben:

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.attachEvent("onclick",method1);   
  
btn1Obj.attachEvent("onclick",method2);   
  
btn1Obj.attachEvent("onclick",method3);

Die Ausführungsreihenfolge ist method3-> method2->method1

Wenn es sich um eine Mozilla-Serie handelt, wird diese Methode nicht unterstützt. Sie müssen addEventListener verwenden

var btn1Obj = document.getElementByIdx_x_x("btn1");   
  
btn1Obj.addEventListener("click",method1,false);   
  
btn1Obj.addEventListener("click",method2,false);   
  
btn1Obj.addEventListener("click",method3,false);   
  
执行顺序为method1->method2->method3

Erfahren Sie, wie Sie addEventListener verwenden. Nach der Registrierung des oninput-Ereignisses kehren wir zum zu lösenden Problem zurück [Aufteilung des Browsers].

IE-Browser beurteilen

Wie unterscheidet man IE?
Dies scheint eine häufige Frage zu sein. Es gibt viele Möglichkeiten, sie im Internet zu finden, die in zwei Kategorien eingeteilt werden:
Eine besteht darin, die funktionalen Eigenschaften des Browsers zu bestimmen.
Die zweite besteht darin, die traditionelle Benutzeragentenzeichenfolge zu beurteilen, die möglicherweise die älteste und beliebteste Erkennungsmethode ist.
Ich werde hier nicht auf Details eingehen.

if("\v"=="v") {   
  
  alert("IE");   
  
}else{   
  
  alert("NO");   
  
}

Die Probleme, auf die wir bisher gestoßen sind, sind bereits gelöst Beginnen Sie mit dem Schreiben von Code, um zu testen, ob unsere Idee realisierbar ist.

Die oben erwähnte kurze Analyse der Änderung von HTML-Eingabegleichheitswerten und des Hinzufügens von Überwachungsereignissen ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe auch, dass jeder PHP unterstützt Chinesische Website.

Weitere Artikel zur einfachen Analyse von HTML-Eingabeäquivalentänderungen und zum Hinzufügen von Überwachungsereignissen finden Sie auf der chinesischen PHP-Website!