вот написал маленький пример того, как это можно сделать.
сначала решил проблему через свои свойства (element.i), но потом вспомнил, что это плохо и чревато утечкой памяти к некоторых браузерах
и решил задачу через имитацию
jQuery.data
/*
* toggle : при срабатывании события будет сначала исполнять первую функцию,
* потому вторую и т.д по порядку
*
* Аргументы :
* element - элемент, который будет реагировать на события
* event - тип события.(без 'on')
* funcArr - массив функций
*/
function toggle(element, event, funcArr){
// проводим нужную инициализацию
// мини база данных для элементов, их событий и индексов.
var BD = [];
// имеем ли дело с ie
var ie = /*@cc_on!@*/0;
//исполняет нужную ф-ю из массива
function handler(e){
// находим наш элемент
var element = ie ? window.event.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);
}
писал на одном дыхании!! потом проверил код - и о чудо, он работает!
пример использования :
jsfiddle
и ещё тут :
<script>
function toggle(h,c,i){function f(b){var d=e?event.srcElement:b.target,a=d.getAttribute("id-toggle"),a=g[a];if(a.i==a.arr.length)a.i=0;a.arr[a.i].call(d,e?c:b);a.i+=1}debugger;var g=[],e=0;toggle=function(b,d,a){var c={i:0};c.arr=a;a=g.push(c)-1;b.setAttribute("id-toggle",a);e?b.attachEvent(d,f):b.addEventListener(d,f,!1)};toggle(h,c,i)};
</script>
<div id="a" style="padding:10px;border:2px black solid;border-color:white;">kkjjhkjhlkjh</div>
<script>
toggle(document.getElementById("a"),"click",[function(){this.style.borderColor="red"},function(){this.style.borderColor="green"}]);
</script>
