Question

function attachEvent(element, event, callbackFunction) {
  if(element.addEventListener)  {
    element.addEventListener(event, function(){
      removeArray();
      callbackFunction(this.getAttribute("src"));
    }, false);
  }
}


function removeEvent(){
  var element = document.querySelectorAll('.Dicon');
  element.removeEventListener("click", handler);
  console.log("remove");
}

我有一些图像，类叫 Dicon ，我使用addEventlistner给他们点击的能力，但现在我想删除eventlistner，但不知怎的，我不能让它工作，我得到了错误。

错误

Uncaught TypeError: element.removeEventListener is not a function

我该如何解决这个问题？他们都是形象。

Answer 1

querySelectorAll会返回集合，而不是单个元素。如果您只想获得第一个匹配元素，请使用querySelector（无All）。否则，您将索引到集合中（例如，第一个匹配元素为[0]，第二个匹配元素为[1]），使用length知道有多少。

您还需要定义handler。

请注意，您无法删除您在第一个代码块中使用addEventListener附加的处理程序，因为要删除处理程序，您必须提供您提供给removeEventListener的相同 功能参考至addEventListener，但您没有参考因为您直接将函数表达式传递给addEventListener。

您需要在某处保留该引用（例如，变量或属性），以便稍后使用它来删除处理程序。

Answer 2

document.querySelectorAll()返回一个htmlCollection，因此您需要遍历项目以从每个项目中删除侦听器：

var element = document.querySelectorAll('.Dicon');
Array.prototype.forEach.call(element, function(el) {
    el.removeEventListener("click", handler);
});

还要注意关于删除处理程序的@T.J. Crowder states in his answer's第二个块，以获得完全相同的函数引用。

无法使用删除事件监听器

2 个答案: