Thoughts about technology, business and all that's life.

This blog has moved to

Wednesday, August 09, 2006

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:, ,

Blogged with Flock


Anonymous said...

Hey there, did you ever find a viable OOP solution to this problem? I am running into the same situation now.

Shalin Shekhar Mangar said...

I found an approach that I was comfortable with. Basically it uses Javascript closures to achieve the effect we want. See for details

MiDU said...


I know this post is old, but as you poped in the first google results when I looked for the very same problem, I thought it might help if I posted my solution of the problem (and I am not a big fan of your solution).

I hope it will be useful.

About Me

My photo
Committer on Apache Solr. Principal Software Engineer at AOL.

Twitter Updates

    follow me on Twitter

    Recently shared stories

    Recent questions on Apache Solr

    Recent development in Apache Solr