per CSS oder javascript automatisch Code an div anhängen

[Orlok]

Hallo Rolf

Innerhalb der Eventhandler-Funktion zeigt this auf das DOM Element, das das Event ausgelöst hat

Eventhandler werden grundsätzlich im Kontext des Elementes aufgerufen, für das der Handler registriert wurde. Dabei kann es sich wie in deinem Beispiel um das Element handeln, welches das Ereignis ausgelöst hat, aber das muss nicht so sein.

Wenn ich also explizit das Element referenzieren möchte, für das der jeweilige Handler registriert wurde, dann kann ich das über this machen, oder aber über die Eigenschaft currentTarget des Ereignisobjektes, welche ebenfalls eine Referenz auf dieses Element enthält.

Letzteres ist ein wenig mehr Schreibarbeit, verbessert meiner Meinung nach aber die Lesbarkeit des Codes, insbesondere dann, wenn die als Handler registrierte Funktion nicht unmittelbar bei der Registrierung definiert wird.

Wenn es andererseits darum geht das Element zu referenzieren, welches das Ereignis ausgelöst hat, beziehungsweise welches das Ziel des Ereignisses auf seinem Weg durch das DOM ist, dann wäre dies über die Eigenschaft target des Ereignisobjektes zu bewerkstelligen.

document.body.addEventListener('click', function (event) {
  console.log(event.target.tagName);
});

Abgesehen davon, dass man in vielen Fällen die Ereignisbehandlung an ein Element delegieren möchte, welches in der Hierarchie des DOM ein wenig höher angesiedelt ist, und der Zugriff auf das Element bei dem das Ereignis eingetreten ist somit ohnehin über die Eigenschaft target erfolgen muss, denke ich dass es allgemein zu empfehlen ist, das ereignisauslösende Element über diese Eigenschaft zu referenzieren. Selbst dann, wenn dieses Element keine Kindelemente besitzt und der Handler auch für dieses Element registriert wurde.

Viele Grüße,

Orlok