"this" in benutzerdefinierten Event-Handlern

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:

Jetzt sagst du zu attachEvent() _ebenfalls_ "proprietär"!

Gut beobachtet. attachEvent() -- nicht zu velwechsern mit
addEventListener() -- ist eine Methode des MSHTML-DOMs.

Doof gefragt...Was wäre denn dann "nicht proprietär"? :-)

Standardkonform ist eine Implementation von
EventTarget::addEventListener(),
wie ich schon erwähnte.

Jo. War ne Verwechslung: ...Event() mit ...EventListener(). Richtig
erkannt.

Man könnte jedoch tetrapilotomisch argumentieren, dass selbst
standardisierte Schnittstellen immer einen Ansatzpunkt in der
DOM-Implementation brauchen, der notwendigerweise
implementationsspezifisch und somit proprietär ist. Insofern ist
vollständig standardkonformes DOM-Scripting gar nicht möglich;

Davon ging ich auch nicht aus...(leider)

dies hat jedoch keine praktische Relevanz
und wird daher i.d.R. zu Recht vernachlässigt.

Darf ich?
s/zu Recht/gezwungenermaßen/ :-((
Yes. Weil jeder Browser seinen Stiefel zelebriert.
Naja noch ist nicht alle Hoffnung begraben; zumindest im Layoutbereich
keimt eine auf, welche mit lediglich drei Buchstaben und einer Zahl
beschrieben ist:
CSS3.
Doch was nützen die besten Standards, wenn sie browserseitig nur
rudimentär unterstützt werden!

-Andreas

"Ralf Beutler" <spamMe (AT) brain4 (DOT) de> wrote:

Andreas Eibach schrieb:

tdObj = document.createElement ("TD");
...
tdObj.onmouseover = function () { tuWas( ??? ) }

"this" an der Stelle ??? wäre Unfug, da es sich auf ein ganz anderes
Element beziehen würde!

auf was soll es sich denn beziehen?

Auf das tdObj, von dem es jeweils aufgerufen wurde.
Und das kann eben immer ein anderes sein!
Mal ein (etwas konsolidiertes) Beispiel:

/* ... (erzeuge TABLE + TBODY); ... */
for (i = 0; i < MAXROWS; i++) {
/* ... erzeuge (TR); ... */
for (k = 0; k < MAXCOLS; k++) {
/* erzeuge (tdObj) wie folgt: */
var tdObj = document.createElement("TD");
/* Zuweisung tdObj an meinen Eventhandler wie folgt */
tdObj.onmouseover = function {... };
}}

_Innerhalb_ der { } der 'function' geht das nach Tests _nicht_ mit
"this", da sich "this" da drinnen _nicht_ mehr auf tdObj bezieht, was
mir
anfangs auch noch nicht klar gewesen war. Richtig?

obj.onmouseover = function (this) { (assign this = param #1 to local
var); call tuWas (local var))

Du willst also dem Eventhandler (der zugewiesen Funktion) zum
Zeitpunkt des Aufrufs noch eine Variable bekannt machen, die obj nicht
kennt.

hmm obj kennt die eigentlich sehr gut: sich selber nämlich!
Die Routine kann nicht für alle Zellen gleich arbeiten und macht einige
Fallunterscheidungen; deswegen ist es notwendig, zu wissen, woher der
Handler ( = von welchem Zellenobjekt) aufgerufen wird.
obj (genauer tdObj) wird immer wieder neu erzeugt, und solange Zellen
hinzugefügt, wie die irgendwo hinterlegte Konstante MAXCOLS angibt.

Ist denn die Funktion tuWas eine Methode des Objektes welches du mit
this referenzierst? Oder ist es eine Methode des window Objektes?

tuWas() stellt den custom eventhandler selbst dar. Also z. B.
"modCellOnMouseHoverEvt()".

Hier mal was zum Probieren:
code snip

Danke - werd ich mal austesten.

Wenn der Eventhandler eine Methode eines Objektes[*] ist, dann könnte
ich dir noch einen eleganteren Weg vorschlagen.

Der Eventhandler ist - zumindest im Moment - völlig autark.
Da ich ja eine _"eingebaute"_ property (onMouseOver) auf meinen Handler
zeigen lasse, habe ich vorerst noch auf die voll-generische
obj.prototype.blubb-Geschichte verzichtet; ist aber nicht
ausgeschlossen, dass ich diese Struktur noch so oder ähnlich
implementiere.

<code snip 2>

MyClass.prototype.handleMouseOver = function(event){
// hier soll this auf auf mein Objekt zeigen und nicht auf die Node.
};

Vielen Dank ... das sind alles sehr gute Ansätze.
Ich hoffe nur, dass sie einigen Browsern nicht wieder "zu nah am DOM"
sind und die dann Bahnhof verstehen ;-)

-Andreas

""J. Strübig"" <struebig (AT) uni-mainz (DOT) de> wrote:

Andreas Eibach schrieb:
tdObj = document.createElement ("TD");
...
tdObj.onmouseover = function () { tuWas( ??? ) }

"this" an der Stelle ??? wäre Unfug, da es sich auf ein ganz anderes
Element beziehen würde!

Was meinst du mit ganz anderes Element?
this ist == tdObj

Hatte ich auch gedacht; _innerhalb_ der { } der function ist es jedoch
offenbar _nicht_ mehr tdObj!
(Ich vermute, 'this' innerhalb des function-Blocks referenziert die
function selber dann statt dessen.)
Ich hab mal in der Routine, die die Tabellenelemente erzeugt, der Zelle
ein "id" zugewiesen, dann eine Kopie von meiner Eventhandler-Routine
gemacht und die so umgeschrieben, dass sie als Parameter ein solches
'id' versteht. Vergiss es! _Wäre_ es tdObj, hätte der Handler ja so
aufgerufen werden können:

tdObj.onmouseover = function () { tuWas2 (this.id) }

Ich bekam bereits bei this.id einen Fehler; also musste ich davon
ausgehen, dass es sich nicht um eine Referenz aufs tdObj handelt!
(Quasi-)Hartcodiert funktionierte es allerdings. (also irgendwas
unflexibles mit .previousSibling.id in der function).

-Andreas

Andreas Eibach wrote:

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:
Jetzt sagst du zu attachEvent() _ebenfalls_ "proprietär"!
Gut beobachtet. attachEvent() -- nicht zu velwechsern mit
addEventListener() -- ist eine Methode des MSHTML-DOMs.

Doof gefragt...Was wäre denn dann "nicht proprietär"? :-)
Standardkonform ist eine Implementation von
EventTarget::addEventListener(),
wie ich schon erwähnte.

Jo. War ne Verwechslung: ...Event() mit ...EventListener(). Richtig
erkannt.

Und attach... mit add...

Man könnte jedoch tetrapilotomisch argumentieren, dass selbst
standardisierte Schnittstellen immer einen Ansatzpunkt in der
DOM-Implementation brauchen, der notwendigerweise
implementationsspezifisch und somit proprietär ist. Insofern ist
vollständig standardkonformes DOM-Scripting gar nicht möglich;

Davon ging ich auch nicht aus...(leider)

dies hat jedoch keine praktische Relevanz
und wird daher i.d.R. zu Recht vernachlässigt.

Darf ich?
s/zu Recht/gezwungenermaßen/ :-((
Yes. Weil jeder Browser seinen Stiefel zelebriert.

Du verstehst mich mister ;-) Ich bezog mich nicht auf unterschiedliche
DOMs. Diese sind eine historisch, kommerziell und innovationstechnisch
begründete Realität, mit der man wird leben müssen.

Ich wollte darauf hinaus, dass man mit obiger hypothetischer Argumentation
ja behaupten könnte, auch z.B. document.body.addEventListener() oder sogar
document.getElementById() seien nicht standardkonform, da ja `document' eine
proprietäre, host-definierte Referenz zu einem Objekt ist, welches das
HTMLDocument-Interface implementiert.

Ohne einen host-definierten und somit proprietären Ansatzpunkt lassen sich
aber implementierte Schnittstellen gar nicht anwenden, insofern bleibt diese
Argumentation rein akademisch, solange die Implementation beim
Eigenschaftszugriff bzw. Methodenaufruf das tut, was in der
(W3C-DOM-)Spezifikation steht.

Naja noch ist nicht alle Hoffnung begraben; zumindest im Layoutbereich
keimt eine auf, welche mit lediglich drei Buchstaben und einer Zahl
beschrieben ist:
CSS3.
Doch was nützen die besten Standards, wenn sie browserseitig nur
rudimentär unterstützt werden!

Full ACK. Bei CSS liegt der Fall jedoch etwas anders: es werden da munter
Features in den Standards definiert, die kein UA vollständig unterstützt
(CSS2), und dann, wenn die Implementationen soweit gereift sind, dass
vollständige Unterstützung greifbar nahe ist, werden die Features mit der
Begründung, dass noch immer kein UA sie vollständig unterstützt in der
nächsten Revision wieder entfernt (CSS2.1). Ich kann nur hoffen, dass
derlei Unfug mit CSS3 ein Ende findet. W3C-Politik gehört jedoch nicht
hierher. EOD?


PointedEars

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:

W3C-Politik gehört jedoch nicht hierher. EOD?

ack.

Andreas Eibach wrote:

""J. Strübig"" <struebig (AT) uni-mainz (DOT) de> wrote:
Andreas Eibach schrieb:
tdObj = document.createElement ("TD");
...
tdObj.onmouseover = function () { tuWas( ??? ) }

"this" an der Stelle ??? wäre Unfug, da es sich auf ein ganz anderes
Element beziehen würde!
Was meinst du mit ganz anderes Element?
this ist == tdObj

Hatte ich auch gedacht; _innerhalb_ der { } der function ist es jedoch
offenbar _nicht_ mehr tdObj!

Dann machst Du etwas falsch.

[...]
tdObj.onmouseover = function () { tuWas2 (this.id) }
^

(Soviel zu Deiner früheren Behauptung, Deine die Lesbarkeit des Codes
erschwerende Trennung von Bezeichner und Argumentliste durch Whitespace
sei ein Versehen gewesen.)

Ich bekam bereits bei this.id einen Fehler; also musste ich davon
ausgehen, dass es sich nicht um eine Referenz aufs tdObj handelt!

Ohne Angabe der Fehlermeldung bleibt das nur eine weitere wilde Vermutung.
http://glasgoogle.de/

Möglicherweise ist Dein Problem, dass Du eine Closure erzeugst. Jedenfalls
kann ich Deine Beobachtung mit obigem Code und

function tuWas2(sID)
{
window.alert(sID);
}

in keinem UA reproduzieren, auch und insbesondere nicht in IE
6.0.2900.2180.xpsp_sp2_gdr.070227-2254 ("Mozilla/4.0 (compatible; MSIE 6.0;
Windows NT 5.1; SV1; .NET CLR 1.1.4322; .NET CLR 2.0.50727).

(Quasi-)Hartcodiert funktionierte es allerdings. (also irgendwas
unflexibles mit .previousSibling.id in der function).

Hartcodiert kann es immerhin keine Closure geben.


PointedEars
--
gibt es Variablen, die in allen gängigen Browsern funktionieren?
(Patrick Fiekers in dcljs <am7bvc$3bg2l$1 (AT) ID-83673 (DOT) news.dfncis.de>)

Andreas Eibach schrieb:

"Ralf Beutler" <spamMe (AT) brain4 (DOT) de> wrote:
Andreas Eibach schrieb:
"this" an der Stelle ??? wäre Unfug, da es sich auf ein ganz anderes
Element beziehen würde!

auf was soll es sich denn beziehen?

Auf das tdObj, von dem es jeweils aufgerufen wurde.
[..]
tdObj.onmouseover = function {... };
[..]
_Innerhalb_ der { } der 'function' geht das nach Tests _nicht_ mit
"this", da sich "this" da drinnen _nicht_ mehr auf tdObj bezieht, was
mir anfangs auch noch nicht klar gewesen war. Richtig?

ähm, das würde mich sehr verwundern. Normalerweise bezieht sich this in
einem eventhandler immer auf das das HTMLElement repräsentierende
Objekt. Von daher ist mir dein Problem nicht klar.

Hier mal was zum Probieren:
code snip
Danke - werd ich mal austesten.

Ja, aber das wird nicht so funktionieren, wie du erwartest.

br | rb
--
Sie freuten sich riesig, wenn eine Maschine nach sechs Stunden etwas
fertig brachte, wozu jeder Mensch auf der Straße für 2 Cent fähig
gewesen wäre. Anschließend ließen sie sich Bananen- und Sushi-Pizza
kommen und schliefen vor der Tastatur ein. [aus T.P., Heiße Hüpfer]

Andreas Eibach schrieb:

_Wäre_ es tdObj, hätte der Handler ja so aufgerufen werden können:

tdObj.onmouseover = function () { tuWas2 (this.id) }

Kannst du das als testcase ins Internet stellen?

br | rb
--
Sie freuten sich riesig, wenn eine Maschine nach sechs Stunden etwas
fertig brachte, wozu jeder Mensch auf der Straße für 2 Cent fähig
gewesen wäre. Anschließend ließen sie sich Bananen- und Sushi-Pizza
kommen und schliefen vor der Tastatur ein. [aus T.P., Heiße Hüpfer]

"Ralf Beutler" <spamMe (AT) brain4 (DOT) de> wrote:

Andreas Eibach schrieb:
_Wäre_ es tdObj, hätte der Handler ja so aufgerufen werden können:

tdObj.onmouseover = function () { tuWas2 (this.id) }

Kannst du das als testcase ins Internet stellen?

OK, werd am WE mal versuchen sowas zu bauen, ja.
Original mit allen "bells & whistles" tut sich das hier mit Sicherheit
keiner an.

-Andreas

Andreas Eibach schrieb:

""J. Strübig"" <struebig (AT) uni-mainz (DOT) de> wrote:
Andreas Eibach schrieb:
tdObj = document.createElement ("TD");
...
tdObj.onmouseover = function () { tuWas( ??? ) }

"this" an der Stelle ??? wäre Unfug, da es sich auf ein ganz anderes
Element beziehen würde!

Was meinst du mit ganz anderes Element?
this ist == tdObj

Hatte ich auch gedacht; _innerhalb_ der { } der function ist es jedoch
offenbar _nicht_ mehr tdObj!

Doch ist es.

tdObj.onmouseover = function () { tuWas2 (this.id) }

Wozu brauchst du in der Funktion die id? Du hast doch bereits das Objekt
mit this.

Struppi.