object reference in event handlers

[cainlevy]

Something that's been bugging me for a while: I can't figure out how to
register an object method as an event handler, and still use the 'this'
keyword inside the handler to refer to the object. For example:

function myObj ()
{
this.toString = function(){retu rn 'myObj'}; //define string
representation of this object
document.getEle mentById('test_ tag_id').onclic k = this.test; //attach
to some clickable element
}
myObj.prototype .test = function()
{
alert('object: ' + this);
}
tmp = new myObj(); //instantiate
tmp.test(); //verify the function works normally ... should report
'object: myObj'

Now, when I click on the object, the alert dialog reports 'object:
[object HTMLTableElemen t]'. Any ideas?

[Csaba Gabor]

Re: object reference in event handlers

If I replace this.test; with
function(obj) { return function() { obj.test.apply( obj); }; } (this);
it works as you've asked.

Csaba Gabor from Vienna

cainlevy wrote:[color=blue]
> Something that's been bugging me for a while: I can't figure out how to
> register an object method as an event handler, and still use the 'this'
> keyword inside the handler to refer to the object. For example:
>
> function myObj ()
> {
> this.toString = function(){retu rn 'myObj'}; //define string representation of this object
> document.getEle mentById('test_ tag_id').onclic k = this.test; //attach to some clickable element
> }
> myObj.prototype .test = function()
> {
> alert('object: ' + this);
> }
> tmp = new myObj(); //instantiate
> tmp.test(); //verify the function works normally ... should report 'object: myObj'
>
> Now, when I click on the object, the alert dialog reports 'object:
> [object HTMLTableElemen t]'. Any ideas?
>[/color]

[Michael Winter]

Re: object reference in event handlers

On 07/04/2005 06:06, cainlevy wrote:
[color=blue]
> Something that's been bugging me for a while: I can't figure out how to
> register an object method as an event handler, and still use the 'this'
> keyword inside the handler to refer to the object. For example:[/color]

The value of the this operator varies based on the circumstances in
which it's used. Within the body of a function, the this operator
takes on two possible value types: a reference to the global object,
or a reference to an object.

If the function is called directly, for example

var myFunction = myObj.myMethod;

myFunction();

the this operator will "point" to the global object. If the function
object is called through a property accessor, for example

myObj.myMethod( );

the this operator will "point" to the referenced object; myObj in this
case.
[color=blue]
> this.toString = function(){retu rn 'myObj'};[/color]

Unless the returned string changes, this too should be placed on the
prototype object.
[color=blue]
> document.getEle mentById('test_ tag_id').onclic k = this.test;[/color]

Here, you assign a function reference to a property of a different
object. When that function is invoked, it is done so as a property of
this new object. That's why you have a reference to the table, and not
the original object.

You might work around this in two ways:

1) Assign a reference to the original object to the element. You can
then use this reference in your listener code.

myObj.myMethod = function() {
/* Use
*
* this.obj
*
* to refer to myObj.
*/
};

element.obj = myObj;
element.onclick = myObj.myMethod;

2) Use a closure. There is more than one solution using this
approach. One might be:

function MyObj() {
var self = this;

this.myMethod = function() {
/* Use self to refer to an instance of MyObj,
* irrespective of how this function is called.
*/
};
}

Hope that helps,
Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Richard Cornford]

Re: object reference in event handlers

cainlevy wrote:[color=blue]
> Something that's been bugging me for a while: I can't figure
> out how to register an object method as an event handler,
> and still use the 'this' keyword inside the handler to refer
> to the object. ...[/color]
<snip>


Numerous techniques are in more or less common use, including the one
described in the note associated with this group's FAQ:-

<URL: http://jibbering.com/faq/faq_notes/closures.html#clObjI >

- which is probably the simplest to implement and the4 hardest to
understand.

Richard.