ES6 Class: access to ‘this’ with ‘addEventListener’ applied on method [duplicate]

by

This is a general JS issue, but the core of it is that

this.elm.addEventListener('click', this.sayHello);

is no different than

var fn = this.sayHello;
this.elm.addEventListener('click', fn);

You are passing a function as the event handler, but have not ensured that when fn is called that this will be set to your desired value. The easiest way to do this in ES5 would be

this.elm.addEventListener('click', this.sayHello.bind(this));

or in ES6, using an arrow function:

this.elm.addEventListener('click', evt => this.sayHello(evt));

Note however that both of these solutions will break your (already slightly broken) logic in kill because

this.elm.removeEventListener('click', /* what? */);

You don’t have any reference to the function that you attached anymore, so you have no way of removing the event handler.

I’d suggest two options:

// Create a new function that is bound, and give it a new name
// so that the 'this.sayHello()' call still works.
this.boundSayHello = evt => this.sayHello(evt);
this.elm.addEventListener('click', this.boundSayHello);
this.elm.removeEventListener('click', this.boundSayHello);

or

// Bind the function with the same name and use `.bind` instead of the
// arrow function option.
this.sayHello = this.sayHello.bind(this);
this.elm.addEventListener('click', this.sayHello);
this.elm.removeEventListener('click', this.sayHello);

More Related Contents:

  1. How to make JavaScript execute after page load?
  2. onKeyPress Vs. onKeyUp and onKeyDown
  3. Firing event on DOM attribute change
  4. Event when window.location.href changes
  5. Why is the DOMSubtreeModified event deprecated in DOM level 3?
  6. Manipulating innerHTML removes the event handler of a child element? [duplicate]
  7. How do I programmatically click on an element in JavaScript?
  8. Adding an onclick event to a table row
  9. Pass mouse events through absolutely-positioned element
  10. Unable to understand useCapture parameter in addEventListener
  11. Using this inside an event handler
  12. Change ‘s option and trigger events with JavaScript
  13. Native JS equivalent to jQuery delegation
  14. Are event handlers in JavaScript called in order?
  15. HTML DOM: Which events do not bubble?
  16. Do I need to remove event listeners before removing elements?
  17. link element onload
  18. Wait for iframe to load in JavaScript
  19. event.toElement in IE8 and Firefox?
  20. cloning javascript event object
  21. Is there any way of passing additional data via custom events?
  22. How browser executes Javascript and renders asynchronously
  23. In web browsers, what’s the difference between onblur and onfocusout?
  24. Replacement for deprecated `keypress` DOM event
  25. Manually dispatchEvent DOMContentLoaded
  26. When does reflow happen in a DOM environment?
  27. ES6 template literals vs. concatenated strings
  28. How to destructure an object to an already defined variable? [duplicate]
  29. this value in JavaScript anonymous function
  30. How do I pass the this context into an event handler?

Leave a Comment