script nach oop portieren (problem mit this)

[Nick]

hi
ich möchte ein script objektorientiert machen.
die testseite ist http://nickerdmann.de/divpopup.html
beim klick auf den link öffnet sich die alte version des scripts (unsauber, funktioniert aber).
die neue objektorientierte version startet beim ausführen des codes
bla = new divpopup("gg", "gg", "c", 200, 200, 200, 200);bla.open();
funktioniert auch prima, allerdings gibts dan sehr viele fehlermeldungen beim
mouseovern der blauen leiste. firebug sagt mit, dass sich das this in
this.move nicht auf das elternobjekt (bla) bezieht, sondern auf die blaue leiste
die natürlich kein move() hat. wie kannich das problem lösen, d.h. dass sich das this auf bla bezieht?

achja, da das script noch nicht in opera und ie funktioniert, habe ich die
browser erstmal ausgeschlossen, nicht wundern ;)

Nick

[molily]

Hallo,

Event-Handler werden im Kontext des Elementobjektes ausgeführt, dessen Handler gefeuert wurde. Du kannst das entweder mittels bindAsEventListener umgehen oder anderweitig dafür sorgen, dass du in der Handlerfunktion Zugriff auf die zugehörige divpopup-Instanz hast. Zum Beispiel sind lokale Variable in der Konstruktor-Funktion auch in den Methoden verfügbar, die du this zuweist. Darin kannst du einfach var thisObject = this; notieren und kannst dann über thisObject in den Methoden auf das zugehörige Instanzobjekt zugreifen. siehe auch Closures.

Mathias

[Nick]

das hab ich jetzt so aufgeschrieben:
this.caption.addEventListener("mousemove", thisObject.caption_mousemove, true);
jetzt tut das script garnichts mehr.
woran liegts?

[Christian S.]

das hab ich jetzt so aufgeschrieben:
this.caption.addEventListener("mousemove", thisObject.caption_mousemove, true);
jetzt tut das script garnichts mehr.
woran liegts?

Da müsste man mal das ganze Script sehen... addEventListener kennt IE übrigens nicht.

Gruß!

[Nick]

das steht doch im ersten post ganz genau beschrieben -- wo das script zu
finden ist und dass ich den ie *erstmal* ausgeschlossen hab.

[molily]

Hallo,

das steht doch im ersten post ganz genau beschrieben -- wo das script zu
finden ist und dass ich den ie *erstmal* ausgeschlossen hab.

Wieso wurschtelst du mit nicht-browserübergreifenden Techniken herum, wenn du es ganz einfach und sofort mit traditionellem Event-Handling browserübergreifend lösen kannst. Seltsames Entwicklungsmodell, dass »erst einmal« für Firefox entwickelt (und dabei auch noch Fehler macht, siehe addEventListener mit Capturing statt Bubbling - das geht im Firefox überhaupt nur, weil der in dem Punkt aus Fehlertoleranz vom Standard abweicht) und dabei absichtlich und unnötigerweise andere Browser ausschließt... Dann musst du später nur noch Feinanpassungen machen, als nochmal alles umzuschreiben, weil hunderte Stellen oder das ganze Konzept nicht browserübergreifend funktionieren. Just my two cents.

Mathias

[molily]

Hallo,

das hab ich jetzt so aufgeschrieben:
this.caption.addEventListener("mousemove", thisObject.caption_mousemove, true);
jetzt tut das script garnichts mehr.
woran liegts?

Der Sinn von thisObject ist, dass du *in der Handlerfunktion* (in deinem Beispiel caption_mousemove) auf die Instanz zugreifen kannst, also dort, wo du nicht mit this darauf zugreifen kannst. In obige Zeile ist es unnötig, weil du dort noch this verwenden kannst, wie du es auch schon tust.

Wenn du dann noch var thisObject = this; in der Konstruktorfunktion notierst, sollte es funktionieren.

Und bitte addEventListener (zumindest in 99% der Fälle) nicht mit dem dritten Parameter true verwenden, sondern immer false! Siehe auch http://de.selfhtml.org/dhtml/modelle/dom.htm#event_handling. Aber wenn du den IE unterstützen willst, erledigt sich das und du schreibst traditionell element.onevent = handler;.

Mathias

[Christian S.]

Hi,

Aber wenn du den IE unterstützen willst, erledigt sich das und du schreibst traditionell element.onevent = handler;.

Also ich schreib immer attachEvent. Dann spart man sich auch das window.event gedöns, da das event objekt dann auch implizit übergeben wird.

this kann man auch aufs HTML Element umleiten. Für das ganze Crossbrowser EventHandling würde man sich dann natürlich Funktionen basteln.

Gruß!

[molily]

Hallo,

Also ich schreib immer attachEvent. Dann spart man sich auch das window.event gedöns, da das event objekt dann auch implizit übergeben wird.

this kann man auch aufs HTML Element umleiten. Für das ganze Crossbrowser EventHandling würde man sich dann natürlich Funktionen basteln.

Ich weiß nicht recht, was du mir sagen willst. Bei Microsofts attachEvent muss man immer noch über window.event auf das Event-Objekt zugreifen und das Ausführen im Kontext des Elementobjekten muss man tatsächlich selbst mit so etwas wie bindAsEventListener tun. Vielleicht meintest du gängige »addEvent«-Helferfunktionen, die im Falle des IEs attachEvent verwenden und einem die Workarounds abnehmen.

Mathias

[Christian S.]

Hi,

Ich weiß nicht recht, was du mir sagen willst. Bei Microsofts attachEvent muss man immer noch über window.event auf das Event-Objekt zugreifen und das Ausführen im Kontext des Elementobjekten muss man tatsächlich selbst mit so etwas wie bindAsEventListener tun. Vielleicht meintest du gängige »addEvent«-Helferfunktionen, die im Falle des IEs attachEvent verwenden und einem die Workarounds abnehmen.

Hm, als ich das letzte mal attachEvent genauer mir anschaute, wurde da immer das event objekt implizit an den Handler übergeben... Oder ich irre mich da...

Ja, jedenfalls meine ich genau solche schönen EventHandling Wrapper.

Gruß
Christian

[molily]

Hallo,

Oder ich irre mich da...

Ja.

Mathias

[Christian S.]

Hi,

Oder ich irre mich da...

Ja.

scheinbar nicht. Hab es nun auf 2 WinXP rechnern probiert, einer mit IE 6, einer mit IE 7. Bei beiden wird das Event Objekt implizit übergeben, so dass window.event nicht nötig ist.

Gruß!

[molily]

Hallo,

Bei beiden wird das Event Objekt implizit übergeben, so dass window.event nicht nötig ist.

Stimmt tatsächlich, diese Abweichung vom traditionellen Event-Handling war mir nicht bekannt. Scheint auch nicht großartig verbreitet oder dokumentiert zu sein, stattdessen findet man überall nur window.event.

Mathias

[Nick]

so, ich hab das jetzt so geschrieben:

thisObject = this;
this.caption_mousemove = function(event) {
 thisObject.move(event);
}
this.caption.addEventListener("mousemove", this.caption_mousemove, false);

wenn ich die titelleiste mouseovere, kommt die meldung, dass es thisObject
nicht gäbe.

Nick

[Gunnar Bittersmann]

@@Nick:

so, ich hab das jetzt so geschrieben:
thisObject = this;

Vergleiche das mit dem, was molily dir sagte!

Live long and prosper,
Gunnar