# 14: Benutzerdefinierte Ereignisse - CSS-Tricks

Anonim

Da wir gerade über Ereignisse gesprochen haben, ist jetzt ein guter Zeitpunkt, um benutzerdefinierte Ereignisse zu erwähnen. Alle Ereignisse, über die wir bisher gesprochen haben, sind sozusagen „echte“ Ereignisse. Ereignisse, die ihren Ursprung im DOM haben, basieren auf realen Ereignissen wie einem Klick oder einem Tastendruck. Diese Ereignisse können in jQuery künstlich "ausgelöst" werden. Um beispielsweise einen Klick auf eine Schaltfläche zu "fälschen", können Sie Folgendes tun:

$("#some-button").trigger("click");

Dann werden alle an diese Schaltfläche gebundenen Klick-Handler ausgelöst, als ob ein Benutzer wirklich auf diese Schaltfläche geklickt hätte. Aber was wäre, wenn wir es tun würden:

$("#some-button").trigger("dance");

Was passiert dann? "Tanz" ist kein "echtes" Ereignis. Es wird jedoch kein Fehler ausgegeben. Es kommt einfach so vor, dass wahrscheinlich keine "Tanz" -Handler an diesen Knopf gebunden sind. Aber es könnte sein, und genau das ist ein benutzerdefiniertes Ereignis. Ein Ereignis mit einem Namen, den Sie gerade erfunden haben.

Warum würdest du das tun? Meist organisatorische Gründe. Vielleicht möchten Sie Ihr JavaScript, das Ereignisse und Aktionen verarbeitet, und Ihr JavaScript, das Daten und Verwaltungsaufgaben verarbeitet, trennen. Das ist sehr vernünftig. Wenn diese Schaltfläche möglicherweise eine Schaltfläche "Einstellungen speichern" wäre, könnten Sie einfach ein benutzerdefiniertes Ereignis mit dem Namen "Einstellungen speichern" auslösen und an anderer Stelle einen Handler haben, der darauf wartet, dass dieses Ereignis ausgelöst wird, und das eigentliche Speichern von Daten durchführt. Genau das haben wir im Beispiel aus dem Video gemacht.

Ein weiterer Anwendungsfall für benutzerdefinierte Ereignisse ist das Erstellen generischer UI-Komponenten. Ich spreche darüber in diesem Blog-Beitrag.

Vielleicht erstellen Sie einen Akkordeoneffekt als UI-Komponente. Das Akkordeon macht, was alle Akkordeons tun, öffnet und schließt Panels auf Klicks / Tippen. Ihre UI-Komponente macht das sehr gut. Jetzt könnte ein Entwickler, der dieses Akkordeon verwendet, spezielle und einzigartige Dinge haben, die damit geschehen sollen. Angenommen, sie verwenden das Akkordeon für Kontoeinstellungen. Wenn ein Benutzer ein Bedienfeld schließt, möchte er die Daten aus den Formularelementen in diesem Bedienfeld speichern. Ein traditionelles Modell könnte darin bestehen, dass der Autor dieser Akkordeon-UI-Komponente Rückruffunktionen anbietet, wenn diese Aktion ausgeführt wird. Wenn Sie das Akkordeon initialisieren, übergeben Sie Rückruffunktionen, die aufgerufen werden sollen, wenn diese Dinge passieren. Das ist eine Straße, die man hinuntergehen muss. Eine andere Möglichkeit wäre, dass das Akkordeon automatisch alle benutzerdefinierten Ereignisse für alle relevanten Aktionen auslöst, die es ausführt.Wenn dieses Feld geschlossen wird, kann es a auslösenpanelClosedEreignis auf dem Akkordeonelement selbst. Dann könnten Entwickler, die damit arbeiten, einfach an diese Ereignisse binden. Es ist nur ein weiterer Weg, den Sie aus organisatorischen Gründen beschreiten können, die sehr elegant sein können.