required setzten
bearbeitet von
Hallo Gunnar
> Von der Notation mit `on…` sollte man sowieso Abstand nehmen und `addEventHandler()` verwenden.
:-)
> Eine Frage hab ich dazu aber: Warum kann man statt
>
> ~~~js
> document.querySelector("fieldset").addEventListener('click', function ()
> {
> requiredOnRequestElements.setRequired();
> });
> ~~~
>
> nicht einfach
>
> ~~~js
> document.querySelector("fieldset").addEventListener('click', requiredOnRequestElements.setRequired);
> ~~~
>
> schreiben?
Den richtigen Hinweis hat [dedlfix](https://forum.selfhtml.org/self/2016/apr/15/required-setzten/1665418#m1665418) ja schon gegeben: Es liegt am Kontext.
Wenn ein registrierter Eventhandler beim Ereigniseintritt aufgerufen wird, dann sieht das etwa so aus:
~~~ javascript
listener.call(element, event);
~~~
Das heißt, die Kontextvariable `this`{: .language-javascript} 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`{: .language-javascript} bezogen auf dein Beispiel nicht explizit gesetzt würde, dann wäre eben im *Sloppy Mode* `window`{: .language-javascript} der Wert von `this`{: .language-javascript}, oder im *Strict Mode* `undefined`{: .language-javascript}, da die Funktion hierbei nicht als Methode aufgerufen wird.
Es ist so wie wenn du schreiben würdest:
~~~ javascript
'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`{: .language-javascript} 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.
~~~ javascript
document.body.addEventListener('click', object.method.bind(object));
~~~
Allerdings hätte man dadurch natürlich nicht wirklich etwas gewonnen, da der eigentliche Eventhandler auch hier in eine weitere Funktion eingeschlossen wird, sodass man es auch gleich so notieren kann wie du es in der ersten Variante gemacht hast. ;-)
Viele Grüße,
Orlok