events within classes - what am i doing wrong?

[dave]

Hello All,
I'm trying to make a class that I store a HTML Element in, and add a
mouseDown event into it.
However the function that grabs the mouse down event doesn't know the
element that is being received during the class init...

This probably makes no sense, so i've put a basic example here.
http://www.dhumpherys.com/help/help.html

when the page is initialized, the class is made, and the element is
printed in the yellow box.
The mousedown event is created as well. Now Click in the blue box...
the event is received, but the class doesn't know the value of it's
member anymore...

I'm sure this is some basic part of the class that I'm not
understanding... any guidance would be greatly appreciated.

Thanks!

[Dan Dorman]

On Mon, Mar 24, 2008 at 5:49 PM, dave <david.h...@gmail.com> wrote:
> The mousedown event is created as well. Now Click in the blue box...
> the event is received, but the class doesn't know the value of it's
> member anymore...

It's basically a context issue.

From your code:

this.div.observe('mousedown', this.mouseDown);

Which is great: it sets up the mouseDown function of your class to
respond to the onmousedown event. However, when that div calls the
observe() method, Prototype automatically sets up the event handler so
that it is /div/ that gets treated as "this" when the event is
triggered.

It's sort of like div has its own copy of your class's mouseDown
method, so when mouseDown() actually starts running, and it gets to
the line

$('output').innerHTML += (this.div + "<br>");

the "this.div" is being parsed as "div.div"--and div doesn't /have/ a
div property. Hence the undefined.

Fortunately, it's easy to put that function back into the proper
context, by "binding" the scope of the event handling function.
Revisiting that first line from your code:

this.div.observe('mousedown', this.mouseDown.bindAsEventListener(this));

Note that call to bindAsEventListener(). The argument is the object
whose context you want that method to be in when it's actually called.
So now when mouseDown gets called, your class instance is running the
show and since it /does/ have a div property, you shouldn't get that
pesky "undefined."

I'm not sure my explanation was particularly good, but you can find
out lots more about this from the API docs:
http://prototypejs.org/api/function (take a look at "bind" /and/
"bindAsEventListener").

Hope that helps.

:Dan

[dave]

excellent. and good description too.
Thank you so much dan!!


On Mar 24, 5:14 pm, "Dan Dorman" <dan.dor...@gmail.com> wrote:

> out lots more about this from the API docs:http://prototypejs.org/api/function(take a look at "bind" /and/

[Dan Dorman]

On Mon, Mar 24, 2008 at 6:22 PM, dave <david.h...@gmail.com> wrote:
> Thank you so much dan!!

You're welcome :)

:Dan