adding event inside a object constructor

[xend]

Hi.

I want to add an event handler inside a function that will be used has an object constructor. The event handler to be added is an "method" of the object.

if i do this:

function Someobj(element) {
 this.num = 1;
 this.inc = function() {
  ++this.num;
 }
 this.element = element;
 element.addEventListener('click', function(event) { this.inc(); }, false);
}
var so1 = new Someobj(document.getElementById('Photo1'));
var so2 = new Someobj(document.getElementById('Photo2'));
 

This gives an exception. The problem is then the event listener is called the "this" reference is no longer the object but it is the html element that generated the event.

if i declare a local var to store the this reference so the function in the event handler can find the correct object, something like this:

function Someobj(element) {
 var me = this;
 this.num = 1;
 this.inc = function() {
  ++this.num;
 }
 this.element = element;
 element.addEventListener('click', function(event) { me.inc(); }, false);
}
var so1 = new Someobj(document.getElementById('Photo1'));
var so2 = new Someobj(document.getElementById('Photo2'));
 

this will not work either because the "me" reference is always set to the last object that was created an not the object that registered the event.

How do i solve this?
Any ideas???

[rnd me]

a little bit of this and that goes a long way.

 
function Someobj(element) {
 var that = this;
 this.num = 1;
 this.inc = function() {
  ++this.num;
 }
 this.element = element;
 element.addEventListener('click', function(event) { that.inc(); }, false);
}

that will bring closure to the matter.

[xend]

a little bit of this and that goes a long way.

 
function Someobj(element) {
 var that = this;
 this.num = 1;
 this.inc = function() {
  ++this.num;
 }
 this.element = element;
 element.addEventListener('click', function(event) { that.inc(); }, false);
}

that will bring closure to the matter.

I thought that if it was that way the variable "that" would behave like a static variable for the constructor function. But i tested it and it works.

Thank you.

[rnd me]

yes, it does work.

that's the magic of closure: variables inside of functions are preserved, even after that function returns. sub-functions defined inside the constructor have full access to variables defined in the constructor.

[gits]

yes that's a really nice and useful feature of javascript ... just a short snippet that shows how you may use it:

function OBJ(param) {
    // a private variable = only
    // accessible in the constructor
    var foo = 'bar';
 
    // a public variable accessible 
    // from everywhere as an instance-
    // variable 
    this.foobar = 'barfoo';
 
    // a privileged method that returns
    // you the value of the private var
    // foo
    this.get_foo = function() {
        return foo;
    };
 
    // a privileged method that returns
    // you the value of param that was
    // passed to the constructor
    this.get_param = function() {
        return param;
    };
}
 
var o = new OBJ('my_foo');
 
// alerting the value of the instance-var
alert(o.foobar);
 
// trying to alert the val of the private var foo
alert(o.foo);
 
// using the privileged getters
alert(o.get_foo());
alert(o.get_param());
 

kind regards