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; } }
Информация копипастерам
Внимание! Копирование контента с сайта, возможно только с разрешения администратора. Т.е. Меня! Я скорее всего разрешу Вам это сделать, в обмен на живую ссылку, на статью оригинал.