Почему событие onclick срабатывает 2 раза?

Question

[dom12]

Если первый раз запустить функцию, то все работает:

function CLICK() {
	let button = document.querySelectorAll('button');
	if(button.length){ 
		for (let i = 0; i < button.length; i++){
			button[i].addEventListener('click', function(EVENT){
				console.log(1,button[i]);
			});
		}
	}
}
CLICK();

Но после добавления новых кнопок я запуская функцию CLICK(); ещё раз чтобы новые кнопки сработали. Из-за этого событие click начали срабатывает 2 раза. (Также и с другими заново запущенными функциями срабатывают 2 раза).

Как исправить двойной клик при событие click и не только?

Answer 1

[Сергей delphinpro]

function CLICK() {
  let button = document.querySelectorAll('button');
  if(button.length){ 
    for (let i = 0; i < button.length; i++){
+     if (!button[i].classList.contains('ok'))
+       button[i].classList.add('ok');
        button[i].addEventListener('click', function(EVENT){
          console.log(1,button[i]);
        });
+     }
    }
  }
}
CLICK();

Но лучше подумать о делегировании событий.

Comments

[dom12]

Полный код:
Все равно не работает.

const TOGGLE = (EVENT) => {
		if(EVENT.target.classList.contains('active')){
			EVENT.target.classList.remove('active');
		}else{
			EVENT.target.classList.add('active');
		}
	};
	
	let button = document.querySelectorAll('button');
	if(button.length){ 
		for (let i = 0; i < button.length; i++){
			button[i].addEventListener('click', (EVENT) => {
				EVENT.stopPropagation();
				EVENT.target.focus();
				TOGGLE(EVENT);
			});
		}
	}

[Сергей delphinpro]

dom12, ну предлагаю сыграть в игру "Найди 10 отличий"

[Сергей delphinpro]

dom12, ну или хотя бы смысл понять. А смысл не в том, чтобы навесить класс. Смысл в том, чтобы отметить кнопки, на которые уже навешан обработчик и не вещать его повторно.

[dom12]

Сергей delphinpro, Работает, тупанул.