Кроссбраузерное добавление удаление обработчиков событий на javascript. Как добавить обработчик к элементу?

Добавлять события к элементам - излюбленное занятие веб разработчиков.
Какие карявые коды обычно пишут умельцы?

Самый простой пример карявого добавления обработчика события элементу:

<div id="baran">кликни по мне</div>

<script type="text/javascript">
document.getElementById('baran').onclick=function () {
	alert('у вас получилось кликнуть');
}
</script>

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

<script type="text/javascript">
document.getElementById('baran').onclick=function () {}
</script>

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

Более сложный вариант реализации добавления и удалиния событий на javascript

<div id="baran">кликни по мне</div>

<script type="text/javascript">
		function addevent(obj, e, h) {
			if (obj.addEventListener) {
				obj.addEventListener(e, h, false);
			} else if (obj.attachEvent) {
				obj.attachEvent('on'+e, h);
			}
			else {
				obj['on'+e]=function() {
					h();
				};
			}
		},
		function delevent(obj, e, h) {
			if (obj.removeEventListener) {
				obj.removeEventListener(e, h, false);
			} else if (obj.detachEvent) {
				obj.detachEvent('on'+e, h);
			}
			else {
				obj['on'+e]=null;
			}
		}

var elem=document.getElementById('baran');
var eclick = function () {
	alert('у вас получилось кликнуть');
}

//добавляем событие
addevent(elem, 'click', eclick);

//удаляем событие
delevent(elem, 'click', eclick);
</script>

Наверняка вы уже знаете что назначаются события в осле (IE) немного по другому чем в других браузерах.
Именно по этому в коде выше нам постоянно приходется проверять Осел перед нами или нет?
И все равно даже такой более сложный код не решил нашей проблемы по добавлению нескольких событий одному элементу.

Чтож простой выход есть.

Чтобы не копаться в кодах и не кипятить мозги, перед тегом head подключим ScriptJava фреймворк, добавив вот такой код:

<script type="text/javascript" src="http://scriptjava.net/source/scriptjava/scriptjava.js"></script>

Теперь реализуем ранее расматриваемый пример более простым и удобным способом:

<div id="baran">кликни по мне</div>

<script type="text/javascript">
//добавляю событие onclick
var e = function(event){
	alert('у вас получилось кликнуть');
}
$$e.add($$('baran'),'click',e);
</script>

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

$$e.remove($$('baran'),'click',e);

но на этом возможности фрейм ворка не заканчиваются
добавим элементу 3 разных события а потом удалим второе событие

<div id="baran">кликни по мне</div>

<script type="text/javascript">
//добавляю события onclick
var e1 = function(event){
	alert('у вас получилось кликнуть 1');
}
var e2 = function(event){
	alert('у вас получилось кликнуть 2');
}
var e3 = function(event){
	alert('у вас получилось кликнуть 3');
}
$$e.add($$('baran'),'click',e1);
$$e.add($$('baran'),'click',e2);
$$e.add($$('baran'),'click',e3);

$$e.remove($$('baran'),'click',e2);
</script>

После запуска скрипта, мы увидим 2 сообщения, первое и третье.