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

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;

  }

 

}

 

Возможно Вас заинтересуют эти материалы

Javascript выпадающий список

Часто на форумах втречаются вопросы как сделать динамический Javascript выпадающий список? Да ещё с возможностью

Javascript динамическая html таблица

Понадобилось мне в одном проекте на днях сделать html таблицу, которую бы выводил серверный php

Свои события или observer на Javascript

В этой статье, я по сути "убил двух зайцев" - Написал интересный и полезный Javascript