不能使用删除事件侦听器

cant use remove Event Listener

本文关键字:事件 侦听器 删除 不能      更新时间:2024-07-04
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 让他们能够点击,但现在我想删除事件列表器,但不知何故我无法让它工作,我遇到了错误。

错误

Uncaught TypeError: element.removeEventListener is not a function 

如何解决这个问题? 它们都是图像。

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

您还需要定义handler

请注意,您无法删除在第一个代码块中使用addEventListener附加的处理程序,因为要删除处理程序,您必须提供与提供给removeEventListener addEventListener相同的函数引用,并且您没有该引用,因为您将函数表达式直接传递到addEventListener中。

您需要将该引用保留在某个位置(例如,变量或属性(,以便稍后使用它来删除处理程序。

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

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

还要注意 @T.J. Crowder 在他的答案的第二个块中所说的关于删除完全相同的函数引用的处理程序。