Вы правы, добавление обработчиков в ваш HTML не очень хорошо. Вы также теряете возможность иметь несколько обработчиков для события, прикрепленного к одному объекту.
К сожалению, Microsoft идет своим путем, подключая обработчики событий. Но вы должны быть в состоянии написать небольшую функцию-обертку, чтобы позаботиться об этом.
Для получения подробной информации, я предлагаю вам прочитать quirksmode.org - Расширенные модели регистрации событий .
Пример для W3C-совместимых браузеров (в отличие от IE): вместо добавления вашего обработчика событий в HTML, получите ссылку на элемент и вызовите addEventListener:
var obj = document.getElementById('obj');
obj.addEventListener('mouseover', function(event) {
fade(event.currentTarget, 1);
}, false);
obj.addEventListener('mouseout', function(event) {
fade(event.currentTarget, 0);
}, false);
Как видите, я передаю непосредственно ссылку на объект, поэтому в вашем методе fade у вас уже есть ссылка на объект.
Вы можете заключить это в функцию, которая принимает идентификатор (или ссылку), и каждый раз, когда вы хотите присоединить обработчик события к определенному элементу, вы можете просто передать идентификатор (или ссылку) этой функции.
Если вы хотите сделать свой код многоразовым, я предлагаю поместить все в объект, например так:
var Fader = (function() {
var DELTA = 0.05;
function newOpacity() {}
function setStyle() {}
return {
fade: function(...) {...},
init: function(element) {
var that = this;
element.addEventListener('mouseover', function(event) {
that.fade(event.currentTarget, 1);
}, false);
element.addEventListener('mouseout', function(event) {
that.fade(event.currentTarget, 0);
}, false);
}
};
}())
Использование объекта для хранения ваших функций уменьшает загрязнение глобального пространства имен.
Тогда вы можете позвонить с помощью:
Fader.init(document.getElementById('obj'));
Объяснение вышеуказанного кода:
У нас есть непосредственная функция (function(){...}()), которая означает, что функция определяется и выполняется (()) за один раз. Эта функция возвращает объект (return {...};, {..} является литеральной нотацией объекта), который имеет свойства init и fade. Оба свойства содержат функции, которые имеют доступ ко всем переменным, определенным внутри непосредственной функции (они являются замыканиями). Это означает, что они могут получить доступ к newOpacity и setStyle, которые недоступны извне. Возвращенный объект присваивается переменной Fader.