addEventHandler(eventName: String, handler: PP.Delegate);
eventName. Event name
handler. Event handler.
The addEventHandler method adds an event handler to 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 button 1
button1 = new PP.Ui.Button();
// Create button 2
button2 = new PP.Ui.Button({
//Set button contents
Content: "Button 2"
});
// Create a table for buttons
container = new PP.Ui.GridPanel({
// Set parent element
ParentNode: document.getElementById("container"),
});
// Add buttons to the table
container.add(button1);
container.add(button2);
}
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 a new class for DOM node of button 1
button1.addClass("newClass");
// Create a style which makes colors text with blue
var style = new PP.Style({ Font: { Color: "#60A1FA" } });
// Set a new style for button 2 and refresh button 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: