Соберем в топике хорошие идеи, а затем сделаем ман по событиям
Коротко расскажу о типах регистрирования событий: inline(сразу в тег), традиционная модель(нетскейповская времен динозавров), навороченная модель(DOM, IE DOM).
Inline обработчики событий это код вставляемый непосредственно в тег:
| Код |
<span onclick="alert(event.type); /* выдаст нам click */">Test</span> |
Браузер берет содержимое свойства onclick и создает по нему функцию, которую регистрирует как обработчика этого события. Это можно представить кодом:
| Код |
<span id="test" onclick="alert(arguments[0].type)" onmyevent="this.style.background='#a98df5'" onmouseover="runtest()">Test</span> |
Созданная браузером функция имеет один аргумент: event - обьект содержащий инфу о событии, некоторые из его свойств описал Aliance выше. Для ИЕ это не совсем верно, т.к. обьект event приходит к нам из контекста window, а не аргументом, так что arguments.length вернет нам 0.
Ссылка this указывает на тег, т.е. функция-обработчик это метод(или принадлежит, оба утверждения верные) обьекта-тега.
Традиционная модель подразумевает вызов браузером определенных методов обьекта, при каждом событии:
| Код |
var tag=document.getElementById("test"); |
Это то же самое что мы сделали выше сами - вызвали метод onmyevent. Заметим что мы получаем те же аргументы что и в inline обработчике, this указывет на тег(ведь это его метод).
В обоих способах мы имеем ссылку this, через которую мы работаем с тегом, которому принадлежит обработчик события. Поля srcElement/target, как положенно, содержат ссылки на обьект над которым совершилось событие:
| Код |
<div onclick="alert((event.srcElement? event.srcElement: event.target).nodeName);">Обработка <span>событий</span></div> |
Кликнув по "событий" мы получим alert окошко с именем тега span. T.e. браузер при совершившимся событии создает обьект event, в который устанавливает обьект над которым совершилось событие и затем последовательно вызывает обработчиков событий для всех предков обьекта. Это называется bubbling. Восхождение от предков к обьекту над которым совершилось событие назывется capturing.
Древний нетексейп4 поддерживал только capturing, ИЕ поддерживает только bubbling, а Mozilla(Gecko), согласно модели предложенной в DOM2 оба поведения: сначала событие бежит от document к обьекту над которым свершилось событие(capturing mode), а затем спускается назад к document. Это мы рассмотрим ниже, когда придем к "навороченным" моделям событий, и далее в этом топике, тема довольно обьемная.
Навороченная(advanced) модель собтыий делится на две ветви: модель DOM2 и модель от MS, у последней у смысл гораздо шире чем просто модель событий. Мы здесь не будем рассматривать behaviors, фича(очень хорошая), но подерживается только ИЕ.
Методы addEventListener/removeEventListener позволяют установить/удалить обработчиков событий - на одно событие может быть сколь угодно много обработчиков, в отличии от традиционной модели. Узнать установленно ли собтыие пока нельзя
, но можно его удалить, даже если обработчик не задан, то никаких исключений/ошибок не будет.Следующий код работает только в Мозилле и Опере. Устанавливаем события:
| Код |
<div id="test">Test <span id="test2">Test2 <span id="test3">Test3</span></span></span> |
Теперь кликнем на "Test3", выполенение:
span-test2, span-test3
span-test3, span-test3
div-test, span-test3
То есть событие начало работу в режиме capturing, обошло всех обработчиков зарегистрированных для этого режима(span-test2), затем дошло до обьекта над которым совершилось событие(span-test3), и вернулось обратно в режиме bubbling (div-test).
Ссылка this указывает как и раньше на обьект, к которому принадлежит событие.
Для того что бы удалить событие, согласно принципам DOM'овцев нужно предоставить самого обработчика события:
| Код |
|
Модель ИЕ: attachEvent/detachEvent. Принцип тот же самый, только нет третьего параметра, т.к. ИЕ всегда работает в bubbling режиме. Но есть пара недочётов:
| Код |
<div id="test">Test</span> |
Замечаем что нам передается обьект сбытия первым аргументом, да такой что window.event==ev выдаст нам false, т.е. это не ссылка на window.event. Все имена событий начинаются на префикс on. Но самый большой недостаток, это ссылка this - она указывает на обьект window, а не на тег, к которому принадлежит событие, проще говоря теперь нам эта ссылка как козе баян.
Xотя если кто копнёт глубже, то узнает о существовании обьекта element в bechaviors, который указывает на тег.
Давайте пификсим "оплошность" ИЕ и сделаем его хоть частично совместимым с DOM2. Для этого нам нужно имплементировать метод addEventListener для каждого обьекта тега. И тут мы наткнёмся на самое большое надругательство над JavaScript - у тегов нет свойства prototype
. Вот как, после такого это все JavaScript'ом назвать...Поэтому мы будем проверять каждый обьект, на существование addEventListener, если метода нет, то добавим его.
И так имплементируем пока 3 функции:
| Код |
//существует ли нужное API |
Фиксим только ИЕ5.5 - ИЕ6.0, убожество под именем ИЕ5.0 не поддерживает метода call для функций, push для массивов и многое другое.
В результате имеем стандартное(DOM2) поведение для ИЕ, правда работающее только в bubbling режиме. А самое главное, что теперь имеем ссылку this, ради которой все и начиналось. Пример использования:
| Код |
var div=document.getElementById("test"); |
Код будет работать везде правильно.
Удаление обработчика имплементируйте сами
.
). Пришло как наследие из нетскейпа по моему. 
, только у меня появился ещё один вопрос, есть ли значение где размещать этот код? В начале или в конце документа?