Почему removeEventListener не срабатывает для всех элементов?

Question

[MdaUZH]

Всем привет, обнаружил проблему с обработчиками событий..

Есть элементы, повесил на них обработчик..
Потом что-то случилось и добавил ещё элементов в список.

О новых элементах ничего не знаю, знаю что у всех этих элементов одинаковый класс.

Весим обработчик на все элементы с указанным классом, и тут проблема :)
На тех элементах которые были до того, как появились новые теперь 2 одинаковых обработчика...

как удалить старые обработчики и добавить новый?

Когда добавляются новые элементы делаю так(знаю что это бред):

var delCom = document.querySelectorAll('.class);
for(var i = 0; i < delCom.length; i++){
	if(delCom[i] != 'undefined'){
		delCom[i].removeEventListener('click', function(event){deletComment(this);},false);
		delCom[i].addEventListener('click', function(event){deletComment(this);},false);
	}
}

Но не срабатывает и по прежднему 2 обработчика, в чем может быть причина, подскажите пожалуйста?
мб в том что я передаю this ?

Буду очень благодарен

Answer 1

[Денис]

Не нужно ничего удалять и снова добавлять. Используйте делегированную обработку событий:

document.addEventListener('click', function(e) {
  if (e.target.classList.contains('class')) {
    deletComment(e.target);
  }
}, false);

UPD по комментарию

stopPropagation не помог

Я бы удивился, если бы помог, т.к. document в иерархии всплытия события, будет стоять последним в очереди. Я в принципе вам предлагал использовать делегирование, т.е. один обработчик клика на весь документ. В вашем случае, проблему можно решить, установив обработчик на ближайший родительский статичный элемент, а не на весь документ. И, если присутствуют еще какие-то родительские элементы, на которых так же установлен клик, то делать проверку внутри их обработчика. Вариант 1, Вариант 2.
А что касается предложенного мной вариант с установкой одного обработчика, то могу показать, как я это реализовывал в некоторых проектах, может пригодится в будущем ... или настоящем :)
Пример в песочнице При добавлении нового элемента, я только дописываю ему в data-атрибут метод, который должен быть вызван при клике и описываю сам метод в объекте "methods"

<div class="wrapper" data-method="setBgColor">
  wrapper
  <div class="parent" data-method="alertHello">
    parent
    <div class="child" data-method="changeBorder">
      child
    </div>
  </div>
</div>

document.addEventListener('click', function(e) {
  var el = e.target;
  if (methods.hasOwnProperty(el.dataset.method)) {
    methods[el.dataset.method].call(el);
  }
}, false);
var methods = {
  setBgColor: function() {
    this.style.backgroundColor = '#ff0';
  },
  alertHello: function() {
    alert('Hello, world!');
  },
  changeBorder: function() {
    this.style.border = '3px dashed #900';
  }
};

Comments

[MdaUZH]

К сожалению теперь идет всплытие :c
и элементы не сопадают :c
stopPropagation не помог.

[Денис]

MdaUZH , дополнил в ответе

Answer 2

[Artcl]

Так работать не будет потому, что 2 анонимные функции не равные друг другу.

elem.addEvenetListener('event', function(){doSomething();});
elem.removeAddEventListener('event', function(){doSomething();});

Чтобы была возможность использовать remoEventListener, нужно addEvenetListener вызывать не с анонимной ф-цией, а передавать имя функции.
Чтобы работало нужно делать так:

elem.addEvenetListener('event', doSomething);
elem.removeAddEventListener('event', doSomething);