Javascript：替换事件侦听器

Question

我正在听一个事件并想调用不同的方法。例如，我正在听动画结束事件，代码是这样的：

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);

这里发生的事情是，JS 不是替换附加到事件的方法，而是添加方法，当动画结束时，两个方法都被调用。控制台看起来像这样：

(2) In
Out

Answer 1

我正在为像我这样刚开始学习 JS 的人写这个答案。这个线程首先出现在谷歌“js替换事件侦听器”中。虽然，我并不反对使用的答案removeEventListener()，但mozilla警告说这个功能并不总是成功。所以请谨慎使用。不愿意走那条路，我找到了另外两种方法。

1. 使用像GlobalEventHandlers 这样简单的东西target.onclick = functionRef;。Mozilla 甚至警告说：

   一次只能将一个 onclick 处理程序分配给一个对象。

2. 在侦听器函数中添加外部函数调用到动作函数，然后替换对另一个外部动作函数的引用。例如，此代码将调用, then , then first again...:firstAction()seconAction()

       const buttonOne = document.getElementById('buttonOne');
       buttonOne.addEventListener('click', listenerFunction);
   
       let doAction = firstAction; //assigning doAction to firstAction
   
       function listenerFunction() {
           doAction(); //external function call
       }
       function firstAction() {
           doAction = secondAction; //assigning doAction to secondAction
           console.log('first action clicked');
       }
       function secondAction() {
           doAction = firstAction; //assigning doAction to firstAction
           console.log('second action clicked');
       }

       <button type="button" id="buttonOne" name="button">button1</button>

我写了这个答案来扩大解决方案的范围：至少可以节省 6 个小时的时间。如果我一开始就有这个......