recherche

Maison >interface Web >js tutoriel >Un exemple simple de changement de contenu de zone de texte de jugement JS compétences event_javascript

Un exemple simple de changement de contenu de zone de texte de jugement JS compétences event_javascript

WBOY
WBOYoriginal
2016-05-16 16:56:291349parcourir

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 clavier ou souris (le déclenchement du script n'est pas valide)

b) L'objet actuel perd le focus (onblur);

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 onpropertychange pour navigateur non-IE. Il prend en charge les navigateurs tels que Firefox et Opera, mais il y a 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. modifie la valeur de l'objet. Fonctionne lorsque le changement se produit.

Arrêtez les événements bouillonnants

if (e) //Arrêtez le bouillonnement de l'événement e.stopPropagation();

else window.event.cancelBubble = true;

Exécutez le code ci-dessus, cliquez sur la zone de saisie et constatez 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 une propriété personnalisée, donc onpropertychange sera déclenché deux fois. , ce qui n'est peut-être 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

Copier le code Le code est le suivant :




Exécutez-le et constatez qu'il y a 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


Copier le code

Le code est le suivant :


Cliquez sur la zone de texte et entrez une valeur respectivement, et vous constaterez que myprop et value apparaissent respectivement.

Pour en revenir au problème avec lequel nous avons commencé, il nous suffit de déterminer si la valeur a été modifiée.
Regardons directement le code :
Code XML/HTML



Copier le code

Le code est le suivant :