Removing same event from listener
Consider using dependency injection


What that means is "injecting" what you want to manipulate into your class (instead of relying on "global" variable), for example:

let a = 42;
function manipulateA () {
    return a = a + 24;
}
console.log(manipulateA(), a); // 66, 66


versus:

let a = 42;
function manipulate (a) {
    return a = a + 24;
}
console.log(manipulate(a), a); // 66, 42


This allows for much easier to test code, and you know exactly what will happen with everything instead of relying on something to magically happen in the global scope.



Consider this instead (using es6 and dependency injection):



class MoveOver {
  // dependency injection
  constructor ({element = document.body}) {
    this.element = element;
    this.index = 0;
  }
  
  startListening () {
    const mouseMove = () =&gt; {
      this.element.textContent = `mouseMove_${this.index++}`;
    }
    this.element.addEventListener('mousedown', () =&gt; {
      console.log('mouseDown');
      this.element.addEventListener('mousemove', mouseMove, false);
    }, false);
    window.addEventListener('mouseup', () =&gt; {
      console.log('mouseUp');
      this.element.removeEventListener('mousemove', mouseMove, false);
    }, false);
  }
}

const move1 = new MoveOver({element: document.getElementById('mouse')});
const move2 = new MoveOver({element: document.getElementById('mouse2')});

move1.startListening();
move2.startListening();
.cover {
  height: 200px; width: 200px;
  border: red solid 1px;
  float: left; margin: 15px;
}
&lt;div id="mouse" class="cover"&gt;&lt;/div&gt;
&lt;div id="mouse2" class="cover"&gt;&lt;/div&gt;




In the above example we are able to add the same events to two (2) different elements, but yet still yield the same results for both