Event Listener "feiner justieren" bzw. Event "konkretisieren"?

[Roadster]

Hallo allerseits!

Am besten ich veranschauliche mein Problem an einem kleinen Beispiel:

Stellen wir uns einen simplen Ladebalken vor, der aus drei div-Elementen besteht.

<div id="ladebalken">
 <div id="fortschrittsbox">
  <div id="fortschritt">
  </div>
 </div>
</div>

Nehmen wir nun an, der #ladebalken und der #fortschritt haben jeweils eine eigene
CSS-Animation.

Der #fortschritt soll die #fortschrittsbox füllen und im Anschluss soll der #ladebalken
samt Inhalt geschmeidig auf {opacity: 0;} und danach das ganze Ding auf {display: none;}
gesetzt werden.

Der erste Ansatz wäre (für jemand wie mich, der keine Ahnung von JS hat), der Folgende:

var ladebalken = document.getElementById("ladebalken");
var fortschritt = document.getElementById("fortschritt");

fortschritt.addEventListener("animationend", fortschrittkomplett);
function fortschrittkomplett()
{ladebalken.style.animationPlayState = "running";};

ladebalken.addEventListener("animationend", ladebalkenkomplett);
function ladebalkenkomplett()
{ladebalken.style.display = "none";};

Das Problem ist nun, dass es für den Event Listener offenbar keinen Unterschied macht,
ob eine CSS-Animation direkt bei dem angesprochenen div-Element passiert, oder bei
einem - demselben div-Element untergeordneten - div-Element.

Das heißt in diesem Beispiel würde der EventListener für den #ladebalken automatisch
auch auf das Ende der Animation des #fortschritts reagieren.

Was bei diesem simplen Beispiel noch einigermaßen unproblematisch zu umgehen ist,
wächst sich bei komplexeren Modellen doch zu einem echten Ärgernis aus.

Speziell wenn eine Kette von Ereignissen (Animationen) in Gang zu setzen ist und
bei den davon betroffenen Elementen einige ineinander verschachtelte div-Elemente sind,
bleiben soweit ich das überblicke nur zwei Optionen:

Statt die einzelnen Animationen und Funktionen mit dem EventListener aneinander zu knüpfen,
müsste man sie mit der (eher weniger präzisen) Timeout-Function hintereinanderschalten,

oder

man müsste von vorneherein verhindern, dass mit CSS animierte div-Elemente ineinander
verschachtelt sind, und die Elemente statt dessen mittels z-index übereinanderlegen,
was aber unter Umständen wiederum ultra umständlich wäre, da jedes "Kind"-Element ja
dann auch zusätzlich die Animation des "Eltern"-Elementes nachvollziehen müsste.

Meine Frage also an diejenigen, die mehr wissen als ich:

Ist es möglich den EventListener so einzustellen, dass er tatsächlich nur auf das
div-Element "hört", dass im script angegeben ist, also, um im Beispiel zu bleiben,
bei ladebalken.addEventListener("animationend", xyz); eben NUR auf #ladebalken zu hören,
und dabei #fortschritt zu ignorieren???

Falls es da eine elegante Methode gäbe, wäre das eine große Erleichterung!

Dank im Voraus und

Gruß,

Roadster.

[Nico2]

Hallo!

Ist es möglich den EventListener so einzustellen, dass er tatsächlich nur auf das
div-Element "hört", dass im script angegeben ist, also, um im Beispiel zu bleiben,
bei ladebalken.addEventListener("animationend", xyz); eben NUR auf #ladebalken zu hören

Ja. Schau dir das Event Target an. das zeigt auf das Element, bei dem die Animation zuende gegangen ist.

https://developer.mozilla.org/en-US/docs/Web/API/event.target

ladebalken.addEventListener("animationend", function (event) {
  if (event.target.id == "ladebalken") {
    ...
  }
});

Oder ein Vergleich mit event.currentTarget, was auf #ladebalken zeigt.

ladebalken.addEventListener("animationend", function (event) {
  if (event.target == evnet.currentTarget) {
    ...
  }
});

https://developer.mozilla.org/en-US/docs/Web/API/event.currentTarget

MFG Nico

[Roadster]

Hey Nico!

Danke für die Info! Das schaut doch schonmal vielversprechend aus!

Theoretisch hätte ich es zwar auch mit der Timeout-Funktion machen
können, aber abgesehen davon, dass das nicht immer so zuverlässig
funktioniert, besteht dabei auch das Problem, dass bei hinreichend
komplexen Bedingungen die Funktionen komplett unübersichtlich
werden.

Ist irgendwie viel sauberer und übersichtlicher, wenn man die
entsprechenden Folgen direkt dort notieren kann, wo sie auftreten
sollen.

Hatte meine Seite zwar soweit, dass sie auch so funktioniert hat,
aber als ich dann nochmal eine Kleinigkeit ändern wollte, habe ich
einfach komplett den Durchbilck verloren und mich daher entschlossen
das ganze aufzudröseln und nochmal komplett neu zu schreiben...

Warst mir eine große Hilfe,

Nochmal Danke!

Gruß,

Roadster.