Пакетная обработка событий DOM

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

С помощью NodeList можно реализовать пакетную обработку следующих событий DOM:
• onmouseover
• onmouseenter
• onmousedown
• onmouseup
• onmouseleave
• onmouseout
• onmousemove
• onfocus
• onclick
• onkeydown
• onkeyup
• onkeypress
• onblur

В качестве примера рассмотрим случай захвата событий перемещения указателя мыши над определенным элементом. Для этого достаточно просто определить функцию обработки события onmouseover, как показано ниже:
dojo.query(".foobar").onmousemove(
function(evt) {
console.log(evt);// здесь можно реализовать что-нибудь более интересное!
}
);

Объекты событий, доступные через методы модели событий DOM Event, являются стандартизованными, потому что подключение обработчиков выполняется внутри с помощью функции dojo.connect.


Модель событий, реализованная в виде dojo.connect, стандартизована в соответствии со спецификацией консорциума W3C. В настоящее время нет прямого способа управлять или разрывать соединения, созданные с помощью метода connect объекта NodeList, хотя в одной из будущих версий 1.x такая возможность может появиться.

Если вам недостаточно того, что соединения разрываются автоматически во время выгрузки страницы, то можно воспользоваться обычной функцией dojo.connect внутри метода forEach класса NodeList при условии, что у вас действительно есть веские причины, вынуждающие вас самостоятельно управлять соединениями.

Например, когда необходимо вручную управлять соединениями из предыдущего примера, это можно сделать примерно следующим образом:
var handles =
dojo.query("a").map(function(x) {
return dojo.connect(x, "onclick",
function(evt) { /* ... */ });
});
/* Где-то дальше в приложении... */
dojo.forEach(handles, function(x) {
dojo.disconnect(x);
});

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела Dojo на эту тему:
NodeList
Анимация
Аргументы в стиле «функции в виде строк»
Длинный и нестабильный способ
Методы, напоминающие методы массивов

Вернуться в раздел: Dojo / Манипулирование узлами