EventListener schachteln für click/keyup-Behandlung

[Nico R.]

Hallo Rolf,

oha, ich hab mein Versprechen vergessen. Aber wie ich Felix unten erklärt habe, glaube ich nicht, dass es Dich wirklich interessiert.

doch 😉 Ich hatte jetzt etwas Zeit, und hab das Codestück mal extrahiert und testtauglich umgeschrieben: https://fsv-optik.de/tests/dialog_fetch.html

Hier liegen alle weiteren Definitionen und Funktionen innerhalb der click-Funktion document.querySelector("tbody").addEventListener("click", function(event) { })

Beim Klick auf eine Tabellenzelle wird der dialog geöffnet, über den man den Wert der Tabellenzelle als input-Feld angezeigt bekommt und absenden kann (Anzeige über Entwicklerwerkzeuge -> Netzwerk).

Hier entsteht dann auch das oben beschriebene Phänomen der „Aufsummierung“ an fetch-Absendungen, die man bestaunen kann, wenn man die beiden Zeilen dialog_ok.removeEventListener("click"...) und dialog.removeEventListener("keydown"...) auskommentiert.

Es werden in dieser Variante auch alle click-Handler für den Dialog bei jedem Öffnen des Dialogs neu registriert. Das ist natürlich auch quatsch. Deshalb hab ich eine zweite Variante gebaut: https://fsv-optik.de/tests/dialog_fetch.html

Hier liegen die Unterfunktionen nicht mehr innerhalb des Tabellenzellen-clicks. Stattdessen gibt es die globalen Variablen let input, id, feld, wert, auf die die Unterfunktionen zugreifen (global stimmt nicht ganz, da das Ganze in einer Kapselfunktion liegt).

Ob das das Gelbe vom Ei ist, weiß ich nicht. Auf jeden Fall funktioniert diese Variante ohne RemoveEventListener. Für Kritik und Anregungen bin ich auf jeden Fall offen.

Schöne Grüße

Nico