In jQuery kann die On-Methode Ereignisse an Elemente binden, und die Trigger-Methode kann Ereignisse manuell auslösen. Lassen Sie uns das Observer-Muster in jQuery erleben.

■ Die on-Methode bindet integrierte Ereignisse und löst sie auf natürliche Weise aus

Wenn wir beispielsweise ein Klickereignis an das Body-Element der Seite binden, schreiben Sie so.

Code kopieren Der Code lautet wie folgt:

Hallo

Oben können wir das Klickereignis nur durch Klicken auf den Körper auslösen. Das heißt, wenn ein integriertes Ereignis an ein Seitenelement gebunden ist, wird das Ereignis in dem Moment ausgelöst, in dem das integrierte Ereignis auftritt.

■ Die on-Methode bindet integrierte Ereignisse und löst sie manuell aus

Mit der Trigger-Methode können Sie das an das Element gebundene integrierte Ereignis auch manuell auslösen.

Im obigen Beispiel ist es nicht erforderlich, auf den Textkörper zu klicken. Nachdem die Seite geladen wurde, löst der Textkörper automatisch das Klickereignis aus.

■ Die on-Methode bindet benutzerdefinierte Ereignisse und löst sie manuell aus

Wir wissen, dass Click ein integriertes Ereignis von jquery ist. Kann das Ereignis also manuell angepasst und ausgelöst werden?

Code kopieren Der Code lautet wie folgt:

Oben haben wir ein Someclick-Ereignis angepasst und das Ergebnis ist das gleiche wie oben.

Wir haben also herausgefunden, dass wir ein benutzerdefiniertes Ereignis an das Element binden und das Ereignis mithilfe der Trigger-Methode auslösen können.

Natürlich kann der Name des benutzerdefinierten Ereignisses in der Form „namespace.custom event name“ geschrieben werden, z. B. app.someclick. Dies ist besonders in großen Projekten nützlich, wodurch Konflikte mit benutzerdefinierten Ereignisnamen effektiv vermieden werden können.

Aus der Perspektive von „Veröffentlichen und Abonnieren“ entspricht die On-Methode einem Abonnenten und einem Beobachter und die Trigger-Methode entspricht einem Herausgeber.

■ Erleben Sie den jQuery-Beobachtermodus von „JSON-Daten asynchron abrufen“

Im Stammverzeichnis befindet sich eine data.json-Datei.

{
„one“: „Hallo“,
„two“: „Welt“
}
Rufen Sie nun die JSON-Daten asynchron ab.

Code kopieren Der Code lautet wie folgt:

Wenn Sie eine globale Variable verwenden, um asynchron erhaltene JSON-Daten zu empfangen.

Code kopieren Der Code lautet wie folgt:

Dieses Mal war das Ergebnis undefiniert. Warum ist das so?

--Weil die Methode $.getJSON noch Daten abruft, console.log(data) ausgeführt wurde und data zu diesem Zeitpunkt keine Daten enthält.

Wie kann dieses Problem gelöst werden?

--Wenn Sie zuerst die Methode definieren, die zusätzlich zur $.getJSON-Methode ausgeführt werden muss, und diese Methode dann tatsächlich in der Rückruffunktion der $.getJSON-Methode auslösen, wäre das dann nicht gelöst?

Code kopieren Der Code lautet wie folgt:

Oben ist die on-Methode wie ein Abonnent, der das benutzerdefinierte Ereignis app.myevent abonniert, und die Trigger-Methode ist wie ein Publisher, der Ereignisse und Parameter veröffentlicht, bevor die Abonnentenmethode tatsächlich ausgeführt wird.

■ Erweiterungsmethoden des jQuery-Beobachtermusters

Zu diesem Zweck können wir auch eine Erweiterungsmethode speziell für das jQuery-Beobachtermuster schreiben.

Code kopieren Der Code lautet wie folgt: