Question

我有一个removeEventListener的问题，它似乎根本没有用，我在这个网站上看到了其他一些问题，但是我没有得到它，你能帮帮我吗？ / p>

displayImg() {
    console.log('img')
    for (var i = 1; i <= 4; i++) {
      var line = "l"+i;
      var position = 0;
      var addDivLine = document.createElement('div');
      addDivLine.className = 'line';
      addDivLine.id = line;
      document.getElementById('container').appendChild(addDivLine);
      for (var j = 1; j <= 7; j++) {
        var block = "b"+j;
        var element = line+"-"+block;
        var addDivBlock = document.createElement('div');
        addDivBlock.className = 'block';
        addDivBlock.id = element;
        document.getElementById(line).appendChild(addDivBlock);
        memory.addEvent(element);
      };
    };

showImage(event) {
        event.preventDefault();
        memory.clickedBlock++;
        var block = event.target.id;
        memory.removeEvent(block);
}


addEvent(id){
    document.getElementById(id).addEventListener('click', function(){memory.showImage(event)});
  },
  removeEvent(id){
    console.log("remove");
    document.getElementById(id).removeEventListener('click', function(){memory.showImage(event)});
  },

我正在创建div元素，然后在它们上面放置一个eventListener，我调用相同的函数来删除事件，我使用相同的id，是否有我忘记的东西？我可能不完全理解它是如何运作的。非常感谢！

Answer 1

该函数看起来一样，但它的引用会有所不同。因此，在两个函数可用的范围内定义函数，并在两种情况下都使用引用。

var callback =  function(){memory.showImage(event)};

addEvent(id){
    document.getElementById(id).addEventListener('click', callback);
}

removeEvent(id){
   console.log("remove");
   document.getElementById(id).removeEventListener('click', callback);
}

Answer 2

在这两行中：

.addEventListener('click', function() { memory.showImage(event) });

和

.removeEventListener('click', function() { memory.showImage(event) });

function() { memory.showImage(event) }是两个不同的函数。在这两种情况下，您需要提供对相同函数的引用，以便绑定/取消绑定侦听器。保存它以便在两个地方使用一些变量：

.addEventListener('click', memory.showImage);
.removeEventListener('click', memory.showImage);

例如直接使用memory.showImage将正常工作，因为它在两种情况下都是相同的功能。

为什么我无法删除我的事件监听器？

2 个答案: