1

После заполнения 3 полей ввода оставшиеся поля блокируются, и появляется кнопка "сбросить". При ее нажатии все поля открываются, и счетчик заполненных полей обновляется. При проверке значений счетчика в консоли увидел, что после нажатия кнопки сброса при вводе значения в одно поле счетчик увеличивается два раза, а не один. В чем моя ошибка?

https://spleekz.github.io/trinagle1/

(нужный фрагмент кода описан под комментарием 'блок инпутов').

1 ответ 1

1
calcFields.addEventListener('click',function(event){
    event.preventDefault();
    if(event.target.classList.contains ('input')){
        event.target.addEventListener('change',function(){ // !!!
            if(event.target.value !==''){
                i++;
                ...

Не добавляйте обработчики событий внутри других обработчиков событий (кроме "DOMContentLoaded"). Они накапливаются и выстреливают все.


Обработчиков на событие будет прикреплено столько, сколько раз вызывется addEventListener

Опа. Я был неправ.

function clickEventHandler() {
  console.log("clickEventHandler");
}
var btn = document.getElementById("test");
function addEvent() {
  btn.addEventListener("click", clickEventHandler);
  console.log("addEvent");
}
function removeEvent() {
  btn.removeEventListener("click", clickEventHandler);
  console.log("removeEvent");
}
<button id="test">Click</button>
<button onclick="addEvent()">Add</button>
<button onclick="removeEvent()">Remove</button>

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded.

11
  • А если, при добавлении обработчиков, использовать не анонимную функцию, то не должны накапливаться... так или нет?
    – UModeL
    10 окт 2020 в 15:31
  • @UModeL Нет, не так. Обработчиков на событие будет прикреплено столько, сколько раз вызывется addEventListener - конечно, если между ними не вызывается removeEventListener.
    – user176262
    10 окт 2020 в 17:37
  • 1
    @UModeL А это мы сейчас выясним.
    – user176262
    10 окт 2020 в 17:52
  • 1
    @UModeL Она к ним не относится, потому что анонимная функция, определенная "in-place", каждый раз новая.
    – user176262
    10 окт 2020 в 18:23
  • 1
    @UModeL Согласен. Чуть позже. Сейчас должен идти ремонтировать подвал :).
    – user176262
    10 окт 2020 в 18:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.