Declarative

<script>
    var buttonOnClick = function (ev) {
        console.info('Clicked');
    }
</script>

<button class="btn btn-success" data-dojo-type="dojo-form-controls/Button" data-dojo-props="onClick: buttonOnClick">
    <span class="glyphicon glyphicon-music"></span> Click Click
</button>

Programmatic

var pro1 = new Button({
    type: 'submit',
    'class': 'btn btn-success',
    label: '<span class="glyphicon glyphicon-music"></span> Click Click',
    onClick: function (e) {
        console.info('Clicked?');
        return false;
    }
}, 'pro1');

pro1.startup();

Declarative

<script>
    var checkboxOnChange = function (ev) {
        console.info('Value is: ' + this.get('value'));
    }
</script>

<input type="checkbox" name="dec1" value="on" data-dojo-type="dojo-form-controls/Checkbox" data-dojo-props="onChange: checkboxOnChange" checked>

Programmatic

var pro1 = new Checkbox({
    name: 'pro1',
    value: 'on',
    checked: true,
    onChange: function (e) {
        console.info('Value is: ' + this.get('value'));
    }
}, 'pro1');

pro1.startup();

Declarative

<script>
    var radio1OnChange = function (ev) {
        console.info('Value is: ' + this.get('value'));
    }
    
    var radio2OnChange = function (ev) {
        console.info('Value is: ' + this.get('value'));
    }
</script>

<input type="radio" name="size" value="large" data-dojo-type="dojo-form-controls/Radio" data-dojo-props="onChange: radio1OnChange">
<input type="radio" name="size" value="small" data-dojo-type="dojo-form-controls/Radio" data-dojo-props="onChange: radio2OnChange" checked>

Programmatic

var pro1 = new Radio({
    name: 'size',
    value: 'large',
    checked: true,
    onChange: function (e) {
        console.info('Value is: ' + this.get('value'));
    }
}, 'pro1');

pro1.startup();

Declarative

<select name="dec1" data-dojo-type="dojo-form-controls/Select" required="true" class="form-control">
    <option value="">Please select</option>
    <option value="steak-and-lobster">Steak &amp; Lobster</option>
    <option value="clam-chowder" selected="selected">Clam Chowder</option>
    <option value="pizza" disabled="true">Pizza</option>
    <option value="pasta">Pasta</option>
    <script type="dojo/aspect" data-dojo-method="onChange" data-dojo-args="value">
        console.info('select.onChange(): ' + value);
    </script>
    
    <script type="dojo/watch" data-dojo-prop="value" data-dojo-args="prop, old, val">
        console.info('select.watch("value")', prop, old, val);
    </script>
</select>

Programmatic

var options = [
    { value: '', label: 'Please select' },
    { value: "steak-and-lobster", label: "Steak & Lobster" },
    { value: "clam-chowder", label: "Clam Chowder" },
    { value: "pizza", label: "Pizza", disabled: true },
    { value: "pasta", label: "Pasta" }
];

var pro1 = new Select({
    name: 'pro1',
    value: 'clam-chowder',
    options: options,
    required: true,
    'class': 'form-control',
    onChange: function (value) {
        console.info('select.onChange(): ' + value)
    }
}, 'pro1');

pro1.watch('value', function (prop, old, val) {
    console.info('select.watch("value")', prop, old, val);
});

pro1.startup();

Declarative

<select name="dec1" multiple="true" data-dojo-type="dojo-form-controls/Select" required="true" size="3" class="form-control">
    <option value="">Please select</option>
    <option value="steak-and-lobster" selected="selected">Steak &amp; Lobster</option>
    <option value="clam-chowder" selected="selected">Clam Chowder</option>
    <option value="pizza" disabled="true">Pizza</option>
    <option value="pasta">Pasta</option>
    <script type="dojo/aspect" data-dojo-method="onChange" data-dojo-args="value">
        console.info('select.onChange(): ' + value);
    </script>
    
    <script type="dojo/watch" data-dojo-prop="value" data-dojo-args="prop, old, val">
        console.info('select.watch("value")', prop, old, val);
    </script>
</select>

Programmatic

var options = [
    { value: '', label: 'Please select' },
    { value: "steak-and-lobster", label: "Steak & Lobster" },
    { value: "clam-chowder", label: "Clam Chowder" },
    { value: "pizza", label: "Pizza", disabled: true },
    { value: "pasta", label: "Pasta" }
];

var pro1 = new Select({
    multiple: true,
    name: 'pro1',
    value: ['steak-and-lobster', 'clam-chowder'],
    options: options,
    required: true,
    size: 3,
    'class': 'form-control',
    onChange: function (value) {
        console.info('select.onChange(): ' + value)
    }
}, 'pro1');

pro1.watch('value', function (prop, old, val) {
    console.info('select.watch("value")', prop, old, val);
});

pro1.startup();

Declarative

<script>
    var textareaOnChange = function (value) {
        console.info('select.onChange(): ' + value)
    }
</script>

<textarea name="dec1" data-dojo-type="dojo-form-controls/Textarea" data-dojo-props="onChange: textareaOnChange" class="form-control">Some text</textarea>

Programmatic

var pro1 = new Textarea({
    name: 'pro1',
    value: 'Some text',
    'class': 'form-control'
}, 'pro1');

pro1.startup();

pro1.watch('value', function (name, old, val) {
    console.info('New value is "' + val);
});

Declarative

<script>
    var textboxOnChange = function (value) {
        console.info('select.onChange(): ' + value)
    }
</script>

<input type="text" name="dec1" placeholder="Enter text" data-dojo-type="dojo-form-controls/Textbox" data-dojo-props="onChange: textboxOnChange" class="form-control">

Programmatic

var pro1 = new Textbox({
    name: 'pro1',
    placeholder: 'Enter text',
    'class': 'form-control'
}, 'pro1');

pro1.startup();

pro1.watch('value', function (name, old, val) {
    console.info('New value is "' + val);
});