javascript - 覆盖已经附加到事件的函数

Question

我想覆盖已经附加到事件的函数。像那样:

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

buttonEl.addEventListener('click', orFn);

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

但是，当我点击按钮时，旧函数仍然被调用。我看过这个 stackoverflow 。我不能在我的案例中使用函数包装器。我想了解为什么这不起作用。

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

Answer 1

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

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>

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

// button
const buttonEl = document.querySelector('button')

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

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

// function that will be called
let functionToCall = orFn;

buttonEl.addEventListener('click', (event) => { // single listener
  
  functionToCall.call(event); // call a function with event


  functionToCall = functionToCall === orFn ? orFnNew : orFn; // change function to be called
});

<button>button</button>