First steps with Windows 8 development - Build Windows 8 Apps with HTML5 and JavaScript - page 111

// Button functions
function doClickAdd() {
var alertDialog = new Windows.UI.Popups.MessageDialog("Add button clicked!");
alertDialog.showAsync();
}
function init() {
var page = WinJS.UI.Pages.define("default.html", {
ready: function (element, options) {
document.getElementById("cmdAdd").addEventListener("click", doClickAdd,
false);
}
});
}
Expressed as an immediate function, the code defines a page and a few event handlers for it.
When the page is ready for user interaction, for example, the code associated with the ready event
runs. All it does is add a handler to the click event of each of the previously defined buttons. Let's
examine, in detail, the code for the click event:
document.getElementById("cmdAdd").addEventListener("click", doClickAdd);
First, the code retrieves the HTML element in the page whose ID equals the string cmdAdd .
This HTML element is added as an event listener for the “click” event. An event listener is a piece of
JavaScript code that is automatically run when the user triggers the specified event—for example,
clicks or taps the button. In this case, the click of the button labeled “Add” runs the doClickAdd
function. In particular, the doClickAdd function displays a message, as shown in Figure 5-7.
FIGURE 5-7 The sample App bar in action.