<p>I'm having some trouble with plain old JavaScript (no frameworks) in referencing my object in a callback function.</p>

<pre><code>function foo(id) {
    this.dom = document.getElementById(id);
    this.bar = 5;
    var self = this;
    this.dom.addEventListener("click", self.onclick, false);
}

foo.prototype = {
    onclick : function() {
        this.bar = 7;
    }
};
</code></pre>

<p>Now when I create a new object (after the DOM has loaded, with a span#test)</p>

<pre><code>var x = new foo('test');
</code></pre>

<p>The 'this' inside the onclick function points to the span#test and not the foo object.</p>

<p>How do I get a reference to my foo object inside the onclick function?</p>

```
```
this.dom.addEventListener("click", function(event) {
    self.onclick(event)
}, false);
```
```