Javascript кроссбраузерная установка обработчиков события

Программирование на JavaScript это как правило программирование каких либо действий основанных на событиях. К сожалению, модели событий это одна из тех вещей, которые различные браузеры реализуют по - своему. В этой статье я приведу интересное решение реализации функции кроссбраузерной установки обработчиков событий.

Браузеры поддерживающие модель событий DOM2 (когда событие как бы сначала опускается с вершины DOM дерева, к элементу - цели, а потом опять всплывает наверх ) используют метод addEventListener с тремя аргументами:

• String: event_name - наименование события;
• Function: callbackFunction - ссылка на функцию обработчик;
• BOOL: useCapture - Фаза захвата.

Фаза захвата это логическое значение: если true - то обработчик сработает в фазе "захвата" т.е. когда событие опускается, если false - то в фазе "всплытия". Иногда это бывает полезно.

  // Установка обработчика:
  document.addEventListener(event_name, callbackFunction, useCapture);

  // Удаление обработчика:
  document.removeEventListener(event_name, callbackFunction, useCapture);

Браузеры не поддерживающие модель событий DOM2 (IE):

  // Установка обработчика:
  document.attachEvent(event_name, callbackFunction);

  // Удаление обработчика:
  document.detachEvent(event_name, callbackFunction);

Как видно из параметров методов attachEvent и detachEvent они принимают только два аргумента - всё правильно, ни о какой фазе "захвата" в модели событий от IE и речи быть не может, потому что фазы "захвата" в нём попросту нет, события порождаются сразу в объекте "цели" и всплывают к вершине DOM - дерева.

В общем к чему я всё это... Давайте напишем универсальную функцию, которая позволит нам не задумываться о проблемах совместимости браузеров. Описанная ниже функция возвращает объект, который имеет три метода, для установки и удаления события, а так же метод для искуственной генерации события.

Преимущества этого подхода в том, что код проверяющий наличие в браузере той или иной возможности, выполнится только один раз - при создании объекта, сэкономив нам хоть малую толику, но всё же ценных ресурсов. А так же в глобальную облать видимости у нас попадает только одна переменная - та которой мы присвоим наш объект.

 
  // Страховка на случай, если функция с таким именем уже существует:
  if( typeof window.eventHandler !== 'function' ) {
    
     function eventHandler(GLOBAL) {
    
        'use strict';
    
        var util = {
              addListener : null,
              removeListener : null,
              fireEvent  : null
            },
            doc = GLOBAL.document;

        // Нормальные браузеры:
        if (typeof doc.addEventListener === "function") {
            util.addListener = function (type, elt, callback, capture) {        
                elt.addEventListener(type, callback, capture);
            };
            util.removeListener = function (type, elt, callback, capture) {        
                elt.removeEventListener(type, callback, capture);
            };
        // IE:
        } else if (typeof doc.attachEvent === "function") {
            util.addListener = function (type, elt, callback) {        
                elt.attachEvent("on" + type, callback);
            };
            util.removeListener = function (type, elt, callback) {        
                elt.detachEvent("on" + type, callback);
            };
        // Устаревшие браузеры:    
        } else {
            util.addListener = function (type, elt, callback) {        
                elt["on" + type] = callback;
            };
            util.removeListener = function (type, elt, callback) {        
                elt["on" + type] = null;
            };        
        }    
        // Искуственный вызов события:
        if(doc.createEvent) {
            // element : HtmlElement - элемент для которого требуется вызвать событие;
            // eventName: String - имя события без приставки "on" например "mousedown";
            // eventType: String - тип события например "MouseEvent"
            util.fireEvent = function (element, eventName, eventType) {
              var mUp = doc.createEvent(eventType);
              mUp.initEvent(eventName,  true, false);	
              element.dispatchEvent(mUp);
            }
        } else {
            util.fireEvent = function (element, eventName, eventType) {
              var mUp = doc.createEventObject(eventType);	
              element.fireEvent("on" + eventName, mUp);
            }
        }
       
        return util;
    }

  }