Verwendung von oninput, onpropertychange, onchange
Das Onchange-Triggerereignis muss zwei Bedingungen erfüllen:
a) Die Eigenschaften des aktuellen Objekts ändern sich und werden durch Tastatur- oder Mausereignisse ausgelöst (Skript-Triggerung ist ungültig)
b) Das aktuelle Objekt verliert den Fokus (Onblur);
Im Fall von onpropertychange wird das Ereignis ausgelöst, solange sich die Eigenschaften des aktuellen Objekts ändern, es gilt jedoch ausschließlich für den IE.
oninput ist die Nicht-IE-Browserversion von onpropertychange. Es unterstützt Browser wie Firefox und Opera, es gibt jedoch einen Unterschied: Wenn es an ein Objekt gebunden ist, können nicht alle Eigenschaftsänderungen des Objekts Ereignisse auslösen Objektwertänderungen. Es hat funktioniert.
Hören Sie auf, Ereignisse zu sprudeln
if (e) //Stoppt das Sprudeln des Ereignisses e.stopPropagation();
sonst window.event.cancelBubble = true;
Führen Sie den obigen Code aus und klicken Sie auf das Eingabefeld, um festzustellen, dass auch die Eingabe eines Werts dieses Ereignis auslöst. Dies beweist, dass dieses Ereignis ausgelöst wird, solange der Wert einer Eigenschaft geändert wird.
Zweitens, nachdem wir diese Funktion entdeckt haben, wird es ein Problem geben: Manchmal, wenn wir eine Funktionsoperation ausführen möchten, wenn sich der Wert des Eingabefelds ändert, müssen wir auch ein benutzerdefiniertes Attribut ändern, sodass onpropertychange möglicherweise zweimal ausgelöst wird nicht das sein, was wir wollen.
Vermuten Sie einfach: Da ein solches Attribut bereitgestellt wird, sollten Sie in der Lage sein, herauszufinden, welches Attribut geändert wurde. Versuchen Sie, die Anzahl der Parameter und deren Inhalt zu ermitteln.
XML/HTML-Code
Kopieren Sie den Codecode wie folgt:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alarm(arguments.length);
for(var i=0;i<arguments.length;i++){
alarm(argumente[i]);
}
});
->
</script>
Wenn Sie den obigen Code ausführen, werden 1 und [object] angezeigt. Dies zeigt, dass das Ereignis nur einen Parameter an die Rückruffunktion übergibt und vom Typ Objekt ist.
Dann versuchen wir, dieses Objekt zu durchqueren.
XML/HTML-Code
Kopieren Sie den Codecode wie folgt:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
for(var item in o){
alarm(item+":"+o[item]);
}
});
//-->
</script>
Nach der Ausführung stellen wir fest, dass es viele Attribute gibt, aber wenn wir genau hinsehen, finden wir möglicherweise ein solches Attribut: Eigenschaftsname. Ich glaube, jeder kann die Bedeutung dieses Attributs erraten. Ja, dies wird verwendet, um zu ermitteln, welches Attribut geändert wurde.
XML/HTML-Code
Kopieren Sie den Codecode wie folgt:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
Alert(o.propertyName);
});
//-->
</script>
Klicken Sie auf das Textfeld und geben Sie jeweils einen Wert ein. Daraufhin werden Myprop und Value angezeigt.
Um auf die Frage zurückzukommen, mit der wir begonnen haben: Wir müssen nur feststellen, ob der Wert geändert wurde.
Schauen wir uns den Code direkt an:
XML/HTML-Code
Kopieren Sie den Codecode wie folgt:
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
if(o.propertyName!='value')return; //Führen Sie die folgenden Vorgänge nicht aus, es sei denn, der Wert ändert sich
//.....Funktionsverarbeitung
});
//-->
</script>