Question

我想覆盖已附加到事件的函数。像这样：

let orFn = () => {
  console.log('old');
};

buttonEl.addEventListener('click', orFn);

orFn = () => {
  console.log('new');
};

但是，当我单击按钮时，仍会调用旧功能。我已经看到了这个stackoverflow。我不能使用函数包装器。而且我想了解为什么这不起作用。

我的代码可在此处进行测试：jsfiddle。

Answer 1

一种方法是删除第一个侦听器，然后添加另一个侦听器

id, title, slug  
1, "title 1", "title-1"
2, "title 2", "title-2"
3, "title 3", "title-3"

id, name, title, slug
1, "abc", "title 1", "title-1"
2, "abcd", "title 2", "title-2"
3, "abcde", "title 3", "title-3"

另一种方法是拥有一个侦听器，该侦听器可以在内部调用不同的函数。示例：

let orFn = () => {
  console.log('old');
};

let orFnNew = () => {
  console.log('new');
};

var buttonEl = document.querySelector('button')

buttonEl.addEventListener('click', orFn);

// remove old listener
buttonEl.removeEventListener('click', orFn);

// add another one
buttonEl.addEventListener('click', orFnNew);

<button>button</button>

Answer 2

使用bind（）的一种方法。

const btn = document.getElementById('btn');

let orFn = () => {
  alert('old');
};

orFn = () => {
  alert('new');
};

orFn.bind(orFn)

btn.addEventListener('click', orFn);

这将与新功能绑定，并在警报弹出窗口中显示new。

覆盖已附加到事件的功能

2 个答案: