Событие click срабатывает два раза

Question

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

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

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

Answer 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.

БЛОГ НА HUSL

Событие click срабатывает два раза

Ответы (1 шт):