tempfolder

Попробуйте так
let tab = '\u0009';

else if (event.target.name = 'formStyleCheckbox') {

Да, давайте ещё будем вам опечатки исправлять. Или, может быть, объяснять, чем присваивание от проверки на равенство отличается?

как лучше назначать ивенты, на каждый конкретный нужный элемент или на все вместе как в моем случае?

Во-первых, назначают не события, а их обработчики.

Во-вторых, предлагаю погуглить аргументы за и против обоих способов.

Занумеруем цвета произвольным простейшим образом. При загрузке страницы - некой статической переменной присвоим номер, соответствующий зелёному.

При наведении курсора - присваиваем фону цвет, соответствующий этой переменной. А саму переменную переводим в следующее состояние; при этом помним, что состояния закольцованы.

Если цвета занумерованы, начиная с нуля - то переход к следующему делается по формуле n = (n+1) mod 3, где три = количество цветов в цикле; а mod = остаток от деления.

Думаю, д.б. понятно.

const el = document.querySelector('#box');
const colors = [ 'red', 'green', 'blue' ];
let index = -1;

el.addEventListener('mouseenter', function() {
  index = (index + 1) % colors.length;
  this.style.backgroundColor = colors[index];
});
el.addEventListener('mouseleave', function() {
  this.style.backgroundColor = '';
});