Question

i hope anybody can help me =)

I try to keep the example simple:

function myClass(){
//some Code
}

myClass.prototype.func1 = function(){
//some Code
}

myClass.prototype.func2 = function(){
   document.getElementById("myEl").onclick = function(){
      this.func1 //does not work, this is only the Element...
   }
}

How does it works to call func1? I want to bind the onclick-event in func2.

Answer 1

First, you have to keep a reference to the current object. As you already noticed, inside the event handler, this refers to the DOM element. You can do this with

var self = this;

Second, you have to actually call the function:

self.func1();

Complete example:

myClass.prototype.func2 = function(){
   var self = this;
   document.getElementById("myEl").onclick = function(){
      self.func1();
   };
}

---

In the newer browsers you can also use .bind() ^[MDN] to explicitly define what this should refer to (see the MDN docs for a shim for other browsers):

document.getElementById("myEl").onclick = this.func1.bind(this);