Auf Objekt externe Events reagieren / Funktionen für Events registrieren

[Questioner]

Hi Leute,

obwohl ich doch schon länger mit JS arbeite, versuche ich mich aktuell zum ersten Mal mit "eigenen" Events.
Um mein Problem zu erklären, führe ich es am Besten an einem Beispiel aus:

Ich habe ein Objekt "Filter" und ein Objekt "Elemente", von denen ich jeweils mehrere Instanzen bilden möchte.
Wird nun in einem Filter-Objekt ein Wert gesetzt (also der Filter geändert mit setFilterValue), sollen alle Elemente-Objekte eine Funktion/Methode ausführen, die sich für das entsprechende Event registriert haben...


Beispiel-Code (nicht funktional):

function Filter(name) {
...
this.name = name;

this.setFilterValue = function(value){
this.value = value;
Auslösung Event filterUpdate
 
};
...
 
};

function Elemente() {
.
..
this.gefiltert = function(filter){
alert("filter.name");
 
}
...
 
};


var fA = new Filter("FilterA");
var fB = new Filter("FilterB");

var e1 = new Element();
e1.abboniereEvent(fA.filterUpdate, gefiltert);

var e2 = new Element();
e2.abboniereEvent(fA.filterUpdate, gefiltert);

var e3 = new Element();
e3.abboniereEvent(fB.filterUpdate, gefiltert);


fA.setFilterValue(1);
-> e1.gefiltert() -> "FilterA"
-> e2.gefiltert() -> "FilterA"

fB.setFilterValue(1);
-> e3.gefiltert() -> "FilterB"

Ich hoffe es ist klar, was ich vorhabe?!

Sobald das Filter-Objekt ein Event feuert, sollen andere Objekte (hier Elemente), die das Event abonniert haben, darauf reagieren. In OOP-Sprachen gibt es so ein Konstrukt natürlich, aber auch bei JS?!

Natürlich könnte ich in dem Filter-Objekt auch ein Array an Elemente-Instanzen pflegen und diese bei "Auslösung des Events" antriggern, jedoch soll keine feste Verbindung zwischen Filter und Element bestehen, sodass ein Element auch jederzeit und ohne weitere Verbindlichkeiten gelöscht werden kann.

Oder gibt es sonst Lösungsansätze?
Wichtig wäre mir, dies alles ohne irgendwelche Frameworks zu realiseren.

So nebenbei verstehe ich die meisten Beispiele mit eigenen Events mal gar nicht...
Ich weise einem Objekt einen EventListener zu und führe dann feure das Event dann auf eben diesem Element?!
Dann kann ich den Umweg über das Event doch gleich lassen, oder?

Ich dachte immer, Events dienen eben dazu, diese zu abonnieren und (ohne weiteren Zusammenhang) darauf zu reagieren...
Oder habe ich jetzt hier das Grundkonzept in JS völlig falsch verstanden?!

Wo ist der Unterschied zwischen:

//init Event
var event = new Event('blubb');

//Deklaration des EventListener bzw. der Event-Funktion
el.addEventListener('blubb', function(e){alert('blubb');};

//Event feuern bzw. Event-Funktion ausführen
el.dispatchEvent(event);

und

//Deklaration der Event-Funktion
el.blubb = function(){alert('blubb');};

//Ausführung der Event-Funktion
el.blubb();

Vielen Dank und beste Grüße
Q