À propos des performances et de la solution de l'événement onchange sous les compétences IE et FF_javascript

Dans un projet récent, il existe une telle fonctionnalité : il y a une case à cocher sur la page. Lorsque l'utilisateur coche ou décoche la case, une requête jsonp sera envoyée en arrière-plan. L'implémentation à cette époque consistait à ajouter un événement onchange à cette case à cocher, mais le résultat était inattendu. Pour cette raison, j'ai mené une étude approfondie et j'ai découvert que l'événement onchange présentait les problèmes suivants dans ses performances sous IE et FF.

Problème ① : Dans FF, lorsque l'état sélectionné de la case à cocher est modifié, l'événement onchange sera déclenché immédiatement. Cependant, lors de la modification de l'état sélectionné de la case à cocher sous IE, l'événement onchange ne sera pas déclenché immédiatement. Au lieu de cela, l'événement sera déclenché une fois que la case à cocher perdra le focus.

Afin de résoudre ce problème, j'ai ajouté l'instruction this.blur() dans l'événement onclick de la case à cocher. En effet, l'événement onclick est exécuté avant l'événement onchange, j'ai donc ajouté this.blur() dans Onclick. événement Lorsque la case à cocher perd le focus, l'événement onchange sera déclenché immédiatement. Mais ensuite, nous avons rencontré un deuxième problème.

Problème ② : Lorsque l'événement onclick et this.blur sont utilisés en même temps, une erreur sera signalée sous IE.

J'ai cherché des informations sur Internet et j'ai finalement découvert l'événement onpropertychange. Cet événement ne sera pas déclenché sous FF. Sous IE, il démarre immédiatement lorsque l'état de sélection de la case à cocher change. Par conséquent, la solution finale a été trouvée : sous IE, liez l'événement onpropertychange à la case à cocher, et sous FF, liez-y l'événement onchange.

L'implémentation spécifique du code est la suivante :

Copier le code Le code est le suivant :

var ua=navigator .userAgent.toLowerCase();
var s=null;
var browser={
msie:(s=ua.match(/msies*([d.] )/ ))?s[1 ]:false,
firefox:(s=ua.match(/firefox/([d.] )/))?s[1]:false,
chrome:(s= ua.match(/chrome /([d.] )/))?s[1]:false,
opera:(s=ua.match(/opera.([d.] )/))?s [1]:false,
safari:(s=ua.match(/varsion/([d.] ).*safari/))?s[1]:false
}
if( browser.msie){/ /S'il s'agit d'un navigateur IE
checkbox.onpropertychange=function(){
//faire quelque chose
}
}
autre{
checkbox.onchange= function(){
//faire quelque chose
}
}