nagon.net - бесплатная поставка трафика на ваши сайты
Логин:
Пароль:
Регистрация





Убрать рекламу с сайта чтобы не мешала!

Кроссбраузерное добавление и удаление обработчиков событий на 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 сообщения, первое и третье.
Вас зовут:

Ваш комментарий:


Код на картинке: