Диджит HelloWorld (Дубль 5: Обработка событий в диджитах)

В качестве еще одного улучшения диджита HelloWorld рассмотрим возможность обработки таких событий DOM, как щелчок мыши или наведение указателя мыши на диджит. Инструментарий Dojo упрощает возможность связывания событий с диджитом. Для этого нужно просто указать пары ключ/значение в форме DOMEvent:dijitMethod внутри атрибута dojoAttachEvent, который является частью шаблона. Допускается указывать несколько пар ключ/значение или более одного типа события DOM, отделяя их друг от друга запятыми. Давайте посмотрим, как можно использовать атрибут dojoAttachEvent для применения заданного стиля, определенного в виде класса в таблице стилей, при появлении события mouseover, и удаления стиля при появлении события mouseout. Поскольку элементы DIV занимают всю ширину кадра, мы заменим его элементом SPAN, чтобы события от мыши возникали только тогда, когда указатель находится непосредственно над текстом. Давайте применим стиль pointer к указателю.

Изменения в стиле диджита минимальны. Мы использовали ссылку на элемент SPAN вместо элемента DIV и изменили форму указателя мыши на pointer:
span.hello_class {
cursor: pointer;
color: #009900;
}

Файл JavaScript, представленный в примере 12.6, включает в себя измененную строку шаблона, демонстрируя, насколько просто использовать атрибут dojoAttachEvent.
Пример 12.6.


HelloWorld (Дубль 5: dojoAttachEvent)
dojo.provide("dtdg.HelloWorld");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.declare(
"dtdg.HelloWorld",
[dijit._Widget, dijit._Templated],
{
templateString :
" dojoAttachEvent='onmouseover:onMouseOver, onmouseout:onMouseOut'>
Hello World
",
onMouseOver : function(evt) {
dojo.addClass(this.domNode, 'hello_class');
console.log("applied hello_class...");
console.log(evt);
},
onMouseOut : function(evt) {
dojo.removeClass(this.domNode, 'hello_class');
console.log("removed hello_class...");
console.log(evt);
}
}
);

Убедились, как это просто? Когда указатель мыши наводится на текст в элементе SPAN, возникает событие onmouseover и применяется стиль с помощью функции dojo.addClass из библиотеки Base. Затем, когда возникает событие onmouseout, стиль удаляется. Отличная штука!

Обратили ли вы внимание на то, что обработчики событий принимают аргумент evt, – может быть, в нем передается важная информация о событии? Возможно, вы уже догадались, что за кулисами работает функция dojo.connect, которая стандартизирует объект события.


Ниже приводится вывод, полученный в консоли Firebug в ходе работы этого программного кода, который наглядно демонстрирует, какая информация передается обработчикам событий диджита:
applied hello_class...
mouseover clientX=64, clientY=11
removed hello_class clientX=65, clientY=16
mouseover clientX=65, clientY=16

Кроме того, для достижения полной ясности, обратите внимание, что в предыдущем примере событие onmouseover отображено на метод onMouseOver, а событие onmouseout – на метод onMouseOut. Это не является обязательным требованием, но вполне разумно следовать такому правилу именования, так как это повышает удобочитаемость программного кода. Кроме того, важно заметить, что такие события, как onmouseover и onmouseout, являются событиями DOM, тогда как onMouseOver и onMouseOut – это методы, ассоциированные с данным конкретным диджи!

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

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

Статьи из раздела Dojo на эту тему:
Анатомия библиотеки Dijit
Быстрое создание прототипов виджетов в разметке
Ваш первый диджит: HelloWorld
Диджит HelloWorld (Дубль 1: Основа)
Диджит HelloWorld (Дубль 2: Изменение шаблона)

Вернуться в раздел: Dojo / Анатомия Dijit и жизненный цикл