Class events bind and unbind

Question

Everyhing works fine, except I can't figure out how to unbind the events in stop().

Code updated

class Resizable {
  go(drag_el, resize_el) {
    this.resize_el = resize_el;

    drag_el.addEventListener("mousedown", () => {
      window.addEventListener("mousemove", this.resize.bind(this));
      window.addEventListener("mouseup", () => {
        window.removeEventListener("mousemove", this.resize.bind(this));
        window.removeEventListener("mouseup", this.resize.bind(this));
      });
    });
  }

  resize(e) {
    this.resize_el.style.width = e.clientX - this.resize_el.offsetLeft + "px";
  }
}

A few notes

• I prefer to keep the class things inside the class, no additional var outside it.
• I accept ES5 and ES6 as well.
• I've read that I could do window.mousemove.bind(() => { // Code }); but I don't get that to work.

Answer 1

You can't remove listeners inside stop function because you don't know them references.

Mousemove event don't call resize function, it call anonymous function

e => {
  this.resize(resize_el, e);
}

You can save address of anonymous function in variable and use it for removing listener, like this

class Resizable {
  constructor() {
    this.mouseMoveHandler = (e) => {
      this.resize(resize_el, e);
    };

    this.mouseDownHandler = () => {
      window.addEventListener("mousemove", this.mouseMoveHandler);
    }

    this.mouseUpHandler = () => {
      window.removeEventListener("mousemove", this.mouseMoveHandler);
    }
  }

  go(drag_el, resize_el) {
    drag_el.addEventListener("mousedown", this.mouseDownHandler);

    window.addEventListener("mouseup", this.mouseUpHandler);
  }

  resize(resize_el, e) {
    resize_el.style.width = e.clientX - resize_el.offsetLeft + "px";
  }

  stop() {
    window.removeEventListener("mousemove", this.mouseMoveHandler); // ?
    // most likely you would like remove listeners from this.go
  }
}

You can find more info in this article on Medium [removeEventListener() and anonymous function]

UPD (after question update):

.bind() create NEW function everytime, so you still can't remove event listener.

Check my fiddle here: https://jsfiddle.net/nvfcq80z/5/