Class methods as event handlers in JavaScript?

Question

Is there a best-practice or common way in JavaScript to have class members as event handlers?

Consider the following simple example:

<head>
    <script language="javascript" type="text/javascript">

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

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

    </script>
</head>
<body>
    <input type="button" id="btn1" value="Click me" />
    <script language="javascript" type="text/javascript">
        var btn1counter = new ClickCounter('btn1');
    </script>
</body>

The event handler buttonClicked gets called, but the _clickCount member is inaccessible, or this points to some other object.

Any good tips/articles/resources about this kind of problems?

pawel · Accepted Answer · 2018-05-29 09:27:16Z

49

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');
    }
}

EDIT almost 10 years later, with ES6, arrow functions and class properties

class ClickCounter  {
   count = 0;
   constructor( buttonId ){
      document.getElementById(buttonId)
          .addEventListener( "click", this.buttonClicked );
  }
   buttonClicked = e => {
     this.count += 1;
     console.log(`clicked ${this.count} times`);
   }
}

https://codepen.io/anon/pen/zaYvqq

edited May 29, 2018 at 9:27

answered Oct 23, 2008 at 9:33

pawel

37.1k7 gold badges59 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

JacobE Over a year ago

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

Sam Murray-Sutton Over a year ago

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.

Pointy Over a year ago

The ES2015 edit works via Babel but the public field syntax is not allowed in all browsers yet (even now in 2019).

user10469346 Over a year ago

didn't quite work in my application. The underlying class is built by a factory, which also sets the event listener. The 'this' variable when the event fires is then that of the factory. Trying to figure out how addEventListener knows what 'this' is to be used when the event handler is called ..

user10469346 Over a year ago

changed the handler method from clicked(){ ...} to clicked = () => {...} and it works. Because anonymous functions use 'this' differently I gather?

|

JimmyB · Accepted Answer · 2019-10-17 10:13:01Z

17

I don't know why Function.prototype.bind wasn't mentioned here yet. So I'll just leave this here ;)

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

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

edited Oct 17, 2019 at 10:13

JimmyB

12.8k2 gold badges33 silver badges47 bronze badges

answered Mar 19, 2016 at 13:00

kucherenkovova

7349 silver badges22 bronze badges

4 Comments

Michael IV Over a year ago

Indeed clean and simple solution! +1

Fabio Delarias Over a year ago

this doesn't work. "this.buttonClicked is undefined"

kucherenkovova Over a year ago

@FabioDelarias it should work, please check the example. codepen.io/anon/pen/QzwRKE?editors=1010

JimmyB Over a year ago

Great solution, and probably the way it's actually supposed to be done.

AnthonyWJones · Accepted Answer · 2008-10-23 10:05:05Z

9

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'))

answered Oct 23, 2008 at 10:05

AnthonyWJones

190k35 gold badges236 silver badges307 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:46:27Z

5

You can use fat-arrow syntax, which binds to the lexical scope of the function

function doIt() {
  this.f = () => {
    console.log("f called ok");
    this.g();
  }
  this.g = () => {
    console.log("g called ok");
  }
}

After that you can try

var n = new doIt();
setTimeout(n.f,1000);

You can try it on babel or if your browser supports ES6 on jsFiddle.

Unfortunately the ES6 Class -syntax does not seem to allow creating function lexically binded to this. I personally think it might as well do that. EDIT: There seems to be experimental ES7 feature to allow it.

edited May 23, 2017 at 11:46

CommunityBot

11 silver badge

answered Mar 19, 2016 at 16:22

Tero Tolonen

4,2744 gold badges29 silver badges33 bronze badges

Comments

Herman Van Der Blom · Accepted Answer · 2021-01-08 16:55:05Z

2

I like to use unnamed functions, just implemented a navigation Class which handles this correctly:

this.navToggle.addEventListener('click', () => this.toggleNav() );

then this.toggleNav() can be just a function in the Class.

I know I used to call a named function but it can be any code you put in between like this :

this.navToggle.addEventListener('click', () => { [any code] } );

Because of the arrow you pass the this instance and can use it there.

Pawel had a little different convention but I think its better to use functions because the naming conventions for Classes and Methods in it is the way to go :-)

answered Jan 8, 2021 at 16:55

Herman Van Der Blom

84211 silver badges22 bronze badges

Collectives™ on Stack Overflow

Class methods as event handlers in JavaScript?

5 Answers 5

6 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related