ansaurus

Question

Class methods as event handlers in javascript?

Answer 1

+6 A:

ClickCounter = function(buttonId) {
    this._clickCount = 0;
    var that = this;
    document.getElementById(buttonId).onclick = function(){ that.buttonClicked() };
}

ClickCounter.prototype = {
    buttonClicked: function() {
        this._clickCount++;
        alert('the button was clicked ' + this._clickCount + ' times');
    }
}

pawel 2008-10-23 09:33:42

Thanks for your solution.I am also trying to understand the bigger picture - patterns, practices etc. Any good articles you know about?

JacobE 2008-10-23 09:36:58

this thing is great: http://ejohn.org/apps/learn/

pawel 2008-10-23 09:49:46

This is a good example, but this answer might be better with some explanation as to why it's a good solution, for the novices around here.

Sam Murray-Sutton 2008-12-05 14:31:27

+1 woot (I said woot!)

blu 2010-01-09 05:07:38

Answer 2

+1 A:

It's a scoping issue - functions aren't in any way bound to the object which contains them, so you need to set up your event handlers in such a way that they have the appropriate execution context object when they're executed.

http://www.digital-web.com/articles/scope_in_javascript/

This question has some answers which will be of interest to you:

http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal

insin 2008-10-23 09:51:13

Answer 3

+1 A:

A function attached directly to the onclick property will have the execution context's this property pointing at the element.

When you need to an element event to run against a specific instance of an object (a la a delegate in .NET) then you'll need a closure:-

function MyClass() {this.count = 0;}
MyClass.prototype.onclickHandler = function(target)
{
   // use target when you need values from the object that had the handler attached
   this.count++;
}
MyClass.prototype.attachOnclick = function(elem)
{
    var self = this;
    elem.onclick = function() {self.onclickHandler(this); }
    elem = null; //prevents memleak
}

var o = new MyClass();
o.attachOnclick(document.getElementById('divThing'))

AnthonyWJones 2008-10-23 10:05:05

ansaurus

tags:

views:

answers:

Class methods as event handlers in javascript?

related questions