фон
Есть несколько незначительных проблем при связывании событий с использованием addeventlistener () или attedevent () в javaScript:
1. Анонимная функция, добавленная с использованием addeventListener () или atchentevent (), не может быть удалена.
Кода кода следующая: var octn = document.getElementbyId ('btn');
octent.addeventlistener ('click', function () {
оповещение (кнопка нажата »)
},ЛОЖЬ)
optn.reomveeventlistener ('click', function () {
оповещение (кнопка нажата »)
},ЛОЖЬ)
// событие на oTpen не может быть удалено, потому что анонимная функция передается в
2. В IE6-IE8 задача выполнения нескольких событий обратного порядка ограничена с использованием AttedEvent ().
Кода -копия выглядит следующим образом:
var octn = document.getElementById ('btn');
optn.attachevent ('onclick', function () {
предупреждение (1)
})
optn.attachevent ('onclick', function () {
предупреждение (2)
})
optn.attachevent ('onclick', function () {
предупреждение (3)
})
// EIE9+ Заказ о выполнении 1, 2, 3
// заказы на выполнение в соответствии с IE6-IE8 3, 2, 1
Решить проблему
Я хочу написать модуль привязки Cross-Browser Event, чтобы его можно было повторно использовать позже, и в то же время я хочу решить проблему апелляции. JQuery использует очереди событий и механизмы кэширования данных для решения этой проблемы. Я посмотрел на соответствующий исходный код. Это было действительно сложно. Я сам попробовал некоторые методы и едва реализовал их. Код опубликован в объектно-ориентированном, и я не хочу, чтобы люди видели его сложным, поэтому я превращаю его в функции, чтобы организовать его.
Кода -копия выглядит следующим образом:
/*Интерфейс события привязки
*
*@param {dom-dom} и {type-string} и {fn-function} необязательные параметры {fnname-string}
*@execute Создайте очередь событий и добавьте ее в свойства объекта DOM.
Добавить обработчик событий (функция) в очередь событий
Идентификатор может быть добавлен в обработчик событий, чтобы удалить указанный обработчик событий
*/
функция Bind (dom, type, fn, fnname) {
dom.eventqueue = dom.eventqueue || {};
dom.eventqueue [type] = dom.eventqueue [type] || {};
dom.handler = dom.handler || {};
if (! fnname) {
var index = queueldength (dom, type);
dom.eventqueue [type] ['fnqueue'+index] = fn;
}
еще {
dom.eventqueue [type] [fnname] = fn;
};
if (! dom.handler [type]) bindevent (dom, type);
};
/*Связанное событие
*
*@param {dom-dom} и {type-string}
*@Execute события связаны только один раз, обработчик используется для обработчиков перемещения (функции) в очереди событий выполнения
*@caller bind ()
*/
функция bindEvent (dom, type) {
dom.handler [type] = function () {
для (var guid in dom.eventqueue [type]) {
dom.eventqueue [type] [guid] .call (dom);
}
};
if (window.addeventListener) {
dom.addeventlistener (type, dom.handler [type], false);
}
еще {
dom.attachevent ('on'+type, dom.handler [type]);
};
};
/*Удалить интерфейс для события
*
*@param {dom-dom} и {type-string} необязательные параметры {fnname-функция}
*@execute Если нет идентификатора, выполните unbindevent ()
Если есть идентификатор, указанный обработчик событий удален. Если длина очереди событий составляет 0, unbindevent () выполняется.
*/
Функция unbind (dom, type, fnname) {
var hasqueue = dom.eventqueue && dom.eventqueue [type];
if (! hasqueue) возврат;
if (! fnname) {
unbindevent (dom, type)
}
еще {
удалить dom.eventqueue [type] [fnname];
if (queueldength (dom, type) == 0) unbindevent (dom, type);
};
};
/*Удалить событие
*
*@param {dom-dom} и {type-string}
*@Execute Удаляет обработчик связанных событий и очищает очередь событий
*@Caller unbind ()
*/
функция unbindevent (dom, type) {
if (window.removeeventlistener) {
dom.removeeventlistener (type, dom.handler [type])
}
еще {
dom.detachevent (type, dom.handler [type])
}
Удалить dom.eventqueue [type];
};
/*Длина очереди событий судьи
*
*@param {dom-dom} и {type-string}
*@caller bind () unbind ()
*/
Функция queueldength (dom, type) {
var index = 0;
для (var длина в dom.eventqueue [type]) {
index ++;
}
Индекс возврата;
};
Как использовать
Кода -копия выглядит следующим образом:
var octn = document.getElementById ('btn');
// Связанное событие
// Привязано три функции нажатия событий одновременно для кнопки
// Приказ на выполнение в соответствии с IE6-IE8 остается неизменным
Bind (optn, 'click', function () {
предупреждение (1);
})
Bind (optn, 'click', function () {
предупреждение (2);
}, 'myfn')
Bind (optn, 'click', function () {
предупреждение (3);
})
// Удалить событие
// Удалить все функции Click Click Event, поддержка удаления анонимных функций
Несмотря на то, что вы можете
// Удалить только функции события с идентификатором MYFN
Несмотря на то, что (optn, 'click', 'myfn')
Идеи программы
Основная идея программы состоит в том, чтобы добавить очередь событий в качестве атрибута объекта элемента DOM в элемент DOM без загрязнения глобальной среды. Это может решить проблему хранения данных множества функций событий различных элементов DOM, привязывающегося к различным типам событий.
Кода -копия выглядит следующим образом:
// очередь событий на элементе DOM
Dom {
EventQueue: {
'нажмите': {
fnqueue1: функция,
myfn: функция,
fnqueue3: функция
}
'mouseover': {
fnqueue1: функция,
fnqueue2: функция
}
}
}
Каждый раз функция события сначала добавляется в очередь событий соответствующего типа события, и событие связано только один раз. Когда событие запускается, функция события обработчика выполняется, и обработчик пересекает функцию события в очереди события выполнения.
unbind () Удаляет все связанные функции события, если нет входящего идентификатора, поддерживает удаление анонимных функций и удаляет указанные функции события, если есть идентификатор.
Логика программы не сложна, и могут быть ошибки и проблемы с производительностью. Если вы заинтересованы, вы можете направлять и общаться.