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

Question

我正在尝试删除我添加到 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');
      }
    }

Answer 1

您可以绑定到 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;
  }
}

Answer 2

如果您通过 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);
    }
}

Answer 3

如果你想在事件监听器被调用时删除它，你可以在 DOM 元素上使用 removeEventListener 像这样：

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

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

    function flip(e) {
    //remove the event listener.
    this.removeEventListener("click",flip);
      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');
      }
    }

Answer 4

只需将 {Once :true} 选项添加到事件侦听器。无需为 it.Just 编写代码试试这些

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

这是jsfiddle link

对此参考link。Here

PS: 您将 evenListener 添加到每个元素的方式效率不高。如果可能的话，使用委托而不是冒泡来使用 case.Here 的 fiddle for delegation

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

removing event listener inside for loop javascript

html

javascript

event-listener