dojo multiple evnet bind test

by seo gyeongseok

HTML

<button type='button' id='testButton'
        data-dojo-type='dijit/form/Button'></button>
<br>

<label>Event TEST Input Box: </label>
<input type='text'name='test' id='testInput'
       data-dojo-type='dijit/form/TextBox'/>
<br>
'keyup, change' result: <label id='testResult1'></label><br>
'keyup' result: <label id='testResult2'></label><br>
'change' result: <label id='testResult3'></label><br>

JavaScript

require(['dojo/parser',
         'dijit/registry',
         'dojo/dom',
         'dojo/on'],
function(parser,
         registry,
         dom,
         on) {
    parser.parse().then(function(instances) {
        var button = registry.byId('testButton');
        var input = registry.byId('testInput');
        var result1 = dom.byId('testResult1');
        var result2 = dom.byId('testResult2');
        var result3 = dom.byId('testResult3');

        console.log(button, input, result1, result2, result3);
        
        // button click then set input text value
        button.set('label', 'SET "TEST" in input');
        on(button, 'click', function () {
            input.set('value', 'TEST');
        });
    
        // input value is change or keyup then result update
        on(input, 'keyup, change', function () {
            console.log('keyup, change');
            result1.innerHTML = this.get('value');
        });
        on(input, 'keyup', function () {
            console.log('keyup');
            result2.innerHTML = this.get('value');
        });
        on(input, 'change', function () {
            console.log('change');
            result3.innerHTML = this.get('value');
        });
    });
});