Antwort an „Rolf B“ verfassen

Existenz eines 'dynamisch' erzeugten Elements ermitteln

Rolf B 12.04.2024 14:02 (Versionen)

Hallo znoerk,

ob neue Elemente hinzugefügt werden, bekommst Du mit einem MutationObserver heraus.

Aber das ist mühselig, und zumeist kann man das mit Event-Delegation (a.k.a. bubbling) einfacher lösen. Die Frage nach dem Event, das zu fangen ist, wird hier relevant. Die meisten Events "blubbern", d.h. sie werden nicht nur auf dem Element selbst signalisiert, sondern auch auf den Elternelementen.

<body>
   <main>
      <button id="foo">CLOCK</button>
   </main>
</body>

Um einen Klick auf diesen Button zu verarbeiten, kannst Du den click-Handler auf dem Button, auf dem main-Element oder auf dem body-Element registrieren. Solange nicht irgendein Mistvieh event.stopPropagation() aufruft, blubbert das Event vom Button bis ganz nach oben und kann überall behandelt werden.

Also beispielsweise:

document.body.addEventListener("click", pfeifenAugust);

function pfeifenAugust(clickEvent) {
   ...
}

Du musst dann lediglich herausfinden, ob das click-Event auf einem Element gefeuert wurde, das Dich interessiert. Dafür dient die target-Eigenschaft des Eventobjekts, das der Pfeifenaugust übergeben bekommt. Darin steht, auf welchem Element das Event ausgelöst wurde.

Das ist etwas tricky. Wenn Du auf Buttons reagieren willst, dann KÖNNTEST du testen, ob event.target instanceof HTMLButtonElement erfüllt ist. Oder event.target.tagName == "BUTTON". Es gibt aber auch fancy buttons, die HTML enthalten. Klickt man nun auf ein HTML-Element im Button, dann ist dieses Element das event.target. Deshalb muss man erstmal den Button suchen:

function pfeifenAugust(clickEvent) {
   const button = clickEvent.target.closest("button");
   if (!button)      /* das war kein Button */
      return;

   if (/* ist das ein relevanter button */) {
       /* verarbeiten */
   }
}

Auf diese Weise ist es Dir komplett wurscht, ob drei oder drölf Buttons ergänzt wurden, du fängst sie alle.

Es sei denn, du möchtest aktiv werden, bevor der Handler von der Lib aktiv wird. Oder das eingangs erwähnte Mistvieh hat das Bubbling gestoppt. Dann könnte es hilfreich sein, nicht in die Bubbling-Phase einzugreifen, sondern in die Capture-Phase. Guck dafür mal im Grundlagenartikel zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach.

Rolf

--
sumpsi - posui - obstruxi