删除循环javascript内部的事件侦听器

我正在尝试删除已添加到我的

UL

中的事件侦听器；因此，侦听器函数仅在第一次单击时启动，然后将被清除

有没有办法用纯js做到这一点

 var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

    for (var i = 0; i < cardDeck.length; i++) {
      cardDeck[i].addEventListener('click', flip, false)
    }

    function flip(e) {
      if (e.target && e.target.nodeName == "LI") {
      var firstMove = document.getElementById(e.target.id)
      firstMove.classList.add('open', 'show')
        console.log(e.target.id + 'card was clicked');
      }
    }

var cardDeck=document.getElementById（'listDeck'）.getElementsByTagName（'li'））
对于（变量i=0；i

您可以绑定到

onclick

方法，而不是使用

addEventListener

。因此，执行单击后，只需将

onclick

设置为

null

：

var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

for (var i = 0; i < cardDeck.length; i++) {
  cardDeck[i].onclick = flip.bind(cardDeck[i])
}

function flip(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log(e.target.id + 'card was clicked');
    this.onclick = null;
  }
}

var cardDeck=document.getElementById（'listDeck'）.getElementsByTagName（'li'））
对于（变量i=0；i

您可以绑定到

onclick

方法，而不是使用

addEventListener

。因此，执行单击后，只需将

onclick

设置为

null

：

var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

for (var i = 0; i < cardDeck.length; i++) {
  cardDeck[i].onclick = flip.bind(cardDeck[i])
}

function flip(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log(e.target.id + 'card was clicked');
    this.onclick = null;
  }
}

var cardDeck=document.getElementById（'listDeck'）.getElementsByTagName（'li'））
对于（变量i=0；i

如果通过

addEventListener

添加了事件处理程序，则可以使用以下方法将其删除：

element.removeEventListener(event, function);

这允许您有选择地删除事件处理程序，而不删除可能已注册的任何其他处理程序

function flip(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id);
        firstMove.classList.add('open', 'show');
        console.log(e.target.id + 'card was clicked');
        e.currentarget.removeEventListener('click', flip);
    }
}

---

如果通过

addEventListener

添加了事件处理程序，则可以使用以下方法将其删除：

element.removeEventListener(event, function);

这允许您有选择地删除事件处理程序，而不删除可能已注册的任何其他处理程序

function flip(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id);
        firstMove.classList.add('open', 'show');
        console.log(e.target.id + 'card was clicked');
        e.currentarget.removeEventListener('click', flip);
    }
}

---

如果要在调用事件侦听器时删除它，可以在DOM元素上使用

removeEventListener

，如下所示：

var cardDeck=document.getElementById（'listDeck'）.getElementsByTagName（'li'））
对于（变量i=0；i}

如果要在调用事件侦听器时删除它，可以在DOM元素上使用

removeEventListener

，如下所示：

var cardDeck=document.getElementById（'listDeck'）.getElementsByTagName（'li'））
对于（变量i=0；i}

只需向事件侦听器添加{Once:true}选项即可。不需要为它编写代码。只需尝试这些

cardDeck[i].addEventListener('click', flip, {once:true} )

这是JSFIDLE

这个的参考链接

附言：

---

向每个元素添加evenListener的方式效率不高。如果可能的话，在你的用例中使用委托而不是冒泡。这里是fiddle for

只需在事件侦听器中添加{Once:true}选项。不需要为它编写代码。只需尝试这些

cardDeck[i].addEventListener('click', flip, {once:true} )

这是JSFIDLE

这个的参考链接

附言：

---

向每个元素添加evenListener的方式效率不高。如果可能的话，在你的用例中使用委托而不是冒泡。这里是fiddle for

刚刚尝试了一下。看起来多次单击仍会将新类添加到卡中。我们尝试了一下。看起来多次点击仍然会在卡片上添加新的类-是的，我想你是对的。这看起来像是因为我在每个列表元素中添加了一个单独的事件监听器——我没有得到单击一张卡并清除事件的预期效果。我将尝试将事件处理程序添加到父元素，并从检查委派链接开始。在电视上，兄弟！哇！多好的答案应该得到999k的提升-是的，我认为你是对的。这看起来像是因为我在每个列表元素中添加了一个单独的事件监听器——我没有得到单击一张卡并清除事件的预期效果。我将尝试将事件处理程序添加到父元素，并从检查委派链接开始。在电视上，兄弟！哇！什么样的答案应该让999k上升