Analyse der Verwendung benutzerdefinierter Ereignisse in JavaScript_Javascript-Kenntnissen

Die Beispiele in diesem Artikel beschreiben die Verwendung benutzerdefinierter Ereignisse in JavaScript. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

In der Web-Front-End-Entwicklung verwenden viele Leute möglicherweise keine benutzerdefinierten Ereignisse von js, aber wenn Sie ein relativ großes Projekt durchführen, insbesondere wenn mehrere Personen zusammenarbeiten, sind benutzerdefinierte Ereignisse sehr wichtig. Was sind also benutzerdefinierte Ereignisse in js? Schauen wir uns zunächst ein Beispiel an:
Frontend-Entwickler A kapselt eine Funktion:

Code kopieren Der Code lautet wie folgt:

Funktion move(){
warning(a); //Dies stellt N Codezeilen dar
}

Nach einer Weile wird Front-End-Entwickler B diese Funktion basierend auf A erweitern, also wird er so schreiben:

Code kopieren Der Code lautet wie folgt:

Funktion move(){
warning(a); //Dies stellt N Codezeilen dar
warning(b); //Dies stellt N Codezeilen dar
}

Haben Sie ein Problem gefunden? B sollte auf Namens- und Konfliktprobleme mit den Variablen, Funktionen usw. von A achten. Nach einer Weile wird Front-End-Entwickler C auch diese Funktion erweitern, also:

Code kopieren Der Code lautet wie folgt:

Funktion move(){
warning(a); //Dies stellt N Codezeilen dar
warning(b); //Dies stellt N Codezeilen dar
warning(c); //Dies stellt N Codezeilen dar
}

Es wird zu diesem Zeitpunkt sehr frustrierend sein und ich bin sicher, dass es nicht einfach sein wird, Code in C zu schreiben. Die Möglichkeit, dieses Problem zu lösen, besteht darin, benutzerdefinierte Ereignisse zu verwenden. Wir wissen, dass dasselbe Ereignis zu einem Element hinzugefügt werden kann, ohne sich gegenseitig zu beeinflussen, wie zum Beispiel:

Code kopieren Der Code lautet wie folgt:

window.addEventListener('click',function(){
alarm(1);
} ,false);
window.addEventListener('click',function(){
alarm(2);
} ,false);

Wenn Sie auf die Seite klicken, werden sowohl 1 als auch 2 angezeigt. Anschließend können wir diese Methode verwenden, um unsere Funktion zu definieren:

Code kopieren Der Code lautet wie folgt:

window.addEventListener('move',function(){
alarm(3);
} ,false);
window.addEventListener('move',function(){
alarm(4);
} ,false);

Auf diese Weise werden beim Ausführen von move(); 3 und 4 angezeigt. Der Umzug ist hier ein benutzerdefiniertes Ereignis, bei dem es sich tatsächlich um eine Funktion handelt

Sehen wir uns an, wie Parameter an den Event-Handler übergeben werden:

Code kopieren Der Code lautet wie folgt:

//Eine Funktion mit Parametern in eine Funktion ohne Parameter kapseln
Funktion createFunction(obj, strFunc) {
var args = []; //Argumente definieren, um die an den Event-Handler
übergebenen Parameter zu speichern If (!obj) obj = window; //Wenn es eine globale Funktion ist, obj=window; //Die an den Event-Handler
übergebenen Parameter abrufen for (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Verwenden Sie eine Funktion ohne Parameter, um den Aufruf des Ereignishandlers
zu kapseln Rückgabefunktion() {
          obj[strFunc].apply(obj, args); // Parameter an den angegebenen Event-Handler übergeben
}
}
Funktion class1() {
}
class1.prototype = {
show: function() {
This.onShow();
},
onShow: function() { }
}
Funktion objOnShow(userName) {
alarm("Hallo", Benutzername);
}
Funktionstest() {
var obj = new class1();
var userName = "test";
​ obj.onShow = createFunction(null, "objOnShow", userName);
Obj.show();
}

„Da der Ereignismechanismus nur den Namen einer Funktion ohne Parameterinformationen übergibt, können keine Parameter übergeben werden.“ „Um dieses Problem zu lösen, können Sie es auch andersherum betrachten.“ Überlegen Sie, wie Sie Parameter übergeben, aber überlegen Sie, wie Sie einen Event-Handler ohne Parameter erstellen. Dieses Programm wird auf der Grundlage des Event-Handlers mit Parametern erstellt und ist ein äußeres Paket. „Das „Programm“ ist hier die Funktion createFunction die Apply-Funktion zum Kapseln von Funktionen mit Parametern in parameterlose Funktionen. Schauen wir uns abschließend an, wie Sie mehrere Bindungen benutzerdefinierter Ereignisse implementieren:

Code kopieren Der Code lautet wie folgt:

// Benutzerdefinierte Ereignisse unterstützen mehrere Bindungen
// Funktionen mit Parametern in Funktionen ohne Parameter kapseln
Funktion createFunction(obj, strFunc) {
var args = []; //Argumente definieren, um die an den Event-Handler
übergebenen Parameter zu speichern If (!obj) obj = window; //Wenn es eine globale Funktion ist, obj=window; //Die an den Event-Handler
übergebenen Parameter abrufen for (var i = 2; i < arguments.length; i ) args.push(arguments[i]);
//Verwenden Sie eine Funktion ohne Parameter, um den Aufruf des Ereignishandlers
zu kapseln Rückgabefunktion() {
          obj[strFunc].apply(obj, args); // Parameter an den angegebenen Event-Handler übergeben
}
}
Funktion class1() {
}
class1.prototype = {
show: function() {
          if (this.onShow) {
for (var i = 0; i < this.onShow.length; i ) {
This.onShow[i]();
            }
}
},
attachmentOnShow: function(_eHandler) {
If (!this.onShow) { this.onShow = []; This.onShow.push(_eHandler);
}
}
Funktion objOnShow(userName) {
alarm("Hallo", Benutzername);
}
Funktion objOnShow2(testName) {
alarm("show:" testName);
}
Funktionstest() {
var obj = new class1();
var userName = "Ihr Name";
Obj.attachOnShow(createFunction(null, "objOnShow", userName));
Obj.attachOnShow(createFunction(null, "objOnShow2", "test message"));
Obj.show();
}

Wir sehen, dass die Grundidee der attachmentOnShow-Methode darin besteht, das Array zu pushen. Tatsächlich können wir die Ereignisverarbeitungsfunktion auch nach Abschluss der Ereignisausführung entfernen

Code kopieren Der Code lautet wie folgt:

//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.