✔ Verstehe die Objektorientierung nicht

KoMtuR · 28. Oktober 2005

Also ich hatte mich mal an die Erstellung von Objekten mittels Javascript gemacht und komischerweise bin ich nun schon gescheitert, obwohl es noch ziemlich "leicht" zu verstehen sein sollte.

Ich hab hier ein Objekt "jw2DragBox" erstellt (zumindest versucht), welches später dazu dienen soll, bestimmte Layer verschiebar zu machen.

Code:

function jw2DragBox(container, handle, target) {
	handle = handle ? handle : container;
	this.container = document.getElementById(container);
	this.handle = document.getElementById(handle);
	if(target) {
		this.target = document.getElementById(target);
	}
	this._listeners = new Array();
	this._listeners['draginit'] = new Array();
	this._listeners['dragstart'] = new Array();
	this._listeners['dragmove'] = new Array();
	this._listeners['dragend'] = new Array();
	this._handlePress = function(event) {
							var funcs = this._listeners['dragstart']; //Zeile 39
							for(i in funcs) {
								funcs[i](event);
							}
				}
	this.start = function() {
					this.handle.addEventListener('mousedown', this._handlePress, false);
				}
	this.register = function(type, func) {
			this._listeners[type].push(func);
				}
}

Bis dahin bin ich gekommen und dachte mir, dass ich es mal ausprobieren sollte, wie das Ergebnis bis dahin aussieht:

Code:

<body>
<div id="box" style="position: absolute; left: 200px; top: 200px; opacity: 1;">
<p id="title">Titelleiste</p>
irgendein text
</div>
<div style="position:absolute; top:200px; left:200px;">
<input type="text" id="target" value="Schreib doch mal ein scheiss text hin" style="position:relative; left:100px; top:0px;" />
</div>
<script type="text/javascript">
function testpage() {
	alert("testseite");
}
var neueBox = new jw2DragBox('box', 'title', 'target');
neueBox.register('dragstart', testpage);
neueBox.start();
</script>
</body>

Da kam aber nun der Fehler. Also initialisiert scheint es ja zu sein, weil am Anfang keine Fehlermeldungen ausgegeben werden. Wenn ich dann aber in den Titel der Box klicke, dann kommt ein Javascriptfehler in meinem FF:

Error: this._listeners has no properties
Line: 39

Diese Zeile hab ich mal oben im Quelltext markiert. Nun meine Frage: Wie kann es sein, dass die Funktion "_handlePress" nicht auf die Objekteigenschaften zugreifen kann, die im Konstruktor erstellt worden sind? Oder hab ich da eine völlig falsche Strategie an dieses Problem heran zu gehen?

Wäre schön, wenn mir jemand helfen könnte, da ich nach 2h des Probierens und des Nachforschens keine Lust mehr habe

Edit: Kann es sein, dass durch dieses Eventhandler was durcheinander kommt? Ich hab das Gefühl, dass er die Funktion zwar noch aufruft, aber diese ihre Zugehörigkeit nicht mehr im Objekt selber sieht. Oder täusche ich mich nun?

Sven Mintel · 29. Oktober 2005

Zum Einen:
Frag mich nicht warum, aber mit addEventListener() will es nicht...keine Ahnung, warum

Wenn du stattdessen dem onmousedown-Attribut die entsprechende Funktion zuweist,bist du schon einen Schritt weiter.

Dann Problem 2: this._handlePress
Das funktioniert so keinesfalls. Mit this verweist du in diesem Fall auf das ElementObjekt, also handle....und nicht auf neueBox.

Es muss also lauten: neueBox._handlePress.

So sähe es dann aus:

Code:

function jw2DragBox(container, handle, target) 
{
	handle = handle ? handle : container;
	this.container = document.getElementById(container);
	this.handle = document.getElementById(handle);
	if(target) 
	{
		this.target = document.getElementById(target);
	}
	this._listeners = new Array();
	this._listeners['draginit'] = new Array();
	this._listeners['dragstart'] = new Array();
	this._listeners['dragmove'] = new Array();
	this._listeners['dragend'] = new Array();
	this._handlePress = function(event) 
	  {
      var funcs = this._listeners['dragstart']; 
        for(i in funcs) 
          {
            funcs[i](event);
          }
    }
	
	this.start = function() 
	  {
		  this.handle.onmousedown=new Function('f','neueBox._handlePress()');
		}
	this.register = function(type, func) 
	  {
		  this._listeners[type].push(func);
		}
}

Das Dumme an der Sache: du willst ja garantiert nicht im Objekt selbst per "neueBox...." Funktionen aufrufen, da du diverse Objekte verwenden willst.
Knackpunkt: Das Objekt weiss selbst nicht, wie es heisst

Lösung: beim Initialisieren des Objektes übergebe ihm seinen Namen und speichere ihn als Eigenschaft... dann kannst du per eval() jederzeit die Methoden des jeweiligen Objektes auf die Events legen, ohne dass was durcheinanderkommt.

KoMtuR · 29. Oktober 2005

Deinen letzten Abschnitt hab ich mir nun zu Herzen genommen und siehe da, es klappt sogar

Ich hab nun ein wenig das eigentliche Objekt vergewaltigt und es geht. Das Problem, was ich nun nach längerem probieren fand, ist dass bei addEventHandler man zwar eine Funktion aus dem Objekt selber verlinken kann, aber dies dann Probleme gibt. Wenn man dann das "handle" drückt wird zwar die Funktion "this._handlePress" aufgerufen, aber in dieser Funktion ist das this ne Referenz zum Handle und nicht zum Objekt. Deswegen findet der alles nicht, was mit dem Objekt selber zu tun hat.

Ich habe das nun so gemacht, dass der vor dem Setzen des Eventhandlers erstmal das Objekt selber in dem Handle (also das Html-Objekt, was mit angegeben wird) gespeichert wird. Dies wird dann bei der Funktion _handlePress wieder abgefragt und schon klappt das mit dem Problem, dass man den Objektnamen nicht weiß. Danke dir trotzdem für deine Antwort, weil dies mich genau auf diese Idee gebracht hatte

✔ Verstehe die Objektorientierung nicht

KoMtuR

Erfahrenes Mitglied

Sven Mintel

Mitglied

KoMtuR

Erfahrenes Mitglied

Neue Beiträge