addEventHandler(eventName: String, handler: PP.Delegate);
eventName. Имя события;
handler. Обработчик события.
Метод addEventHandler добавляет обработчик события на DOM-вершину.
Для выполнения примера необходимо наличие на html-странице ссылок на файлы сценария PP.js и файл стилей PP.css, в теге <body> html-страницы элемента <div> с идентификатором «container». В событии onload тега <body> необходимо указать вызов функции createContainer(). Добавляем на страницу таблицу с 2 кнопками:
function createContainer() {
// Создаем 1 кнопку
button1 = new PP.Ui.Button();
// Создаем 2 кнопку
button2 = new PP.Ui.Button({
//Устанавливаем содержимое кнопки
Content: "Кнопка 2"
});
// Создаем таблицу для кнопок
container = new PP.Ui.GridPanel({
// Устанавливаем родительский элемент
ParentNode: document.getElementById("container"),
});
// Добавляем кнопки в таблицу
container.add(button1);
container.add(button2);
}
Создаем обработчик события наведения курсора мыши на кнопку 2 и добавляем его к кнопке 2:
// Создаем обработчик события наведения курсора мыши на кнопку 2
var delegate = new PP.Delegate(function (sender, args) { console.log("Курсор наведен на кнопку 2") });
// Устанавливаем обработчик события наведения курсора мыши на кнопку 2
button2.addEventHandler("MouseOver", delegate);
Нажимаем кнопкой мыши на кнопку 2, в результате в консоль будет выведена информация о событии наведения курсора на кнопку 2:
Курсор наведен на кнопку 2
Проверяем подписана ли кнопка 2 на события:
// Проверяем, подписана ли кнопка 2 на события
if (button2.getIsBinded()) {
console.log("Кнопка 2 подписана на все события");
} else {
console.log("Кнопка 2 отписана от всех событий");
}
В результате в консоль будет выведен результат проверки подписки кнопки 2 на события:
Кнопка 2 подписана на все события
Отписываем кнопку 2 от всех событий, на которые подписан компонент:
// Отписываем кнопку 2 от всех событий, на которые она подписана button2.unBindEvents();
Нажимаем кнопкой мыши на кнопку 2. Ничего не произойдет, потому что кнопка 2 отписана от всех событий.
Снова подписываем кнопку 2 на все события:
// Подписываем кнопку 2 на все стандартные события button2.bindEvents();
В результате кнопка снова будет реагировать на все события, на которые подписана.
Удаляем обработчик события наведения курсора мыши на кнопку 2:
// Удаляем обработчик события наведения курсора мыши на кнопку 2
button2.removeEventHandler("MouseOver", button2.MouseOver);
В результате при наведение курсора мыши на кнопку 2 никакие сообщения выводиться не будут.
Добавляем новый класс кнопке 1, создаем стиль, у которого текст имеет синий цвет и устанавливаем этот цвет всем элементам таблицы, которые имеют класс "newClass". Устанавливаем стиль с фиолетовым текстом кнопке 2 и обновляем ее стиль:
// Добавляем новый класс DOM-вершине кнопки 1
button1.addClass("newClass");
// Создаем стиль, у которого текст имеет синий цвет
var style = new PP.Style({ Font: { Color: "#60A1FA" } });
// Устанавливаем новый стиль 2 кнопке и обновляем ее стиль
button2._Style = { Release: new PP.Style({ Font: { Color: "#A020F0" } }) };
button2.refreshStyle();
В результате у кнопки 1 текст будет синего цвета, а у кнопки 2 текст будет фиолетового цвета:
См. также: