@@Nico R.

Und worauf registriere ich dann den EventListener? Ich habe hier gelernt, es ist bessere Praxis, an einem übergeordneten Element zu lauschen, statt auf jedem einzelnen (button)-Element einen Handler zu registrieren.

Ja. Das nennt sich event delegation.

Den Eventhandler musst du nicht ganz oben document.documentElement registrieren; das Komponentenelement ist eine gute Stelle dafür.

Von der Komponente könnte es mehrere Instanzen auf einer Seite geben, deshalb gehe ich diese ich in meinem Beispiel in einer Schleife durch. Wenn die Komponente garantiert einzig ist, brauchst du die Schleife nicht.

Die Konsolenausgaben zeigen an, welches Element jeweils geclickt wurde. Da siehst du, dass es nicht das button-Element ist, wenn du auf ‚Action!‘ clickst. Deshalb muss man sich von event.target aus im DOM mit closest() bis zum button hochhangeln.

Wenn es keinen solchen gibt bis man ganz oben angekommen ist, ist die Bedingung nicht erfüllt und die Aktion wird nicht ausgefüht. Den else-Zweig wirst du nicht brauchen.

Jolan tru