Dialog-Box - Confirm

[Camping_RIDER]

Aloha ;)

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.

Oben wird eine Arrow Function verwendet. Arrow Functions haben die Besonderheit, dass sie keinen eigenen Ausführungskontext mit eigenem this begründen, wie das bei normalen Funktionen der Fall ist (man spricht bei Arrow Functions von lexical this).

Deshalb musste man ja früher™️ bei Funktionen, die man mit window.setTimeout o.ä. aufgerufen hatte, immer recht umständlich das ursprünglich this mit durchreichen.

Du definierst ja die showModal-Funktion folgendermaßen: dialog.showModal = this.showModal.bind(this);

Das this, dass du da verwendest, ist im Fall der Arrow Function ein anderes als ohne Arrow Function. Ich bin leider nicht tief genug in der Materie drin, um dir aus dem Stegreif zu sagen, welcher Wert oben und unten jeweils in this liegt, aber es ist jedenfalls jeweils ein Anderer.

---

Oben war die begründete Vermutung, jetzt kommt Spekulation.

Ich glaube - wenn ich es richtig verstanden habe - du kannst den unteren Ansatz folgendermaßen retten:

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

Zumindest nach meinem Verständnis müsste bei dieser Variante der Kontext für this derselbe sein wie für die Arrow Function.

---

Da ich in der Materie aber wie gesagt alles andere als tief drin bin: Vielleicht kann @1unitedpower da mehr sagen bzw. meine Vermutungen bestätigen oder widerlegen.

Grüße,

RIDER