Управление событиями, Объект для работы с обработчиками событий
Полный список свойств и функций, а так же общие правила их использования, см. здесь: Краткий обзор и правила, список функций VcorpJS.
Управление событиями возможно до и после инициализации объекта VcorpJS
.EH
Объект .EH выполняет контролируемое управление событиями (кросс-браузерное), а именно:
- гарантируется вызов обработчиков именно в том порядке, в каком они задавались (если у объекта установлено несколько обработчиков одного типа).
- корректно передается ссылка this (например, в случае IE) элемента, на который установлен обработчик.
- ссылки на обработчики хранятся в самом HTML-объекте (свойства с префиксом "pb_EV"), поэтому, при удалении объекта из DOM (в любой момент), все установленные на нём обработчики автоматически уничтожаются.
- если обработчик хочет предотвратить запуск следующих за ним обработчиков этого-же события в этом же HTML-элементе, то он может поставить специальный флаг event.stopNow (это не отменяет всплывание события и действие браузера по-умолчанию).
- если обработчик хочет предотвратить действие браузера по умолчанию и всплывание события, то он может просто вернуть false (это не отменяет выполнение следующих за ним обработчиков этого-же события в этом же HTML-элементе).
- при возникновении любого события от пользователя, автоматически переустанавливаются текущие внутренние координаты мыши (см.функции .gMouseX() и .gMouseY() ).
Объект события event, при необходимости, корректно расширяется следующими свойствами:
- .target и .relatedTarget
- .which - только для событий от мыши (1 - левая, 2 - средняя, 3 - правая)
- .pageX и .pageY , .clientX и .clientY
- у сенсорных экранов значения берутся из .targetTouches[0].pageX и .targetTouches[0].pageY соответственно (если было одиночное касание .targetTouches.length == 1).
Напомню, что никто не отменяет при желании ручные действия через универсальный JavaScript:
- остановка всплывания события - event.stopPropagation (для старых IE event.cancelBubble = true)
- отмена действия браузера по-умолчанию - event.preventDefault() (для старых IE event.returnValue = false)
Автор не стал отдельно оформлять внутреннюю служебную функцию, которая выполняет эти действия по выбору и кросс-браузерно, чтобы не потерять наглядность в угоду компактности. Но она доступна через недокументированный метод VcorpJS._(24)(event,flag) - где flag может иметь значения: 1 (остановка всплытия), 2 (отмена действия по умолчанию), 0 (и то и другое). Не рекомендуется использовать недокументированные методы, так как они являются частью внутренней реализации VcorpJS и могут менять своё поведение.
.EH.add( node , eventName , handler )
Устанавливает обработчик handler для события eventName для HTML-объекта node
node - это ссылка на объект или его текстовый id
eventName - тип события (без "on"), например "click"
handler - обработчик события - функция, вызываемая объектом .EH при наступлении события.
Функция-обработчик может быть передана как текстовая строка с JavaScript-кодом, в этом случае используется конструктор Function() и внутри передаваемой строковой функции объект event доступен через переменную-параметр "e"
Функция возвращает true если обработчик установлен, иначе ничего не возвращает (undefined).
При успешном добавлении обработчика(ов), у объекта node появляются служебные свойства с префиксом "pb_EV".
Примечание для профи: если обработчики устанавливаются через addEventListener(), то туда передаётся false в качестве 3-го параметра (так как объект .EH уже умеет сам и позволяет другим обработчикам контролировать вызовы других обработчиков, причём кросс-браузерно - см. описание выше).
var $ = VcorpJS;
$.EH.add(document, "keydown", myFunction);
$.EH.add("id_button3", "click", "if (e.which==2) e.stopNow=true;");
/* Немного надуманный пример валидации формы */
$.EH.add($.qS("#id_myForm .address"), "blur", function (e) {
var checked = myCheck(this.value);
this.style.borderColor = checked ? "red" : "#808080";
$.id("id_myForm").checkedAddress = checked;
});
.EH.remove( node , eventName , handler )
Удаляет установленный ранее обработчик handler для события eventName у HTML-объекта node
node - это ссылка на объект или его текстовый id
eventName - тип события (без "on"), например "click"
handler - ссылка на функцию-обработчик, которая была указана при добавлении обработчика.
Функция возвращает true при успешном удалении обработчика события, при этом подчищает объект node от служебных свойств с префиксом "pb_EV".
Функция возвращает false, если node не найден или handler не функция.
Функция ничего не возвращает (undefined), если такой обработчик не найден или уже был удалён ранее.
VcorpJS.EH.remove(document, "keydown", myFunction);
.addEH( eventName , handler , arrayNodes)
Установка одного обработчика handler для событий eventName у группы объектов arrayNodes
eventName - тип события (без "on"), например "click"
handler - обработчик события - функция, вызываемая объектом .EH при наступлении события.
arrayNodes - это массив ссылок на объекты или их текстовых id
если какой-либо из объектов не найден, элемент массива игнорируется.
Функция возвращает количество установленных обработчиков (в идеале совпадает с размерностью массива).
VcorpJS.addEH("keydown", myFunction, [ myObj, "id_parentBlock" , document ] );
.removeEH( eventName , handler , arrayNodes)
Удаление одного обработчика handler для событий eventName у группы объектов arrayNodes
eventName - тип события (без "on"), например "click"
handler - ссылка на функцию-обработчик, которая была указана при добавлении обработчиков.
arrayNodes - это массив ссылок на объекты или их текстовых id
если какой-либо из объектов не найден, элемент массива игнорируется.
Функция возвращает количество удалённых обработчиков (в идеале совпадает с размерностью массива).
VcorpJS.removeEH("keydown", myFunction, [ myObj, "id_parentBlock" , document ] );
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.