1

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 перезаписывается, а во втором нет?

1
  • 1
    Хороший вопрос. Полагаю, потому что в первом случае - это одна и та же функция, а во втором - две разных 27 дек 2019 в 22:28

1 ответ 1

0

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

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

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

2
  • не могу понять, почему во втором случае так происходит, даже если вместо анонимной const f = () использовать именованную function f()
    – grime
    27 дек 2019 в 23:21
  • Смысл от этого не меняется. Каждый новый вызов такой функции - это создание нового экземпляра в другой области памяти.
    – Ofer
    27 дек 2019 в 23:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.