Cet article décrit l'utilisation d'événements personnalisés en JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Dans le développement du Web Front-end, de nombreuses personnes peuvent ne pas utiliser les événements personnalisés JS, mais si vous effectuez un projet relativement important, en particulier lorsque plusieurs personnes se développent ensemble, les événements personnalisés sont très importants. Alors, quels sont les événements personnalisés dans JS? Regardons d'abord un exemple:
Développeur frontal A résume une fonction:
Copiez le code comme suit: Fonction Move () {
alerte (a); // Cela représente le code n-line
}
Après un certain temps, le développeur frontal B enrichira cette fonction basée sur A, donc il écrira comme ceci:
Copiez le code comme suit: Fonction Move () {
alerte (a); // Cela représente le code n-line
alerte (b); // Cela représente N lignes de code
}
Avez-vous découvert le problème? B devrait faire attention aux problèmes de dénomination et de conflit avec les variables, les fonctions, etc. avec A. Après un certain temps, le développeur frontal C devrait également enrichir cette fonction, donc:
Copiez le code comme suit: Fonction Move () {
alerte (a); // Cela représente le code n-line
alerte (b); // Cela représente N lignes de code
alerte (c); // Cela représente N lignes de code
}
Ce sera fou pour le moment, et je suis sûr qu'il ne sera pas facile pour C d'écrire le code. La solution à ce problème est de personnaliser l'événement, nous savons qu'un élément peut ajouter le même événement sans s'affecter mutuellement, comme:
La copie de code est la suivante: window.addeventListener ('click', function () {
alerte (1);
} ,FAUX);
window.addeventListener ('click', function () {
alerte (2);
} ,FAUX);
Lorsque vous cliquez sur la page, 1 et 2 apparaîtra, afin que nous puissions utiliser cette méthode pour définir notre fonction:
La copie de code est la suivante: window.addeventListener ('move', function () {
alerte (3);
} ,FAUX);
window.addeventListener ('move', function () {
alerte (4);
} ,FAUX);
De cette façon, lorsque nous exécutons Move ();, 3 et 4 apparaîtront. Ici, Move est un événement personnalisé, c'est en fait une fonction
Voyons comment passer les paramètres aux gestionnaires d'événements:
Copiez le code comme suit: // encapsuler la fonction avec des paramètres dans une fonction sans paramètres
Fonction CreateFunction (obj, strfunc) {
var args = []; // Définir les args pour stocker les paramètres transmis aux gestionnaires d'événements
if (! obj) obj = fenêtre; // S'il s'agit d'une fonction globale, obj = fenêtre;
// Obtenez les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// Utilisez l'appel du gestionnaire d'événements avec une fonction sans paramètre
return function () {
obj [strfunc] .Apply (obj, args); // transmet le paramètre au gestionnaire d'événements spécifié
}
}
Classe de fonction 1 () {
}
classe 1.prototype = {
show: function () {
this.onshow ();
},
onShow: function () {}
}
fonction objonshow (nom d'utilisateur) {
alert ("Hello", + nom d'utilisateur);
}
fonction test () {
var obj = new class1 ();
var username = "test";
obj.Oneshow = createFunction (null, "objonshow", nom d'utilisateur);
obj.show ();
}
"Parce que le mécanisme de l'événement ne passe que le nom d'une fonction sans aucune information de paramètre, il est impossible de transmettre les paramètres." Ceci est une histoire ultérieure. "Pour résoudre ce problème, vous pouvez considérer à partir de l'idée opposée, sans considérer comment transmettre les paramètres, mais considérer comment construire un gestionnaire d'événements sans paramètres. Le programme est créé sur la base d'un gestionnaire d'événements avec des paramètres et est une encapsulation extérieure." Le "programme" ici est la fonction CreateFunction, qui utilise intelligemment la fonction d'application pour encapsuler la fonction avec des paramètres dans une fonction sans paramètre. Enfin, jetons un coup d'œil à la mise en œuvre de la liaison multiple pour les événements personnalisés:
Copiez le code comme suit: // pour permettre aux événements personnalisés de prendre en charge plusieurs liaisons
// encapsuler une fonction avec des paramètres dans une fonction sans paramètres
Fonction CreateFunction (obj, strfunc) {
var args = []; // Définir les args pour stocker les paramètres transmis aux gestionnaires d'événements
if (! obj) obj = fenêtre; // S'il s'agit d'une fonction globale, obj = fenêtre;
// Obtenez les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// Utilisez l'appel du gestionnaire d'événements avec une fonction sans paramètre
return function () {
obj [strfunc] .Apply (obj, args); // transmet le paramètre au gestionnaire d'événements spécifié
}
}
Classe de fonction 1 () {
}
classe 1.prototype = {
show: function () {
if (this.onshow) {
for (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
attachonshow: function (_ehandler) {
if (! this.onshow) {this.Oonshow = []; }
this.onshow.push (_ehandler);
}
}
fonction objonshow (nom d'utilisateur) {
alert ("Hello", + nom d'utilisateur);
}
fonction objonshow2 (testname) {
alert ("show:" + testName);
}
fonction test () {
var obj = new class1 ();
var username = "Votre nom";
obj.attachonshow (CreateFunction (null, "Objonshow", nom d'utilisateur));
obj.attachonshow (createFunction (null, "objonshow2", "message de test"));
obj.show ();
}
Nous voyons que l'idée de base de la mise en œuvre de la méthode attachonShow est de pousser le tableau. En fait, nous pouvons également supprimer la fonction de gestionnaire d'événements après l'exécution de l'événement, et la mettre en œuvre séparément ci-dessous:
Copiez le code comme suit: // encapsuler la fonction avec des paramètres dans une fonction sans paramètres
Fonction CreateFunction (obj, strfunc) {
var args = []; // Définir les args pour stocker les paramètres transmis aux gestionnaires d'événements
if (! obj) obj = fenêtre; // S'il s'agit d'une fonction globale, obj = fenêtre;
// Obtenez les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i <arguments.length; i ++) args.push (arguments [i]);
// Utilisez l'appel du gestionnaire d'événements avec une fonction sans paramètre
return function () {
obj [strfunc] .Apply (obj, args); // transmet le paramètre au gestionnaire d'événements spécifié
}
}
Classe de fonction 1 () {
}
classe 1.prototype = {
show: function () {
if (this.onshow) {
for (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
attachonshow: fonction (_eHandler) {// événement supplémentaire
if (! this.onshow) {this.Oonshow = []; }
this.onshow.push (_ehandler);
},
DetachonShow: fonction (_eHandler) {// supprimer l'événement
if (! this.onshow) {this.Oonshow = []; }
this.onshow.pop (_eHandler);
}
}
fonction objonshow (nom d'utilisateur) {
alert ("Hello", + nom d'utilisateur);
}
fonction objonshow2 (testname) {
alert ("show:" + testName);
}
fonction test () {
var obj = new class1 ();
var username = "Votre nom";
obj.attachonshow (CreateFunction (null, "Objonshow", nom d'utilisateur));
obj.attachonshow (createFunction (null, "objonshow2", "message de test"));
obj.show ();
obj.detachonshow (createFunction (null, "objonshow", nom d'utilisateur));
obj.show (); // en supprimez-en un et affichez celui restant
obj.detachonshow (createFunction (null, "objonshow2", "test de test"));
obj.show (); // Les deux sont supprimés, et aucun n'est affiché
}
J'espère que cet article sera utile à la programmation JavaScript de tous.