EventListener schachteln für click/keyup-Behandlung

[Rolf B]

Hallo Nico,

den geeignete Platz, um auf das Event zu lauschen, findest Du so:

• so nahe wie möglich am Button
• so weit wie nötig weg, um alle Buttons in einem Aufwasch abhandeln zu können

D.h. bei Dir das thead-Element der tabelle. Die Table als solche ginge auch, weil Du im Table Header keine Buttons hast.

Die Frage nach mehreren Komponenten stellt sich bei Dir nicht, du hast nur eine Tabelle.

Falls Du mehrere gleichartige Tabellen auf der Seite hättest, die Edit-Buttons besitzen, dann hast Du zwei Optionen.

• Einen Eventhandler pro Tabelle
• Einen Eventhandler auf einem gemeinsamen Elternelement der Tabellen (bspw. body).

Der Unterschied liegt darin, dass Du bei einem Eventhandler pro Tabelle die Möglichkeit hast, diesen Eventhandler so zu gestalten, dass er nur mit dieser einen Tabelle hantiert und ggf. über eine Closure die passenden Kontextdaten zur Tabelle hat.

Wenn Du einen Eventhandler für mehrere Tabellen baust, muss der Eventhandler erstmal rausfinden, um welche Tabelle es geht.

Aber, wie gesagt, du hast nur eine Tabelle, deswegen ist diese Überlegung unnötig. Leg den click-Handler auf die Tabelle.

Wenn Du nur einen Button hast, brauchst Du keine weiter Prüfung und kannst im click-Event direkt mit event.target.closest("tr") die Zeile rausfinden. Selbst dann, wenn der User neben den Button geklickt hat - der Button ist vor allem für Tastaturbedienung und Assistenztechnik wichtig.

Bei mehr als einem Button musst Du erstmal mit event.target.closest("button") zum Button, um abzufragen, welcher Button es ist, und kannst dann von da aus weiter zur Row, um den Datenkontext zu finden.

Rolf