Dialog-Box - Confirm

[dedlfix]

Tach!

Und dazu eine Frage: Warum funktioniert das

document.querySelector('#ctrl-open-my-dialog').addEventListener('click', event => {
	myDialogElement.showModal();
});

aber nicht das?

document.querySelector('#ctrl-open-my-dialog').addEventListener('click', myDialogElement.showModal);

Ich habe eine begründete Vermutung: Wegen this.

Ja, aber die Sachlage liegt etwas anders. Es spielt keine Rolle, ob es eine Arrow Function oder eine herkömmliche ist. Es liegt aber daran, ob der Eventhandler eine Function ist oder nur eine Function-Referenz.

myDialogElement.showModal ist eine Function-Referenz. Das heißt, die Referenz zeigt genau auf diese Methode, das Objekt davor wird nicht mehr beachtet. Und diese Function/Methode wird nun zum Event aufgerufen, als ob es eine statische Methode des Objekts wäre. Innerhalb der Function zeigt das this auf den aufrufenden Kontext. (Wo genauhin spielt keine Rolle, man kann es auf diese Weise ja nicht gebrauchen.)

Bettet man hingegen myDialogElement.showModal() (jetzt mit Klammern) in eine Function ein, egal ob Arrow oder herkömmlich, dann wird zuerst das Object myDialogElement ermittelt und dann davon die Methode aufgerufen. Und nun zeigt das this auch auf das Objekt, so wie man das bei jeder Art Aufruf à la foo.bar() erwartet.

Ich kann das nicht exakt erklären, aber ich hoffe, es war auch so verständlich. An dem Fall hab ich jedenfalls schon bei einer meiner Anwendung eine Weile gesessen, bevor ich das Problem erkannt hatte.

dedlfix.