Utilisation de oninput, onpropertychange, onchange
L'événement déclencheur onchange doit remplir deux conditions :
a) Les propriétés de l'objet actuel changent et sont déclenchées par des événements de clavier ou de souris (le déclenchement de script n'est pas valide)
b) L'objet actuel perd le focus (flou);
Dans le cas de onpropertychange, tant que les propriétés de l'objet actuel changent, l'événement sera déclenché, mais il est exclusif à IE ;
oninput est la version de navigateur non IE de onpropertychange. Il prend en charge les navigateurs tels que Firefox et Opera, mais il existe une différence lorsqu'il est lié à un objet, toutes les modifications de propriété de l'objet ne peuvent pas déclencher des événements. la valeur de l'objet change. Cela a fonctionné.
Arrêtez les événements bouillonnants
if (e) //Arrêtez le bouillonnement de l'événement e.stopPropagation();
sinon window.event.cancelBubble = true;
Exécutez le code ci-dessus et cliquez sur la zone de saisie pour constater que onpropertychange sera également déclenché. La saisie d'une valeur déclenchera également cet événement. Cela prouve que tant que la valeur d'une propriété est modifiée, cet événement sera déclenché.
Deuxièmement, maintenant que nous avons découvert cette fonctionnalité, il y aura un problème : parfois, lorsque nous voulons effectuer une opération de fonction lorsque la valeur de la zone de saisie change, nous devons également modifier un attribut personnalisé, donc onpropertychange sera déclenché deux fois, cela peut ne soit pas ce que nous voulons.
Devinez simplement, puisqu'un tel attribut est fourni, vous devriez pouvoir savoir quel attribut a été modifié. Essayez d'obtenir le nombre de paramètres et leur contenu.
Code XML/HTML
Copiez le code comme suit :
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(){
alert(arguments.length);
pour(var i=0;i<arguments.length;i++){
alerte(arguments[i]);
}
});
-->
</script>
En exécutant le code ci-dessus, vous constaterez que 1 et [object] apparaissent, ce qui montre que l'événement ne transmet qu'un seul paramètre à la fonction de rappel et qu'il est de type objet.
Essayons ensuite de parcourir cet objet.
Code XML/HTML
Copiez le code comme suit :
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
pour(var élément dans o){
alert(item+":"+o[item]);
}
});
//-->
</script>
Après l'avoir exécuté, nous constatons qu'il existe de nombreux attributs, mais si nous regardons attentivement, nous pouvons trouver un tel attribut : propertyname Je pense que tout le monde peut deviner la signification de cet attribut. Oui, ceci est utilisé pour savoir quel attribut a été modifié.
Code XML/HTML
Copiez le code comme suit :
<input type="text" value="xxx" id="xx" onclick="this.myprop='xx'">
<script type="text/javascript">
<!--
document.getElementByIdx_x_x('xx').attachEvent('onpropertychange',function(o){
alerte(o.propertyName);
});
//-->
</script>
Cliquez sur la zone de texte et entrez une valeur respectivement, et vous constaterez que myprop et value apparaissent respectivement.
Pour revenir à la question de départ, il nous suffit de déterminer si la valeur a été modifiée.
Regardons directement le code :
Code XML/HTML
Copiez le code comme suit :
<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; //N'effectuez pas les opérations suivantes à moins que la valeur change
//.....Traitement des fonctions
});
//-->
</script>