Existenz eines 'dynamisch' erzeugten Elements ermitteln bearbeitet von Rolf B 12.04.2024 14:02 Hallo znoerk, ob neue Elemente hinzugefügt werden, bekommst Du mit einem [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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. ~~~html <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: ~~~js 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: ~~~js 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](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung) zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach. _Rolf_ -- sumpsi - posui - obstruxi
Existenz eines 'dynamisch' erzeugten Elements ermitteln bearbeitet von Rolf B 12.04.2024 14:06 Hallo znoerk, ob neue Elemente hinzugefügt werden, bekommst Du mit einem [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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. ~~~html <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: ~~~js 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: ~~~js function pfeifenAugust(clickEvent) { const button = clickEvent.target.closest("button"); if (!button) { /* das war kein Button */ return; } else 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](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung) zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach. _Rolf_ -- sumpsi - posui - obstruxi
Existenz eines 'dynamisch' erzeugten Elements ermitteln bearbeitet von Rolf B 12.04.2024 14:06 Hallo znoerk, ob neue Elemente hinzugefügt werden, bekommst Du mit einem [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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. ~~~html <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: ~~~js 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: ~~~js function pfeifenAugust(clickEvent) { const button = clickEvent.target.closest("button"); if (/* das ist kein button */) { return; } else 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](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung) zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach. _Rolf_ -- sumpsi - posui - obstruxi
Existenz eines 'dynamisch' erzeugten Elements ermitteln bearbeitet von Rolf B 12.04.2024 14:05 Hallo znoerk, ob neue Elemente hinzugefügt werden, bekommst Du mit einem [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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. ~~~html <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: ~~~js 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: ~~~js function pfeifenAugust(clickEvent) { const button = clickEvent.target.closest("button"); if (/* das ist nicht mein button */) { return; } else { /* 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](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung) zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach. _Rolf_ -- sumpsi - posui - obstruxi
Existenz eines 'dynamisch' erzeugten Elements ermitteln bearbeitet von Rolf B 12.04.2024 14:04 Hallo znoerk, ob neue Elemente hinzugefügt werden, bekommst Du mit einem [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/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. ~~~html <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: ~~~js 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: ~~~js function pfeifenAugust(clickEvent) { const button = clickEvent.target.closest("button"); if (/* das ist nicht mein button */) { return; } else { /* 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 irgendsoein Pfeifenaugust hat eine Etage tiefer einen Eventhandler dieser Art registriert: ~~~js function finalHandler(event) { /* irgendwas tun */ event.stopPropagation(); } ~~~ Nach stopPropagation ist Schluss mit Blubbern und du kommst nicht mehr dran. Wenn Du unbedingt als erster aktiv werden musst, oder wenn die Propagation gestoppt wird, **könnte** es hilfreich sein, nicht in die Bubbling-Phase einzugreifen, sondern in die Capture-Phase. Guck dafür mal im [Grundlagenartikel](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM/Ereignisverarbeitung) zur Ereignisverarbeitung im Abschnitt über Bubbling und Capturing nach. _Rolf_ -- sumpsi - posui - obstruxi
nicht angemeldet nicht angemeldet
