Hallo Gunnar
Von der Notation mit
on…
sollte man sowieso Abstand nehmen undaddEventHandler()
verwenden.
:-)
Eine Frage hab ich dazu aber: Warum kann man statt
document.querySelector("fieldset").addEventListener('click', function () { requiredOnRequestElements.setRequired(); });
nicht einfach
document.querySelector("fieldset").addEventListener('click', requiredOnRequestElements.setRequired);
schreiben?
Den richtigen Hinweis hat dedlfix ja schon gegeben: Es liegt am Kontext.
Wenn ein registrierter Eventhandler beim Ereigniseintritt aufgerufen wird, dann sieht das etwa so aus:
listener.call(element, event);
Das heißt, die Kontextvariable this
der als Eventhandler registrierten Funktion wird mit dem Element, beziehungsweise dem Objekt initialisiert, für das der Eventhandler registriert wurde. Auch wenn das eigentlich nach dem Ereignismodell des DOM gar nicht mehr nötig wäre, da dasselbe Element auch in der Eigenschaft currentTarget
des Eventobjektes hinterlegt ist.
Das spielt hier aber im Prinzip keine Rolle, denn wenn der Wert von this
bezogen auf dein Beispiel nicht explizit gesetzt würde, dann wäre eben im Sloppy Mode window
der Wert von this
, oder im Strict Mode undefined
, da die Funktion hierbei nicht als Methode aufgerufen wird.
Es ist so wie wenn du schreiben würdest:
'use strict';
const object = {
method ( ) {
console.info(this);
}
};
const member = object.method;
console.info(typeof member); // function
member( ); // undefined
Aber natürlich gibt es die Möglichkeit den Wert von this
auf das Objekt zu setzen, dessen Methode die Funktion ist, indem man als Eventhandler eine gebundene Funktion registriert, welche die Methode im Kontext des als erstes Argument an die Methode bind
übergebenen Wertes aufruft.
document.body.addEventListener('click', object.method.bind(object));
Allerdings hätte man dadurch natürlich nicht wirklich etwas gewonnen, da auch hierbei zwei Funktionsaufrufe ausgeführt werden, sodass man es auch gleich so notieren kann wie du es in der ersten Variante gemacht hast. ;-)
Viele Grüße,
Orlok