Events, Objects and the 'this' object

[DBoy001]

Here's a good one,

I have an object class wich dynamically creates a control in the page.
Then it binds an event to that control, pointing on one of its methods
(the object's). This method, in turn, calls other of its own
methods...

The binding seems ok and the change() method does get called. But I
get an error message (This object does not support this property or
method) when I call other methods on the object.

I think that the implicit "this" object sent to the method does not
point to the right object instance...

Does anyone have a clue on how I might solve this ?

TextField.prototype.generateField = function() {
this.fieldReference = window.document.createElement("input");
this.fieldReference.type = "text";

this.fieldReference.name = this.fieldId;
this.fieldReference.id = this.fieldId;
this.fieldReference.value = this.value;

this.fieldReference.attachEvent("onchange", this.change);

this.fieldWrapperReference.innerHTML = "";
this.fieldWrapperReference.appendChild(this.fieldReference);
}

TextField.prototype.change = function() {
// Fired by the onchange event
this._setStyles();
this._updateChilds();
if (this.onChangeFunction != null) {
this.onChangeFunction();
}
}

 

[Robert]

Here's a good one,
I think that the implicit "this" object sent to the method does not
point to the right object instance...

Does anyone have a clue on how I might solve this ?

TextField.prototype.generateField = function() {
this.fieldReference = window.document.createElement("input");
this.fieldReference.type = "text";

this.fieldReference.name = this.fieldId;
this.fieldReference.id = this.fieldId;
this.fieldReference.value = this.value;

this.fieldReference.attachEvent("onchange", this.change);

Hmmm let me think....

var self = this;
var innerFunc = new function()
{
self.change();
}
this.fieldReference.attachEvent("onchange", innerFunc);

Does this work?

 

[Elegie]

DBoy001 wrote:

Hi,

I think that the implicit "this" object sent to the method does not
point to the right object instance...

That's correct.

this.fieldReference.attachEvent("onchange", this.change);

Here, you attach the function "this.change" and not the method
"this.change". This means that the "this" value inside of "this.change"
depends on the caller, and would be in your example the element from
which the event is generated, and not your custom object.

You have many ways to solve this issue, but you'll have probably to
refine a bit your object interface, thinking about how to grasp/hold
references. One of the most appropriate possibility is
"associateObjWithEvent" pattern, which can be found in this newsgroup
FAQ Notes :

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


HTH

 

[Richard Cornford]

Robert wrote:

Hmmm let me think....

var self = this;
var innerFunc = new function()
{
self.change();
}

At this point - innerFunc - has been assigned a reference to a newly
created object and the - self.change(); - method has been called. This
is unlikely to be desirable.

this.fieldReference.attachEvent("onchange", innerFunc);

Does this work?

No, - innerFunc - is not executable.

Richard.

 

[Robert]

Robert wrote:



At this point - innerFunc - has been assigned a reference to a newly
created object and the - self.change(); - method has been called. This
is unlikely to be desirable.

I'm sorry. I meant to write
var innerFunc = function()

 

[DBoy001]

Thanks everyone for quick and smart answers, this has helped a lot.

Elegie: the article you provided
(<URL:http://www.jibbering.com/faq/faq_notes/closures.html>) offers
great solutions and has helped me comprehend a lot about the
function/object mechanism... thanks !