JSFiddle - React, Tailwind, and code Playground
HTML
<div id="a" style="padding:10px;border:2px black solid;border-color:white;">kkjjhkjhlkjh</div>
JavaScript
/*
* toggle : при срабатывании события будет сначала исполнять первую функцию,
* потому вторую и т.д по порядку
*
* Аргументы :
* element - элемент, который будет реагировать на события
* event - тип события.(без 'on')
* funcArr - массив функций
*/
function toggle(element, event, funcArr){debugger
// проводим нужную инициализацию
// мини база данных для элементов, их событий и индексов.
var BD = [];
// имеем ли дело с ie
var ie = /*@cc_on!@*/0;
//исполняет нужную ф-ю из массива
function handler(e){
// находим наш элемент
var element = ie ? e.srcElement:e.target;
// ищем сохраненный индекс и извлекаем инфу для этого эл-а из миниБД
var index = element.getAttribute('id-toggle');
var elBD = BD[index];
// проверяем наличие исполняем ф-ю из списка с текущим индексом.
if(elBD.i == elBD.arr.length){ // вышли за массив. начинаем с начала
elBD.i = 0;
}
elBD.arr[elBD.i].call(element, ie ? event:e);//исполняем ф.ю
elBD.i += 1; // увеличиваем индекс
}
// переназначаем ф-ю
toggle = function(element, event, funcArr){
var elBD = {};
// индекс функции, которая исполнится.
elBD.i = 0;
// массив функций для обхода
elBD.arr = funcArr;
var BDindex = BD.push(elBD) - 1; // возвратит новую длину. минус 1 - последний член массива.
// сохраняем индекс для связки с базой
element.setAttribute("id-toggle", BDindex);
// назначаем эл-у обработчик по-умолчанию.
if(ie){
element.attachEvent(event, handler);
} else {
element.addEventListener(event, handler, false);
}
}
// вызываем изменённую функцию
toggle(element, event, funcArr);
}
toggle(document.getElementById("a"), 'click', [function(e){this.style.borderColor="red";},function(e){this.style.borderColor="green";}]);