removeEvent (elem: HTMLElement, eventName: String, func: Function)
elem. DOM node to unsubscribe from the event.
eventName. Event name.
handler. Event handler.
The removeEvent method removes event handler from DOM node.
To execute the example, the HTML page must contain links to PP.js script file and to PP.css styles file, in the <body> tag of the HTML page of the <div> item with the container identifier. In the onload event of the <body> tag it is necessary to specify the call of the createContainer() function. Add the table with two buttons on the page:
function createContainer() {
// Create the first buton
button1 = new PP.Ui.Button();
// Create the second button
button2 = new PP.Ui.Button({
//Set contents of the button
Content: "Button 2"
});
// Create table for buttons
container = new PP.Ui.GridPanel({
// Set parent item
ParentNode: document.getElementById("container"),
// Set object with contents
DataContext: { Data: "data" }
});
// Add buttons in the table
container.add(button1);
container.add(button2);
// Get function of the item contents setup
var func = button1.getFunctionByName("setContent");
// Call the function to set the contents for the first button
func.apply(button1, ["Button 1"]);
}
Create handlers for the following events: hovering the mouse cursor over the 1 button, clicking the mouse button on the 1 button, pressing the mouse button on the 1 button. Add created handlers to the first button:
// Create handler of the mouse cursor hovering over the 1 button event
var mouseOver = function (sender, args) { console.log("Mouse cursor is hovered over the 1 button") };
// Create handler of the 1 button clicking event
var click = function (sender, args) { console.log("The 1 button is clicked") };
// Create handler of the mouse button pressed on the 1 button
var mouseDown = function (sender, args) { console.log("Mouse button is pressed on the 1 button") }
// Add handler of the mouse button clicked on the 1 button
button1.addEvents(button1.getDomNode(), { click: click, mouseover: mouseOver }, false);
// Add handler of the moused button pressed on the 1 button
button1.addEvent(button1.getDomNode(), "mousedown", mouseDown, false);
Click with the mouse button on the 1 button, as a result the console displays information about following events:
The cursor is hovered over the 1 button
The mouse button pressed the 1 button
The button 1 is clicked
Remove the handler of the mouse cursor hovering over the 1 button event:
// Remove the handler of the mouse cursor hovering over the 1 button event button1.removeEvent(button1.getDomNode(), "mouseover", mouseOver);
Click one more time mouse button on the 1 button, as a result the console displays information about events:
The mouse button pressed the 1 button
The button 1 is clicked
Create handler of the mouse cursor hovering over the 2 button event and add it to the 2 button:
// Create handler of the mouse cursor hovering over the 2 button event
var delegate = new PP.Delegate(function (sender, args) { console.log("Cursor is hovered over the 2 button") });
// Set handler of the mouse cursor hovering over the 2 button event
button2.addEventHandler("MouseOver", delegate);
Click the mouse button on the 2 button, as a result the console displays information about the cursor hovering over the 2 button event:
Cursor is hovered over the 2 button
Check whether the 2 button is subscribed to the events:
// Check whether the 2 button is subscribed to the events
if (button2.getIsBinded()) {
console.log("The 2 button is subscribed to all events");
} else {
console.log("The 2 button is unsubscribed from all events");
}
As a result the console displays the result of the 2 second button subscription to events check:
The 2 button is subscribed to all events
Unsubscribe the 2 button from all events the component subscribed for:
// Unsubscribe the 2 button from all events the button subscribed for button2.unBindEvents();
Click the mouse button on the 2 button. Nothing happens because the 2 button is unsubscribed from all events.
Subscribe the 2 button to all events one more time:
// Subscribe the 2 button to all standard events button2.bindEvents();
As a result the button will again react to all events it is subscribed for.
Remove the handler of the mouse cursor hovering over the 2 button event:
// Remove the handler of the mouse cursor hovering over the 2 button event
button2.removeEventHandler("MouseOver", button2.MouseOver);
As a result on hovering the mouse cursor over the 2 button, nothing is displayed.
Add new class for the 1 button, create style which text is in blue and set the color to all table items which have the newClass class. Set the style with purple color to the 2 button and refresh the style:
// Add new class to the DOM node of the 1 button
button1.addClass("newClass");
// Create style which text is in blue
var style = new PP.Style({ Font: { Color: "#60A1FA" } });
// Set new style to all table items which have the newClass class
container.addStyleBySelector(style, "div[class*='newClass']", true);
// Set new style to the 2 button and refresh its style
button2._Style = { Release: new PP.Style({ Font: { Color: "#A020F0" } }) };
button2.refreshStyle();
As a result, the 1 button is in blue and the 2 button is in violet:
See also: