Rating.onpreviewchange event

Raised when the user is choosing a new tentative Rating.


<div data-win-control="WinJS.UI.Rating" 
    data-win-options="{onpreviewchange : handler}">
function handler(eventInfo) { /* Your code */ }

// addEventListener syntax
rating.addEventListener("previewchange", handler);
rating.removeEventListener("previewchange", handler);

Event information

Synchronous No
Bubbles No
Cancelable Yes

Event handler parameters

  • eventInfo
    Type: CustomEvent**

    An object that contains information about the event. The detail property of this object contains the following sub-properties:


Setting event handlers declaratively (in HTML)

To set the event handler declaratively, it must be accessible to the global scope, and you must also call WinJS.Utilities.markSupportedForProcessing or WinJS.UI.eventHandler on the handler. You can make the handler accessible to the global scope by using WinJS.Namespace.define. For more information, see How to set event handlers declaratively.


This example defines a handler for the onpreviewchange event. When the user is choosing a new rating value, it outputs the tentative rating value (obtained from eventInfo.detail.tentativeRating) to a div element.

function previewChanged(eventInfo) {
    var previewChangeOutputDiv = document.getElementById("previewChangeOutputDiv");
    previewChangeOutputDiv.innerText = eventInfo.detail.tentativeRating;


WinJS.Namespace.define("startPage", {
    previewChangedHandler: previewChanged

The next example creates Rating control, sets the onpreviewchange event, and creates the output div in HTML.

<div id="previewChangeRating" 
    data-win-options="{onpreviewchange: startPage.previewChangedHandler}">
<div id="previewChangeOutputDiv">&nbsp;</div>


Minimum WinJS version

WinJS 1.0



See also


Quickstart: Adding WinJS controls