How adding event handler inside a class with a class-method as the callback?

by

The this inside the event listener callback will be the element that fired the event. If you want the this to be the instance of your class, then either:

Bind the function to the class instance:

Using Function.prototype.bind, will create a new function that its this value will always be what you specify it to be (the class instance):

r.addEventListener('mouseover', this.OnEvent.bind(this));
//                                          ^^^^^^^^^^^

Wrap the function inside an anonymous function:

var that = this;
r.addEventListener('mouseover', function(ev) { that.OnEvent(ev); });
//                              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

or use an arrow function (so no need for that):

r.addEventListener('mouseover', ev => this.OnEvent(ev));
//                              ^^^^^^^^^^^^^^^^^^^^^^

Note: As mentioned in a comment bellow, both of the above methods pass a different function to addEventListener (the one with bind create a new function, and the anounimous function is obviously !== this.OnEvent). If you are going to remove the event listener later, you’ll have to store a reference to the function:

var reference;
r.addEventListener('mouseover', reference = this.OnEvent.bind(this));
//                              ^^^^^^^^^^^^

or:

var reference;
var that = this;
r.addEventListener('mouseover', reference = function(ev) { that.OnEvent(ev); });
//                              ^^^^^^^^^^^^

then you can remove the event listener like:

r.removeEventListener('mouseover', reference);

More Related Contents:

  1. Preserve ‘this’ reference in javascript prototype event handler [duplicate]
  2. Null error is coming in javascript
  3. onclick=”” vs event handler
  4. Use of .apply() with ‘new’ operator. Is this possible?
  5. Organize prototype javascript while perserving object reference and inheritance
  6. Constructor function vs Factory functions
  7. Defining a Javascript prototype
  8. Is it possible to get the non-enumerable inherited property names of an object?
  9. How does the new operator work in JavaScript?
  10. How do I make JavaScript Object using a variable String to define the class name?
  11. How can I be notified when an element is added to the page?
  12. What is “undefined x 1” in JavaScript?
  13. How can I capture the right-click event in JavaScript? [duplicate]
  14. How can I trigger an onchange event manually? [duplicate]
  15. What techniques can be used to define a class in JavaScript, and what are their trade-offs?
  16. Does JavaScript have the interface type (such as Java’s ‘interface’)?
  17. Clone Object without reference javascript [duplicate]
  18. How to inherit from a class in javascript?
  19. Capture click on div surrounding an iframe
  20. No ways to have class-based objects in javascript?
  21. Are event handlers in JavaScript called in order?
  22. Implementing jQuery’s “live” binder with native Javascript
  23. JavaScript Extending Class
  24. In Javascript, what does this underscore mean?
  25. Classical Vs prototypal inheritance
  26. Is event a global variable that is accessible everywhere inside the callback chain?
  27. Is John Resig’s Javascript inheritance snippet deprecated?
  28. submit event does not fire if submit initiated programmatically
  29. How do I create an abstract base class in JavaScript?
  30. button onclick function firing twice

Leave a Comment