I’m so relieved someone else was having this problem. I thought my debugger was broken since it displayed the wrong reference for this! :)

Eg.

In Constructor:
this.oText.onblur = createMethodReference(this, “TextBox_OnBlur”);

function createMethodReference(object, methodName) {
return function () {
object[methodName].apply(object, arguments);
};
}

DropDownSelection.prototype.TextBox_OnBlur = function()
{
var e = window.event;
if(this.isDropDownOpen && !this.isMouseOverDropDown)
this.Reset();
}

“this” now refers to my object in the event handler, not the calling object.


function foo() {
var elementID = "x"; // Somehow provide a reference to the HTMLElement

bar = new foo();
element = getElementById(bar.elementID);
element.prep =
function(obj) {
return function() {
obj.handleClick();
};
};
element.onclick = element.prep(bar);


This creates binds a closure to the HTMLEvent that sends the handleClick() message to the object you pass into prep(). You can reuse the variables “bar” and “element” all you like and it won’t tamper with the closures. So far it’s been working for me.

It still kind of sucks to have to do that for every event handler, but it does keep the majority of my code out of the constructor. It’s still not an actual solution, but it’s a step above what I was doing before. Thanks.

function Foo() {
var self = this;
var node = ...

Foo.prototype.handleClick = function(event) {
...
}

Also, look into the call() and apply() methods on function objects, they’re handy.