removeEvent (elem: HTMLElement, eventName: String, func: Function)
elem. DOM-вершина для отписки от события;
eventName. Имя события;
handler. Обработчик события;
Метод removeEvent удаляет обработчик события у 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"),
// Устанавливаем объект с данными
DataContext: { Data: "data" }
});
// Добавляем кнопки в таблицу
container.add(button1);
container.add(button2);
// Получаем функцию установки содержимого элемента
var func = button1.getFunctionByName("setContent");
// Вызываем функцию для установки содержимого 1 кнопке
func.apply(button1, ["Кнопка 1"]);
}
Создаем обработчики следующих событий: наведение курсора мыши на кнопку 1, нажатие кнопки мыши по кнопке 1, зажатие кнопки мыши на кнопке 1. Добавляем созданные обработчики к кнопке 1:
// Создаем обработчик события наведения курсора мыши на кнопку 1
var mouseOver = function (sender, args) { console.log("Произошло наведение курсора на кнопку 1") };
// Создаем обработчик события нажатия на кнопку 1
var click = function (sender, args) { console.log("Произошло нажатие по кнопке 1") };
// Создаем обработчик события зажатия кнопки мыши на кнопке 1
var mouseDown = function (sender, args) { console.log("Произошло зажатие кнопки мыши на кнопке 1") }
// Добавляем обработчик события нажатия кнопки мыши по кнопке 1
button1.addEvents(button1.getDomNode(), { click: click, mouseover: mouseOver }, false);
// Добавляем обработчик события зажатия кнопки мыши на кнопке 1
button1.addEvent(button1.getDomNode(), "mousedown", mouseDown, false);
Нажимаем кнопкой мыши на кнопке 1, в результате в консоль будет выведена информация о событиях:
Произошло наведение курсора на кнопку 1
Произошло зажатие кнопки мыши на кнопке 1
Произошло нажатие по кнопке 1
Удаляем обработчик события наведения курсора мыши на кнопку 1:
// Удаляем обработчик события наведения курсора мыши на кнопку 1 button1.removeEvent(button1.getDomNode(), "mouseover", mouseOver);
Снова нажимаем кнопкой мыши на кнопке 1, в результате в консоль будет выведена информация о событиях:
Произошло зажатие кнопки мыши на кнопке 1
Произошло нажатие по кнопке 1
Создаем обработчик события наведения курсора мыши на кнопку 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" } });
// Устанавливаем новый стиль всем элементам таблицы, которые имеют класс "newClass"
container.addStyleBySelector(style, "div[class*='newClass']", true);
// Устанавливаем новый стиль 2 кнопке и обновляем ее стиль
button2._Style = { Release: new PP.Style({ Font: { Color: "#A020F0" } }) };
button2.refreshStyle();
В результате у кнопки 1 текст будет синего цвета, а у кнопки 2 текст будет фиолетового цвета:
См. также: