дублируется addEventListener одной и той же функции

24 января 2022, 01:20

const b = document.getElementById('btn'); 
 
const f = () => { 
  console.log('asdf'); 
} 
 
const c = () => { 
  // const f = () => { 
  //   console.log('asdf'); 
  // } 
  b.addEventListener('click', f); 
} 
 
c(); 
c();

<button id="btn">action</button>

в первом сниппете к кнопке дважды привязывается функция f из глобальной области видимости. в результате при клике на кнопку она выполнится один раз.

const b = document.getElementById('btn'); 
 
//const f = () => { 
//  console.log('asdf'); 
//} 
 
const c = () => { 
  const f = () => { 
     console.log('asdf'); 
  } 
  b.addEventListener('click', f); 
} 
 
c(); 
c();

<button id="btn">action</button>

во втором сниппете также дважды привязываем функцию f к кнопке, только теперь из локальной области видимости, в результате при клике функция выполняется дважды. почему в первом случае addEventListener перезаписывается, а во втором нет?

Answer 1

В первом случае назначается обработчиком одна и та же функция. Второй раз одна и та же функция не добавляется.

Если зарегистрировано несколько одинаковых EventListener на одном EventTarget с одинаковыми параметрами, дублирующиеся слушатели игнорируются. https://developer.mozilla.org/ru/docs/Web/API/EventTarget/addEventListener

Во втором случае Вы при каждом вызове создаёте новую функцию. Как результат добавляется новый обработчик события.