Переопределить функцию, уже прикрепленную к событию - PullRequest
Новая
       6

Переопределить функцию, уже прикрепленную к событию

3 голосов
/ 10 марта 2020

Я хочу переопределить функцию, уже прикрепленную к событию. Вот так: 

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

buttonEl.addEventListener('click', orFn);

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

Однако, когда я нажимаю на кнопку, старая функция все еще вызывается. Я видел этот stackoverflow . Я не могу использовать функцию оболочки в моем случае. И я хочу понять, почему это не работает.

Мой код доступен для тестирования здесь: jsfiddle .

Ответы [ 2 ]

1 голос
/ 10 марта 2020

Один из способов - удалить первого слушателя, затем добавить другого 

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>
0 голосов
/ 10 марта 2020

Один из способов использования bind (). 

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

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

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

orFn.bind(orFn)

btn.addEventListener('click', orFn);

Это будет связано с новой функцией и покажет new в всплывающем окне предупреждения.

...