title: Javascript : Replace Event Listener
body: <p>I am listening to an event and want to call different methods. For example, I am listening to animation end event and the code is something like this:</p>
  
  <pre><code>this.inAnimationCallback = function() {
      console.log('In');
      _this.elem.className = _this.settings.className;
  };
  this.outAnimationCallback = function() {
      console.log('Out');
      _this.elem.parentNode.removeChild(_this.elem);
  };
  
  this.elem.addEventListener(animationEvent, this.inAnimationCallback);
  
  setTimeout(function() {
      _this.elem.addEventListener(animationEvent, _this.outAnimationCallback);
      // Call some animation here.
  }, 3000);
  </code></pre>
  
  <p>What happens here is that instead of replacing the method attached to the event, JS adds the method and when animation ends, both methods are called. Console looks like this:</p>
  
  <pre><code>(2) In
  Out
  </code></pre>