PDA

View Full Version : Selfdefined Objects and Events???

SIGINT
12-24-2002, 01:44 PM
Hi everybody,
i got this Problem:
I want to define a Object in Javascript and "attach" an Event to it. This Event shall fire a method of the object.
I tried this:


function layer_pos(x,y)
{
this.obj.style.left=x;
this.obj.style.top=y;
}


function layer(name,x,y,w,h)
{
obj = document.createElement("div");
obj.style.position="absolute";
obj.style.background="#ffff00";
obj.style.left=x;
obj.style.top=y;
obj.style.width=w;
obj.style.height=h;
obj.id=name;
document.body.appendChild(obj);
this.obj=obj;
this.pos=layer_pos;
this.hand=hand;
}

function hand(x,y)
{
this.obj.style.left=x;
}


Then i can create an instance of layer:

test=new layer("test",10,10,100,100);

I can write a Eventhandler,which handels all mouseevents and calls hand(event.x,event.y).
But this code is bull****,because i dont's know how to get the object,which shound recieve the event,i only know the target( == test.obj).
I want the object test as event.target but i get test.obj :-((
Does anyone know ,how i can include a eventhandler into the object-description?

Thx SIGINT
ConfusedOfLife
12-24-2002, 03:15 PM
Well dear, to be frank now someone is asking me to leave the computer coz he has lots of works to do! ( I'm in the company!!), but just having a glance at your code, here are my 2 cents:


obj.id=name;


it's wrong I think, it should be:

obj.setAttribute("id", name);


And I also think that you should change the following

function layer_pos(x,y)
{
this.obj.style.left=x;
this.obj.style.top=y;
}


to


function layer_pos(x,y)
{
this.style.left=x;
this.style.top=y;
}


Since object is undefined. Of course you have to do the same thing for your hand function.

I'll look at it more thouroughly as soon as I reach home!

PS: hey, what do you mean by that this.hand ?? I just can't understand it! shouldn't you use onmousedown or onclick?
joeframbach
12-24-2002, 03:30 PM
while we're on the subject of objects and programmer-defined methods and such, can someone please help me with my problems (http://www.codingforums.com/showthread.php?s=&threadid=11763)? nobody seems to be of much help, they just ***** at me on completely unrelated subjects.
ConfusedOfLife
12-26-2002, 12:10 PM
Well, I tried it at home as I promised and now this one works, I'm not sure if it's really what you want:

Working Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
</head>

<body>
<script>
function layer_pos(x,y)
{
this.obj.style.left = x;
this.obj.style.top = y;
}


function layer(name,x,y,w,h)
{
obj = document.createElement("div");
obj.style.position="absolute";
obj.style.background="#ffff00";
obj.style.left=x;
obj.style.top=y;
obj.style.width=w;
obj.style.height=h;
obj.id=name;
document.body.appendChild(obj);
this.obj=obj;
this.obj.pos = function() { layer_pos( x, y); };
this.obj.onclick = function() { hand( x, y); }; // Change this to "this.obj.hand"
}

function hand( x, y)
{
this.obj.style.left = x+5; // I'm adding 5 to it to see that it really works!
}
test=new layer("test",50,180,400,100);
</script>


</body>
</html>


Well, you don't need to use setAttribute for making an id, and your own code is correct. But instead of using "obj" in the layer function and then assinging the "obj" to "this.obj", I decided to use "this.obj" from the begining, but for some bizarre reasons it doesn't work! I put the code that's supposed to work ( but it doesn't!) in here, I hope someone can correct it:

Not working code

<script>
function layer_pos(x,y)
{
this.obj.style.left = x;
this.obj.style.top = y;
}


function layer(name,x,y,w,h)
{
this.obj = document.createElement("div");
this.obj.style.position="absolute";
this.obj.style.background="#ffff00";
this.obj.style.left=x;
this.obj.style.top=y;
this.obj.style.width=w;
this.obj.style.height=h;

this.obj.pos = function() { layer_pos( x, y); };
this.obj.onclick = function() { hand( x, y); }; // Change this to "this.obj.hand"

document.body.appendChild( this.obj);
this.obj.setAttribute( "id", name);
}

function hand( x, y)
{
this.obj.style.left = x+5; // I'm adding 5 to it to see that it really works!
}
test=new layer("test",50,180,400,100);

</script>