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

Question

Я плохо программирую или слишком сильно отклоняюсь назад для IE, назначая обработчики событий, такие как:

element.someEvent = someFunction; 

вместо:

element.attachEventListener("someEvent", someFunction, false);

• Какие бы были плюсы и минусы этой идеи?
• Что я пропускаю или настраиваю себя, не просто проверяя и выбирая подходящий метод?

Answer 1

Если вы используете стиль element.onclick = xxx;, вы ограничиваете себя (и любые другие сценарии, которые используете на странице) единичным обработчиком событий для события в этом элементе (любой предыдущий обработчик для этого события забивается). С помощью механизма addEventListener / attachEvent вы можете добавлять и удалять обработчики событий независимо друг от друга, без перекрестных помех.

Так, например, если вы делаете:

 document.getElementById('foo').onclick = function() {
 };

... тогда любой предыдущий обработчик click в элементе foo сдувается и больше не вызывается при нажатии foo. Для сравнения:

 document.getElementById('foo').addEventListener('click', function() {
 });

Теперь вызывается ваш обработчик click, но вызываются все другие click обработчики, которые ранее были присоединены к элементу , также . Ты хорошо играешь с другими. : -)

Легко создать функцию, которая устраивает эти вещи для вас:

function hookEvent(element, eventName, handler) {
    if (element.attachEvent) {
        element.attachEvent("on" + eventName, handler);
    }
    else if (element.addEventListener) {
        element.addEventListener(eventName, handler, false);
    }
    else {
        element["on" + eventName] = handler;
    }
}

... или если вы действительно хотите поехать в город:

var hookEvent = (function() {

    function hookViaAttach(element, eventName, handler) {
        element.attachEvent("on" + eventName, handler);
    }
    function hookViaAdd(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
    }
    function hookDOM0(element, eventName, handler) {
        element["on" + eventName] = handler;
    }

    if (document.attachEvent) {
        return hookViaAttach;
    }
    if (document.addEventListener) {
        return hookViaAdd;
    }
    return hookDOM0;
})();

... которая создает функцию, которая определяет один раз , какой тип обработчика использовать, а затем использует его повсюду.

Честно говоря, для этого полезно использовать работу других и использовать такую ​​библиотеку, как jQuery , Прототип , YUI , Закрытие или любой из нескольких других .

Answer 2

Если у вас есть полный контроль над страницей, и вы уверены, что вся привязка событий происходит в одном месте, тогда .onevent - самый простой и наиболее поддерживаемый способ.

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

var oldOnclick = el.onclick;
el.onclick = function () {
   // blah blah
   if (oldOnclick) oldOnclick();
};

Answer 3

В настоящее время существует множество библиотек javascript, которые позаботятся о кросс-браузерной совместимости для вас, а также сделают кодирование в javascript увлекательным.Один из самых популярных - Jquery .

Вы можете зарегистрировать события в Jquery следующим образом:

$(elem).click(function () {
    alert('Event handler');
});

or 

$(elem).bind('click', function() {
    alert('Event handler');
}); 

Answer 4

В IE вам нужно использовать attachEvent.(Стандартный механизм DOM - это addEventListener.) Я бы настоятельно рекомендовал использовать такую ​​библиотеку, как jQuery, которая позаботится об этих различиях в браузере.Такие фреймворки, как jQuery, также помогают устранить различия между моделями событий в разных браузерах.