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

您可以在添加新事件侦听器之前删除事件侦听器：

setTimeout(function() {
    _this.elem.removeEventListener(animationEvent, _this.inAnimationCallback);
    _this.elem.addEventListener(animationEvent, _this.outAnimationCallback);
    // Call some animation here.
}, 3000);

Answer 2

我写这个答案是为了像我这样刚开始学习 JS 的人。这个线程首先出现在 google 中“js 替换事件侦听器”.. 虽然，我不不同意使用 removeEventListener() 的答案，但是 mozilla warns 这个功能是 not 总是成功的。所以请小心使用它。不愿意走那条路我找到了另外两种方法。

使用类似 GlobalEventHandlers which is simple as target.onclick = functionRef;. Mozilla even warns:

Only one onclick handler can be assigned to an object at a time.

Within listener function add external function call to action function ，然后将 reference 替换为 另一个外部操作 函数。例如，此代码将调用 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 个小时的时间。如果我一开始就有这个...

Javascript : 替换事件侦听器

Javascript : Replace Event Listener

javascript

event-handling