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的人写这个答案。而这个线程首先出现在Google中，是“ js replace event listener”。虽然，我不同意，不同意使用removeEventListener()的答案，但是mozilla warns 认为该功能不是永远成功。因此，请护理使用它。不愿意走那条路，我发现了另外两种方法。

使用类似 GlobalEventHandlers 之类的东西，简称为 target.onclick = functionRef; 。 Mozilla even warns：

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

在监听器中功能将外部函数调用添加到 action 函数，然后将 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个小时的时间。如果我首先有这个...

Answer 2

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

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

Javascript：替换事件监听器

2 个答案: