Как сделать, чтобы повторные отслеживания событий не вешались?

Question

[Aspirant555]

После каждого нажатия на кнопку, события вешаются в геометрической прогрессии...
Скорее вопрос... Как лучше сделать... Могу очищать события, перед установкой события например...

function header__autorization__open__event () { 
     var modal__btns = document.getElementsByClassName("modal__btn");
     var index;
     var modal__btn;
     if (modal__btns !== null) {
          for (index = 0; index < modal__btns.length; index++) {
               modal__btn = modal__btns[index];
               modal__btn.addEventListener('click', function () {modal(this.id)});
          }
     }
}

Comments

[0xD34F]

https://learn.javascript.ru/event-delegation

[Aspirant555]

0xD34F, В первый раз всё нормально... Проблема появляется после повторного объявления функции... Объявляется после ajax запроса, для появившихся кнопок...

[0xD34F]

aspirantes, вы статью по ссылке всё-таки попытайтесь прочесть и понять. Не надо никаких "повторных объявлений".

[Aspirant555]

0xD34F, Не раз уже читал, просто не могу понять, чем мне это поможет в данном вопросе.

[StiflerProger]

У тебя на нажатии кнопки стоит обработчик header__autorization__open__event?

[Aspirant555]

StiflerProger, нет, вызывается при загрузке страницы, и загрузке страницы из ajax... Повторно вешается на кнопки основной страницы...
Грубо говоря, здесь повторно вызывается:

modal__btn.addEventListener('click', function () {modal(this.id)});

Чтобы на новые кнопки обработчик повесить, но вешает и на старые повторно...

[StiflerProger]

aspirantes, в общем у тебя проблема в том, что просто нужно запускать header__autorization__open__event() единожды.
Если только у тебя кнопки .modal__btn не создаются динамически. В этом случае нужно будет пересоздавать события. Ну или опиши ситуацию из-за которой у тебя необходимость в повторном запуске header__autorization__open__event()

[Aspirant555]

StiflerProger, Всё правильно поняли... Я запускаю header__autorization__open__event() при первом запуске страницы... Но после загрузки ajax вешаю эту функцию для обновления новых кнопок (создаются динамически, при запуске modal__btn.addEventListener('click', function () {modal(this.id)});... Но при этом обработчик вешается и на старые кнопки...

modal__btn.addEventListener('click', function () {modal(this.id)});. В итоге в ajax окнах, всё ок, но на основной странице несколько modal__btn.addEventListener('click', function () {modal(this.id)}); на одной кнопке.

Можно добавить в функцию modal__btn.removeEventListener(click', function () {modal(this.id)}), но на сколько это будет верным решением?

function header__autorization__open__event () { 
     var modal__btns = document.getElementsByClassName("modal__btn");
     var index;
     var modal__btn;
     if (modal__btns !== null) {
          for (index = 0; index < modal__btns.length; index++) {
               modal__btn = modal__btns[index];
               <b>modal__btn.removeEventListener(click', function () {modal(this.id)})</b>,
               modal__btn.addEventListener('click', function () {modal(this.id)});
          }
     }
}

[WapSter]

aspirantes, StiflerProger, два д это сила. Вам уже в первом комментарии дали ответ, не нужно вешать обработчики отдельно для каждой кнопки, а достаточно проверять на что нажали в целом блоке.

[StiflerProger]

aspirantes, более правильное решение тебе скинули первой ссылкой.
Тебе нужно на общий родителей всех кнопок, и текущих, и генерируемых навесить событие клика. И по target проверять был ли нажат элемент с классом .modal__btn
Вариант с очисткой предыдущего слушателя тоже приемлем. Только нужно будет функцию обработчика вынести отдельно, чтобы она была ссылкой и можно было удалять её через removeEventListener

[Aspirant555]

StiflerProger, По идее обработчик документа при ajax запросе так же должен дублироваться, и нужно его перезаписать? В общем понял, что имелось ввиду в первом посту, попробую реализовать....

[StiflerProger]

document.querySelectorAll(".modal__btn")
	.forEach(elem => {
  	elem.addEventListener('click', () => console.log("Кнопка нажата"));
  });

setTimeout(() => {
	
	console.log("Удаляю обработчики")
	
	document.querySelectorAll(".modal__btn")
		.forEach(elem => {
  		elem.removeEventListener('click', () => console.log("Кнопка нажата"));
  	});

}, 5000);

такой код работать не будет. Т.е. события на кликах у тебя так и останутся, т.к. метод removeEventListener будет удалять обработчик по переданной вторым аргументом ссылке.

function handler(event) {
	console.log("Кнопка нажата")
}


document.querySelectorAll(".modal__btn")
	.forEach(elem => {
  	elem.addEventListener('click', handler);
  });

setTimeout(() => {
	
	console.log("Удаляю обработчики")
	
	document.querySelectorAll(".modal__btn")
		.forEach(elem => {
  		elem.removeEventListener('click', handler);
  	});

}, 5000);

этот код уже сработает как надо

Вариант самый простой это навесить обработчик сразу на общего родителя, выглядеть будет примерно так:

document.querySelector(".wrapper").addEventListener('click', event => {
	let target = event.target;

  if (!target.classList.contains('modal__btn')) return; // нажали не на интересующую нас  кнопку

	console.log('Кнопка нажата');
});

[Aspirant555]

StiflerProger, Но на сколько знаю, в вызванных ajax запросом queryselectors уже не будет работать, и этот event всё равно нужно перезаписать.

В связи с чем, решение с перезаписью является верным...

[StiflerProger]

aspirantes, ты не прав) тебе не нужно будет ничего перезаписывать. https://jsfiddle.net/StiflerProger/nLua76xt/49/

[Aspirant555]

StiflerProger, жуть какая, а намучиться уже успел... благодарю.... И действительно не удаляет со вторым аргументом ... Жаль раньше не додумался, что обработчик будет считывать queryselector в момент нажатия... Сегодня мне прямо удочку вместо рыбы подогнали )

[Aspirant555]

StiflerProger, А ещё такой момент:

document.querySelector('#full__page').onclick = function(e) {
     alert(e.target.id);
     if (!e.target.classList.contains('modal__btn')) return;
     modal(e.target.id);
   };

У меня на кнопке SVG:

<button id='modal__close' class='modal__btn'>
                         <svg class="header__svg" id="header__menu__svg">
                              <use id="header__menu__use" xlink:href="#close__icon"></use>
                         </svg>
                    </button>

Но не могу даже currentTarget повесить... Мне только на SVG этот же класс вешать?