Javascript removeEventListener not working inside a class [duplicate]

by

Each time you call this.clicked.bind(this), it returns a new and different function. Thus, the function you are passing to addEventListener() is not the same as the function you are passing to removeEventListenter() so thus the remove does not find a match and does not remove anything. You must pass the exact same function to both for the remove to work.

You will have to create a locally stored reference to the function you’re using so that you can pass the same one to add and remove. There are a number of ways to do that, but since this is object oriented code, you will want to store the reference in the object itself so each object can have its own reference.

Here’s one way to do that:

'use strict'
class Mouser {
  constructor () {
    this.counter = 0
    this.clicked = function (event) {
      this.counter ++
      console.log('clicks:', this.counter)
      if (this.counter >= 10) this.remove()
    }
    // save the click handler so it can be used in multiple places
    this.clickHandler = this.clicked.bind(this);
    window.addEventListener('click', this.clickHandler)
  }

  remove () {
    console.log('Removing click listener') // this line runs ..
    window.removeEventListener('click', this.clickHandler)
  }
}

var mouse = new Mouser()

More Related Contents:

  1. window.onload vs $(document).ready()
  2. Detect Click into Iframe using JavaScript
  3. Prevent form submission on Enter key press
  4. ES6 class variable alternatives
  5. How does one capture a Mac’s command key via JavaScript?
  6. event.preventDefault() vs. return false (no jQuery)
  7. Is there a callback on completion of a CSS3 animation?
  8. Create an instance of a class in ES6 with a dynamic name? [duplicate]
  9. How to display a confirmation dialog when clicking an link?
  10. How do I know when I’ve stopped scrolling?
  11. Way to know if user clicked Cancel on a Javascript onbeforeunload Dialog?
  12. Javascript event e.which?
  13. What is the difference between class method vs. class field function vs. class field arrow function?
  14. Listener for property value changes in a Javascript object
  15. How do you detect the clearing of a “search” HTML5 input?
  16. How to check if any JavaScript event listeners/handlers attached to an element/document? [duplicate]
  17. How to tell which row number is clicked in a table?
  18. How to listen for changes to the title element?
  19. Wait for iframe to load in JavaScript
  20. How to catch enter keypress on textarea but not shift+enter? [duplicate]
  21. full-screen browser window on load document
  22. Re-associating an object with its class after deserialization in Node.js
  23. HTML5 drop event doesn’t work unless dragover is handled
  24. How to optimize website for touch devices
  25. Prevent click event from firing when dblclick event fires
  26. Use JavaScript to intercept all document link clicks
  27. How can I tell when a CSS background image has loaded? Is an event fired? [duplicate]
  28. How to execute code in a javascript append
  29. Any Javascript event occurring when user clicks Stop load button?
  30. Shrinking font-size at a user types to fit in an input using Javascript

Leave a Comment