Using object method as event handler in javascript

irishdude11 · 06-08-2011 01:25PM #1

I have an object like so

function Foo() {
    var site = 'boards';
}

Foo.prototype.HandleClick = function(e) {
    alert(this.site); // Doesn't work
}

var foo = new Foo();

...
...
...
<a href='#' onClick='foo.HandleClick()'>Press me</a>

In the click handler, the variable 'this.site' is invalid because 'this' refers to the <a> anchor and not the Foo object. Is there a way around this or do I just have to set the click handler to a global function and call the object from that, like so -

function doClick(e) {
    foo.HandleClick(e);
}
<a href='#' onClick='doClick()'>Press me</a>

It just seems a bit messy to do it that way.

boblong · 06-08-2011 02:09PM

[HTML]
<html>
<script>
function Foo() {
this.site = 'boards';
}

Foo.prototype.HandleClick = function(e) {
alert(this.site); // Doesn't work
}

var foo = new Foo();
</script>

<a href='#' onClick='foo.HandleClick()'>Press me</a>
[/HTML]

FYI it's generally good practice to separate logic from presentation as a general rule. For example I might refactor the above as:

[HTML]
<html>

<a id="thelink" href='#'>Press me</a>

<script>
function Foo() {
this.site = 'boards';
}

Foo.prototype.HandleClick = function(e) {
alert(this.site); // Doesn't work
}

var foo = new Foo();

document.getElementById("thelink").addEventListener('click', function(thing) {
foo.HandleClick();
});

</script>
</html>

[/HTML]

Using object method as event handler in javascript

Comments