• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Erweiterte Ereignisverarbeitung

J

jsxcii

Guest
Guten abend,
ich bin gerade auf eine Interessante Frage gestoßen die sich mir in einem Projekt aufgetan hat.

Hier ein kleiner Auszug aus dem html.

Code: 
<body>
     <img id="clickme" src="http://forum.jswelt.de/images/x.png" alt="nix"/>
</body>

Ich möchte nun via Javascript ein Click-Event an "clickme" binden. Bei dem sollen zwei Videoplayer an der Stelle von "clickme" erzeugt werden und "clickme" mit samt seiner Eventlistiner entfernt werden.
Zudem sollen die Player alle gängigen Kontrollelemente besitzen und anwendbar(klickbar) sein.

Mein Ansatz in Javascript war dieser...

Code: 
var clickme = document.getElementByID("clickme");

clickme.addEventListiner("click", function (){
   //hier werden die Videoplayer konstruiert.
   // hier werden Eventlistiner angebunden.
  // hier soll clickme entfernt werden.
});

Was mich daran stört sind zwei Sachen.
1.) Ich erzeuge die EventListiner der Videoplayer innerhalb eines EventListiners von Clickme
2.) ich entferne Clickme in seinem eigenen EventListiner zu der Zeit in der er ausgeführt wird.

Gibt es da eine bessere Lösung ?

mfg jsxcii
 
Zuletzt bearbeitet:
1) wenn dich das so sehr stört, dann benutz doch event delegation. aber ehrlich gesagt sehe ich nicht das Problem darin, die Event Handler zu definieren direkt nachdem du die dazugehörigen Elemente erstellt hast.

2) ja und?

Gibt es da eine bessere Lösung ?
Zum Vergrößern anklicken....
m.E.n. ist alles andere komplizierter.
 
Ok soweit habe ich deine Antwort verstanden, um dir genauer zu sagen was mich stört lass mich näher auf die Videoplayer-EventListiner eingehen.

Angenommen ich möchte das wenn ich ein Video abspiele mir eine Info-Box zum Video konstruiert wird und diese Info-Box soll mehrere Tabs (Reiter) haben die ich wieder mit einem EventHandler ansteuern kann.

Dann müsste ich ja in dem Videoplayer-EventListiner nochmal ein Dom-Objekt erzeugen und diesem wieder einen Event-Listiner zuteilen so ergibt sich in meinen Augen eine unschöne Schachtellung.

Code: 
clickme-EventListiner:
        konstruiere Videoplayer
        Videoplayer-Eventlistiner:
                konstruiere info-Box
                info-Box-EventListiner:
                        ...usw.

Es schachtelt sich so immer weiter mit jedem neuen DOM-Element + EventListiner im Funktions-Scope und ich finde das so einfach unschön.

Kann ich das irgendwie auslagern oder eleganter lösen?
Versteh mich nicht falsch meine Application läuft weitgehend reibungslos doch finde ich meinen Code so nicht sonderlich "schön".

Ach vielen Dank für deine Antwort, hätte ich beinahe vergessen :p
 
Zuletzt bearbeitet:
Der entscheidende Punkt für die "Entschachtelung" ist die Frage, wie generisch die Event-Handler sind. Wenn sie immer nur das gleiche machen – nur mit ein paar anderen Parametern – lassen die sich sehr wohl auslagern. Das wird dann i.A. als Event Delegation bezeichnet (Event auf ein bereits existierendes Parent-Element definieren und in dessen Handler prüfen, ob der eigentliche Handler auf das aktuelle Element (was bei der Definition noch gar nicht existieren braucht) angewandt werden soll).

Genausogut kannst du die Handler-Funktionen auch außerhalb definieren, sind ja schließlich First-Class Citizens (nur mit eventuellen Closures wird’s dann schwierig).
 
Ja ich habs mit der Delegation probiert, hat vieles übersichtlicher gemacht jedoch gibt es da noch eine Stelle die mir Kopfzerbrechen bereitet.

Wenn ich einen EvenListiner habe der so aussieht...

Code: 
var elem1 = document.getElementByID("elem1");

elem1.addEventListiner("click",function (){
        //konstruiere elem2

        //addEventListiner zu elem2

        //entferne elem1 und den Handler
},false)

... und er kommt zu dem Punkt an dem elem2 seinen EventListiner bekommt wird die Funktion ja weiter abgearbeitet und entfernt dann elem1 sowie den Handler (sich selbst ?).

Nach meinem Verständnis existiert ab diesem Zeitpunkt der EventListiner von elem2 für sich alleine.

Kann man dies trotzdem noch als Schachtelung bezeichnen oder ist mein Verständnis hier irreführend ?
 
Zuletzt bearbeitet:
Nach meinem Verständnis existiert ab diesem Zeitpunkt der EventListiner von elem2 für sich alleine.
Zum Vergrößern anklicken....
das tut er auch, wenn er nicht in einem Event Handler definiert würde.

Kann man dies trotzdem noch als Schachtelung bezeichnen oder ist mein Verständnis hier irreführend ?
Zum Vergrößern anklicken....
1) ja. 2) ich kenne dein Verständnis von Schachtelung nicht.

entfernt dann elem1 sowie den Handler (sich selbst ?).
Zum Vergrößern anklicken....
das Entfernen übernimmt der GC (garbage collector).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben