Javascript 删除重复的事件侦听器

我一直在试图找到一种删除事件侦听器的方法。我制作了一个函数，将向按钮添加事件侦听器，但如果该函数再次运行，我希望删除并再次添加事件侦听器。但是它只会添加另一个事件监听器，当我点击按钮时，它会运行事件监听器函数两次。或者，即使我可以阻止它在按钮中添加第二个事件侦听器，也会起作用

这是密码

我的按钮
myFunction（）
myFunction（）
函数myFunction（）{
var el=document.getElementById（'myId'））
var listenerFn=函数（）{
console.log（“我的消息”）
}
el.removeEventListener（'click'，listenerFn）
el.addEventListener（'click'，listenerFn）
}

我的按钮
myFunction（）
myFunction（）
函数listenerFn（）{
console.log（“我的消息”）
}
函数myFunction（）{
var el=document.getElementById（'myId'））
el.removeEventListener（'click'，listenerFn）
el.addEventListener（'click'，listenerFn）
}

使用事件侦听器时，我喜欢将它们存储在对象中，以便跟踪已注册的内容，并在必要时轻松删除它们

在您的情况下，将在全局范围中创建一个简单的布尔值，以检查是否需要删除侦听器。（添加侦听器后设置为true）

如果希望允许将多个事件附加到侦听器，则不能使用匿名函数，因为您希望确保不会两次添加同一函数

var listener = {};
var el = document.getElementById('myId');

...

var eventHandler1 = function() {
  console.log('eventHandler1');
};
var eventHandler2 = function() {
  console.log('eventHandler2');
};
//Check if a click listener exists for el that uses eventHandler1
if (listener[el] && listener[el].click && listener[el].click.includes(eventHandler1)) {
  //Remove listener with eventHandler1
  el.removeEventListener('click', listener[el].click.filter(function(val) {
    return val === eventHandler1;
  }));
}
listener[el] = listener[el] || {}; //If listener[el] does not exist, create it
listener[el].click = listener[el].click || [];
listener[el].click.push(eventHandler1);
el.addEventListener('click', eventHandler1);

---

在JS中，函数是对象类型，这意味着它们是引用类型。我的意思是每次运行

myFunction

function myFunction() {
     var el         = document.getElementById('myId'),
         listenerFn = function () {
                        console.log('My Message')
                      };

     el.removeEventListener('click', listenerFn)
     el.addEventListener('click', listenerFn)
}

您可以创建一个单独的

listenerFn

因此

removeEventLister（）

可以区分它们，因为

removeEventLister（）

的参数必须引用以前设置的事件侦听器函数

你应该这样做

我的按钮
函数listenerFn（）{
console.log（“我的消息”）
}
函数myFunction（）{
var el=document.getElementById（'myId'））
el.removeEventListener（'click'，listenerFn）
el.addEventListener（'click'，listenerFn）
}
myFunction（）；

您的代码确实有效，但当函数是动态的时就不行了，这是我在第一篇文章中应该提到的。阅读我的更新以了解以上内容。您需要保存对处理程序函数的引用才能删除它。试试这段代码，我只在myFunction My Button var RemovelListener=false的外侧定义了listenerFn变量；变种李斯特菌fn；myFunction（）myFunction（）函数myFunction（）{var el=document.getElementById（'myId'）el.removeEventListener（'click'，listenerFn）；listenerFn=函数（）{console.log（'My Message'）}el.addEventListener（'click'，listenerFn，false）；}

<button id="myId">My Button</button>



<script>
var listeners = {};

myFunctionA();
myFunctionA();



function myFunctionA() {
    var listenerFn1 = function() { //These functions need to be distinct so that we can refer to them when removing
        console.log('My Message 1')
    };

    var listenerFn2 = function() { //We actually didn't need to move these out from where they were, but its a little easier to read this way
        console.log('My Message 2')
    };

    function myFunctionB() {
        if (el.innerHTML === 'My Button') {
            if (listeners[el]) el.removeEventListener('click', listeners[el]);
            el.addEventListener('click', listenerFn1);
            listeners[el] = listenerFn1; //This could be expanded to account for different events, but keeping it simple for this scenario
        }
        else {
            if (listeners[el]) el.removeEventListener('click', listeners[el]);
            el.addEventListener('click', listenerFn2);
            listeners[el] = listenerFn2;
        }
    }

    var el = document.getElementById('myId');
    myFunctionB();
}
</script>

var listener = {};
var el = document.getElementById('myId');

...

//Check if a click listener exists for el
if (listener[el] && listener[el].click) {
  //Remove currently registered listener
  el.removeEventListener('click', listener[el].click);
}
listener[el] = listener[el] || {}; //If listener[el] does not exist, create it
listener[el].click = function() {
  //We can use an anonymous function in this case because we do not need to compare it to any other functions
  console.log('Click 1');
};
el.addEventListener('click', listener[el].click);

var listener = {};
var el = document.getElementById('myId');

...

var eventHandler1 = function() {
  console.log('eventHandler1');
};
var eventHandler2 = function() {
  console.log('eventHandler2');
};
//Check if a click listener exists for el that uses eventHandler1
if (listener[el] && listener[el].click && listener[el].click.includes(eventHandler1)) {
  //Remove listener with eventHandler1
  el.removeEventListener('click', listener[el].click.filter(function(val) {
    return val === eventHandler1;
  }));
}
listener[el] = listener[el] || {}; //If listener[el] does not exist, create it
listener[el].click = listener[el].click || [];
listener[el].click.push(eventHandler1);
el.addEventListener('click', eventHandler1);

function myFunction() {
     var el         = document.getElementById('myId'),
         listenerFn = function () {
                        console.log('My Message')
                      };

     el.removeEventListener('click', listenerFn)
     el.addEventListener('click', listenerFn)
}