Dieser Artikel beschreibt die Verwendung benutzerdefinierter Ereignisse in JavaScript. Teilen Sie es für Ihre Referenz. Die spezifische Analyse ist wie folgt:
In der Entwicklung von Web-Front-End-Entwicklung verwenden viele Menschen möglicherweise keine JS-benutzerdefinierten Ereignisse, aber wenn Sie ein relativ großes Projekt durchführen, insbesondere wenn sich mehrere Personen gemeinsam entwickeln, sind benutzerdefinierte Ereignisse sehr wichtig. Also, was sind benutzerdefinierte Ereignisse in JS? Schauen wir uns zuerst ein Beispiel an:
Der Front-End-Entwickler A ist in der Lage, eine Funktion zu fördern:
Kopieren Sie den Code wie folgt: Funktion move () {
Alarm (a); // Dies ist der N-Line-Code
}
Nach einer Weile wird der Front-End-Entwickler B diese Funktion basierend auf A bereichern, sodass er so schreiben wird:
Kopieren Sie den Code wie folgt: Funktion move () {
Alarm (a); // Dies ist der N-Line-Code
Alarm (b); // Dies repräsentiert n Codezeilen
}
Haben Sie das Problem entdeckt? B sollte auf die Namens- und Konfliktprobleme mit Variablen, Funktionen usw. usw. achten. Nach einer Weile sollte der Front-End-Entwickler C diese Funktion auch bereichern, also:
Kopieren Sie den Code wie folgt: Funktion move () {
Alarm (a); // Dies ist der N-Line-Code
Alarm (b); // Dies repräsentiert n Codezeilen
Alarm (c); // Dies repräsentiert n Codezeilen
}
Es wird zu diesem Zeitpunkt verrückt sein und ich bin sicher, dass es für C nicht einfach ist, den Code zu schreiben. Die Lösung für dieses Problem besteht darin, das Ereignis anzupassen. Wir wissen, dass ein Element das gleiche Ereignis hinzufügen kann, ohne sich gegenseitig zu beeinflussen, z. B.:
Die Codekopie lautet wie folgt: window.adDeVentListener ('klicken', function () {
Alarm (1);
} ,FALSCH);
window.addeventListener ('klick', function () {
Alarm (2);
} ,FALSCH);
Wenn Sie auf die Seite klicken, werden 1 und 2 angezeigt, sodass wir diese Methode verwenden können, um unsere Funktion zu definieren:
Die Codekopie lautet wie folgt: window.adDeVentListener ('move', function () {
Alarm (3);
} ,FALSCH);
window.addeventListener ('move', function () {
Alarm (4);
} ,FALSCH);
Auf diese Weise werden Move ();, 3 und 4 ausführen, wenn wir ausführen. Hier ist Move ein individuelles Ereignis, es ist tatsächlich eine Funktion
Lassen Sie uns sehen, wie Sie Parameter an Event -Handler übergeben:
Kopieren Sie den Code wie folgt: // in die Funktion mit Parametern in eine Funktion ohne Parameter in Verbindung zu
Funktion createFunction (OBJ, Strfunc) {
var args = []; // args definieren, um Parameter zu speichern, die an Ereignishandler übergeben wurden
if (! obj) obj = Fenster; // Wenn es sich um eine globale Funktion handelt, obj = Fenster;
// Holen Sie sich die Parameter an den Event -Handler übergeben
für (var i = 2; i <argumente.length; i ++) args.push (Argumente [i]);
// Verwenden Sie den Call of Event -Handler mit einer parameterlosen Funktion
return function () {
obj [strfunc] .Apply (obj, args); // Übergeben Sie den Parameter an den angegebenen Ereignishandler
}
}
Funktion class1 () {
}
class1.Prototype = {
Show: function () {
this.onshow ();
},
Onshow: function () {}
}
Funktion objonshow (Benutzername) {
Alert ("Hallo", + Benutzername);
}
Funktionstest () {
var obj = new class1 ();
var userername = "test";
obj.onshow = createFunction (null, "objonshow", Benutzername);
obj.show ();
}
"Da der Ereignismechanismus nur den Namen einer Funktion ohne Parameterinformationen übergeht, ist es unmöglich, die Parameter in die Übergabe zu bringen." Dies ist eine spätere Geschichte. "Um dieses Problem zu lösen, können Sie aus der entgegengesetzten Idee berücksichtigen, ohne zu überlegen, wie die Parameter in die Übergabe von einem Ereignishandler ohne Parameter erstellt werden können. Das Programm wird auf der Grundlage eines Ereignishandlers mit Parametern erstellt und ist eine äußere Einkapselung." Das "Programm" hier ist die Funktion createFunction, mit der die Funktion anwenden verwendet wird, um die Funktion mit Parametern in eine parameterlose Funktion einzudämmen. Schauen wir uns schließlich an, wie Sie Multi-Binding für benutzerdefinierte Ereignisse implementieren können:
Kopieren Sie den Code wie folgt: //, um benutzerdefinierte Ereignisse zur Unterstützung mehrerer Bindungen zu aktivieren
// eine Funktion mit Parametern in eine Funktion ohne Parameter einkapseln
Funktion createFunction (OBJ, Strfunc) {
var args = []; // args definieren, um Parameter zu speichern, die an Ereignishandler übergeben wurden
if (! obj) obj = Fenster; // Wenn es sich um eine globale Funktion handelt, obj = Fenster;
// Holen Sie sich die Parameter an den Event -Handler übergeben
für (var i = 2; i <argumente.length; i ++) args.push (Argumente [i]);
// Verwenden Sie den Call of Event -Handler mit einer parameterlosen Funktion
return function () {
obj [strfunc] .Apply (obj, args); // Übergeben Sie den Parameter an den angegebenen Ereignishandler
}
}
Funktion class1 () {
}
class1.Prototype = {
Show: function () {
if (this.onshow) {
für (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
AttachonShow: Funktion (_eHandler) {
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_eHandler);
}
}
Funktion objonshow (Benutzername) {
Alert ("Hallo", + Benutzername);
}
Funktion ObjonShow2 (TestName) {
alert ("show:" + testname);
}
Funktionstest () {
var obj = new class1 ();
var userername = "dein Name";
obj.attachonshow (CreateFunction (NULL, "Objonshow", Benutzername));
obj.attachonshow (createFunction (null, "objonshow2", "test meldung"));
obj.show ();
}
Wir sehen, dass die Grundidee der Implementierung der AttachonShow -Methode darin besteht, das Array zu drücken. Tatsächlich können wir die Ereignishandlerfunktion auch entfernen, nachdem das Ereignis ausgeführt wurde, und sie unten separat implementieren:
Kopieren Sie den Code wie folgt: // in die Funktion mit Parametern in eine Funktion ohne Parameter in Verbindung zu
Funktion createFunction (OBJ, Strfunc) {
var args = []; // args definieren, um Parameter zu speichern, die an Ereignishandler übergeben wurden
if (! obj) obj = Fenster; // Wenn es sich um eine globale Funktion handelt, obj = Fenster;
// Holen Sie sich die Parameter an den Event -Handler übergeben
für (var i = 2; i <argumente.length; i ++) args.push (Argumente [i]);
// Verwenden Sie den Call of Event -Handler mit einer parameterlosen Funktion
return function () {
obj [strfunc] .Apply (obj, args); // Übergeben Sie den Parameter an den angegebenen Ereignishandler
}
}
Funktion class1 () {
}
class1.Prototype = {
Show: function () {
if (this.onshow) {
für (var i = 0; i <this.onshow.length; i ++) {
this.onshow [i] ();
}
}
},
AttachonShow: Funktion (_eHandler) {// zusätzliches Ereignis
if (! this.onshow) {this.onshow = []; }
this.onshow.push (_eHandler);
},
detachonshow: function (_ehandler) {// Ereignis entfernen
if (! this.onshow) {this.onshow = []; }
this.onshow.pop (_eHandler);
}
}
Funktion objonshow (Benutzername) {
Alert ("Hallo", + Benutzername);
}
Funktion ObjonShow2 (TestName) {
alert ("show:" + testname);
}
Funktionstest () {
var obj = new class1 ();
var userername = "dein Name";
obj.attachonshow (CreateFunction (NULL, "Objonshow", Benutzername));
obj.attachonshow (createFunction (null, "objonshow2", "test meldung"));
obj.show ();
obj.detachonshow (createFunction (null, "objonshow", Benutzername));
obj.show (); // Entfernen Sie einen und zeigen Sie die verbleibenden an
obj.detachonshow (createFunction (null, "objonshow2", "test meldung"));
obj.show (); // beide werden entfernt und keine angezeigt
}
Ich hoffe, dieser Artikel wird für JavaScript -Programme aller hilfreich sein.