Analyse de l'utilisation des événements personnalisés dans les compétences JavaScript_javascript

Les exemples de cet article décrivent l'utilisation d'événements personnalisés en JavaScript. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Dans le développement web front-end, de nombreuses personnes n'utilisent peut-être pas d'événements personnalisés de js, mais si vous réalisez un projet relativement volumineux, en particulier lorsque plusieurs personnes développent en collaboration, les événements personnalisés sont très importants. Alors, que sont les événements personnalisés en js ? Regardons d'abord un exemple :
Le développeur front-end A encapsule une fonction :

Copier le code Le code est le suivant :

function move(){
alert(a); //Cela représente N lignes de code
>

Au bout d'un moment, le développeur front-end B enrichira cette fonction en fonction de A, il écrira donc comme ceci :

Copier le code Le code est le suivant :

function move(){
alert(a); //Cela représente N lignes de code
alert(b); //Cela représente N lignes de code
>

Avez-vous trouvé un problème ? B doit prêter attention aux problèmes de nommage et de conflit avec les variables, les fonctions, etc. de A. Après un certain temps, le développeur front-end C enrichira également cette fonction, donc :

Copier le code Le code est le suivant :

function move(){
alert(a); //Cela représente N lignes de code
alert(b); //Cela représente N lignes de code
alert(c); //Cela représente N lignes de code
>

Ce sera très frustrant en ce moment, et je suis sûr qu'il ne sera pas facile d'écrire du code en C. La façon de résoudre ce problème est d'utiliser des événements personnalisés. Nous savons qu'un même événement peut être ajouté à un élément sans s'affecter mutuellement, comme :

Copier le code Le code est le suivant :

window.addEventListener('click',function(){
alerte(1);
} ,faux);
window.addEventListener('click',function(){
alerte(2);
} ,faux);

En cliquant sur la page, 1 et 2 apparaîtront, nous pourrons alors utiliser cette méthode pour définir notre fonction :

Copier le code Le code est le suivant :

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. Le déplacement ici est un événement personnalisé, qui est en fait une fonction .

Voyons comment transmettre des paramètres au gestionnaire d'événements :

Copier le code Le code est le suivant :

//Encapsuler une fonction avec paramètres dans une fonction sans paramètres
fonction createFunction(obj, strFunc) {
var args = []; //Définir des arguments pour stocker les paramètres transmis au gestionnaire d'événements
If (!obj) obj = window; //S'il s'agit d'une fonction globale, obj=window; //Récupère les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Utilisez une fonction sans paramètre pour encapsuler l'appel du gestionnaire d'événements
Fonction de retour() {
          obj[strFunc].apply(obj, args); // Passer les paramètres au gestionnaire d'événements spécifié
>
>
fonction classe1() {
>
classe1.prototype = {
show : function() {
This.onShow();
},
onShow : function() { }
>
fonction objOnShow (nom d'utilisateur) {
alert("bonjour," nomutilisateur);
>
fonction test() {
var obj = new class1();
var nomutilisateur = "test";
​ obj.onShow = createFunction(null, "objOnShow", userName);
Obj.show();
>

"Étant donné que le mécanisme d'événement ne transmet que le nom d'une fonction sans aucune information sur les paramètres, les paramètres ne peuvent pas être transmis." "Pour résoudre ce problème, vous pouvez y penser de la manière opposée. Non. Réfléchissez à la manière de transmettre les paramètres, mais réfléchissez à la manière de créer un gestionnaire d'événements sans paramètres. Ce programme est créé sur la base du gestionnaire d'événements avec des paramètres et est un package externe. "Le "programme" ici est la fonction createFunction., qui utilise intelligemment. la fonction apply pour encapsuler les fonctions avec des paramètres dans des fonctions sans paramètre. Enfin, voyons comment implémenter plusieurs liaisons d'événements personnalisés :

Copier le code Le code est le suivant :

// Faire en sorte que les événements personnalisés prennent en charge plusieurs liaisons
//Encapsuler les fonctions avec paramètres dans des fonctions sans paramètres
fonction createFunction(obj, strFunc) {
var args = []; //Définir des arguments pour stocker les paramètres transmis au gestionnaire d'événements
If (!obj) obj = window; //S'il s'agit d'une fonction globale, obj=window; //Récupère les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Utilisez une fonction sans paramètre pour encapsuler l'appel du gestionnaire d'événements
Fonction de retour() {
          obj[strFunc].apply(obj, args); // Passer les paramètres au gestionnaire d'événements spécifié
>
>
fonction classe1() {
>
classe1.prototype = {
show : function() {
          if (this.onShow) {
pour (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
>
},
attachOnShow : fonction (_eHandler) {
Si (!this.onShow) { this.onShow = []>
This.onShow.push(_eHandler);
>
>
fonction objOnShow (nom d'utilisateur) {
alert("bonjour," nomutilisateur);
>
function objOnShow2(testName) {
alert("show:" nom_test);
>
fonction test() {
var obj = new class1();
var userName = "votre nom";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show();
>

Nous voyons que l'idée de base de la méthode attachOnShow est de pousser le tableau. En fait, nous pouvons également supprimer la fonction de traitement d'événement une fois l'exécution de l'événement terminée :
.

Copier le code Le code est le suivant :

//Encapsuler des fonctions avec paramètres dans des fonctions sans paramètres
fonction createFunction(obj, strFunc) {
var args = []; //Définir des arguments pour stocker les paramètres transmis au gestionnaire d'événements
If (!obj) obj = window; //S'il s'agit d'une fonction globale, obj=window; //Récupère les paramètres transmis au gestionnaire d'événements
pour (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Utilisez une fonction sans paramètre pour encapsuler l'appel du gestionnaire d'événements
Fonction de retour() {
          obj[strFunc].apply(obj, args); // Passer les paramètres au gestionnaire d'événements spécifié
>
>
fonction classe1() {
>
classe1.prototype = {
show : function() {
          if (this.onShow) {
pour (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
>
},
attachOnShow : function(_eHandler) { // Attacher l'événement
Si (!this.onShow) { this.onShow = []>
This.onShow.push(_eHandler);
},
detachOnShow : function(_eHandler) { // Supprimer l'événement
Si (!this.onShow) { this.onShow = []>
This.onShow.pop(_eHandler);
>
>
fonction objOnShow(userName) {

alert("bonjour," nomutilisateur);
>
function objOnShow2(testName) {
alert("show:" nom_test);
>
fonction test() {
var obj = new class1();
var userName = "votre nom";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show();
obj.detachOnShow(createFunction(null, "objOnShow", userName));
Obj.show(); // Supprime un et affiche le reste
obj.detachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show(); // Supprime les deux et n'affiche ni l'un ni l'autre
>

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.