删除附加到选择器的所有事件，立即添加新的事件

Question

$('.home')
  .unbind('click') 
  .attr('onclick', '') 
  .each(function() { 
    this.onclick = null;
  });

我已经发现了上面的jQuery的作品，但是我想在此之后立即添加一个新函数；最好是非jQuery或ES6 / ES7技术。

Answer 1

[unbind（不建议使用）或off将删除所有通过jQuery附加的侦听器，因此您可以在之后通过使用.on来添加另一个带有jQuery的侦听器：

$('.home')
  .off('click') // remove listeners attached via jQuery
  .attr('onclick', '') // remove listeners attached via inline attribute
  .each(function() {
    this.onclick = null; // remove listeners attached via assigning to onclick of element
  })
  .on('click', () => console.log('click'));

如果未通过jQuery添加侦听器，并且在添加函数时未保存对该函数的引用，则无法使用addEventListener将其删除。唯一的其他选择是完全删除该元素（尽管这也会删除该元素可能具有的任何其他非单击侦听器）。例如，如果通过以下方式附加了侦听器：

document.querySelector('.home').addEventListener('click', () => console.log('click'));
然后，之后将无法删除，除非您从DOM中完全删除了该元素，然后将其替换为其他元素。