I have a myDiv.mousedown, window.mousemove, and window.mouseup event. I'm trying to organize my code, and have it clean. So I created a function and returned the 3 event handlers.The mousedown event adds a mousemove event, and the mouseup event removes the mousemove event.Since I need to pass the exact same object to removeEventListener() as the one I used with addEventListener(), I have to create a variable for each event handler.This doesn't seem to be organized and clean. Does this follow common practice? If not what is the 'correct', organized and clean code to perform that?JSFiddlevar myDiv = document.getElementById('myDiv');var VeryUsefullClass = (function() {  function VeryUsefullClass(parentElem, options) {    var _this = this;    _this.index = 0;    _this.mouseDownHandler = _this.mouseHandler().mouseDown;    _this.mouseMoveHandler = _this.mouseHandler().mouseMove;    _this.mouseUpHandler = _this.mouseHandler().mouseUp;    myDiv.addEventListener('mousedown', _this.mouseDownHandler);    window.addEventListener('mouseup', _this.mouseUpHandler);  }  VeryUsefullClass.prototype.mouseHandler = function() {    var _this = this;    var obj = {      mouseDown: function(e) {        console.log('mouseDown');        window.addEventListener('mousemove', _this.mouseMoveHandler);      },      mouseMove: function(e) {        myDiv.innerHTML = 'mouseMove ' + _this.index++;      },      mouseUp: function(e) {        console.log('mouseUp');        _this.index = 0;        window.removeEventListener('mousemove', _this.mouseMoveHandler);      }    }    return obj;  }  return VeryUsefullClass;})();console.clear();var hello = new VeryUsefullClass();#myDiv {  position: absolute;  background-color: orange;  width: 200px;  height: 100px;}<div id=myDiv></div>
Removing same event from listener
javascript;event handling;observer pattern