Как сделать так, чтобы addEventListener mouseover срабатывал корректно?

Question

[Андрей Брекоткин]

Имеем 10 элементов в ряд и код:

document.addEventListener('mouseover', (event) => {

    if (event.target.matches('.catalog-popup__one-link'))
	{
		document.querySelector('.catalog-popup__one-link_active').classList.remove('catalog-popup__one-link_active');
		event.target.classList.add('catalog-popup__one-link_active');
    }
});

Но при быстром перемещении мыши по элементам не всегда выполняется действие. Что сделать, как изменить чтобы событие отрабатывалось на каждом элементе?

Аналогичный код на jQuery отрабатывает корректно:

$(document).on('mouseover', '.catalog-popup__one-link', function(){

	$('.catalog-popup__one-link_active').removeClass('catalog-popup__one-link_active');
	$(this).addClass('catalog-popup__one-link_active');
});

Answer 1

[WapSter]

Используй непосредственно .classList.contains() он по любому быстрее, чем el.matches()

UPD у тебя глюки потому что ты используешь строку

document.querySelector('.catalog-popup__one-link_active').classList.remove('catalog-popup__one-link_active');

Если есть два элемента с классом актив, то второй останется за бортом по этому и не убирается класс.

Нужно либо document.querySelectorAll() или как у меня вешать второе событие. На сколько быстрее каждый из вариантов не знаю.