在纯javascript中的输入上删除事件侦听器[重复]答案

【问题标题】：remove event listener on a input in pure javascript [duplicate]在纯javascript中的输入上删除事件侦听器[重复]
【发布时间】：2017-05-03 05:09:21
【问题描述】：

我通过使用 ID 在输入框中附加事件侦听器。所以它工作正常，但我想删除事件监听器，它对我不起作用。

document.getElementById("myInput").addEventListener("keyup", function({
    console.log(document.getElementById("myInput").value);
});


  document.getElementById("myInput").removeEventListener("keyup",function() {

});

【问题讨论】：

一个命名函数将在这里为您提供帮助..！

标签： javascript html

【解决方案1】：

第二个参数需要是您要删除的事件侦听器（因此您需要保留对该函数的引用，而不是将函数表达式直接作为addEventListener 的参数）。

您正在向它传递一个全新的功能。它没有被删除，因为该函数一开始就没有监听。

var in = document.getElementById("myInput");

function myListener (event) {
    console.log(in.value);
}

in.addEventListener("keyup", myListener);
in.removeEventListener("keyup", myListener);

【讨论】：

【解决方案2】：

试试看

var fn = function({
    console.log(document.getElementById("myInput").value);
}

document.getElementById("myInput").addEventListener("keyup", fn);
document.getElementById("myInput").removeEventListener("keyup", fn);

【讨论】：

【解决方案3】：

var body =
        document.querySelector('body'),
    clickTarget =
        document.getElementById('click-target'),
    mouseOverTarget =
        document.getElementById('mouse-over-target'),
    toggle = false;

function makeBackgroundYellow() {
    'use strict';

    if (toggle) {
        body.style.backgroundColor = 'white';
    } else {
        body.style.backgroundColor = 'yellow';
    }

    toggle = !toggle;
}

clickTarget.addEventListener('click',
    makeBackgroundYellow,
    false
);

mouseOverTarget.addEventListener('mouseover', function () {
    'use strict';

    clickTarget.removeEventListener('click',
        makeBackgroundYellow,
        false
    );
});


target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

第二个参数是你要移除的事件监听器，见this

【讨论】：

你的回答很好，但对于一个小问题来说有点大。添加一个额外的“快速回答部分”，用 2-3 行解释解决方案
感谢您的建议！