Object oriented event handling in Javascript

I've been playing a lot lately with XMLHttpRequest. As a part of one of my tasks, I set out to build an object oriented javascript component which provided a plug in functionality for a HTML element. Specifically I set out to build a decorator (in design pattern parlance).

I ran into a problem which foxed me for some time until I dig up some old posts in the comp.lang.javascript google group. The problem was something like this:

Suppose you create a javascript custom class which takes a UI element and attaches some event handler to it. That event handler is one of the methods of our class. Now the problem was that I was unable to access any of my class's attributes from that event handler function. Every time I tried using the this object to access a attribute, I was getting an undefined value. After some experimentation I found out that within the event handler function this refers to the UI element on which the event was attached. So inside that event handler, we don't have a handle to the current object of the class.

function MyDecorator(sourceElement) {
    this.sourceElement = sourceElement;
    this.someOtherAttribute = 192123123;
    
    this.sourceElement.onmouseover = function() {
        //do Something with the class's someOtherAttribute.
        alert(this.someOtherAttribute);     //This does not work
    }
}

One way out of this problem was a dirty hack. Maintain a global variable to hold the current object. But that can only work when there's only instance of the decorator in the page. The second way was to let the javascript in the page handle the event and pass it on the appropriate decorator object.

But in both of the cases the self-contained nature (or encapsulation) of the object-oriented approach is destroyed. This problem surfaced again when I was writing a javascript class to fetch some data from XMLHttpRequest and process it's response inside the class. In this case you can't implement the second approach outlined above and keeping a global reference to the current object seems the only way to go about it. Or else I can keep aside the object oriented stuff and go about it in a function based approach.

technorati tags:javascript, event-handling, object-oriented

Blogged with Flock