Question

I first obtain an element:

var i=document.getElementsByTagName("fieldset");

Then I create a new object:

var a=new Fieldset(i[0]);

The function prototype is this:

slideDown: function() {  
    alert("here");  
} 

The constructor function is this:

function Fieldset(fieldset){  
    this.fieldset=fieldset;
    this.fieldset.addEventListener("click",this.slideDown(this.fieldset),false);  
}; 

The problem is that the slideDown function is called immediately when the new object is created and the listener is not attached to the element.

I’ve done the code with and without the this in front of fieldset in the constructor for the listener to no avail. I just don’t know where I’m fumbling this.

Answer 1

Well, in this expression

this.fieldset.addEventListener("click",this.slideDown(this.fieldset),false);

slideDown() is called before addEventListener() since arguments are evaluated before the function is called.

You probably mean to pass a function object as second argument rather than passing a value returned by slideDown() (which doesn’t return anything anyway). You can construct such a function object this way:

function Fieldset(fieldset){
  this.fieldset=fieldset;
  var self = this; // stash "this" for use inside listener below.
  var listener = function() {
    self.slideDown(fieldset);
  };
  this.fieldset.addEventListener("click", listener, false);
};

We use variable self to store the value of this. Note that this is not available inside listener anymore.