title: dojo onClick() event and javascript scope
body: <p>I need some clarification about the function's scope in javascript and the <code>onClick()</code> event, for <code>dojox/mobile/Button</code>.</p>
  
  <p>As the documentation suggests:</p>
  
  <p><a href="https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/Button.html" rel="nofollow">https://dojotoolkit.org/reference-guide/1.10/dojox/mobile/Button.html</a></p>
  
  <p>I do the following, with a function call instead of write it inline:</p>
  
  <h2>html</h2>
  
  <pre><code>button.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Ok', onClick:foo()" style="width:60%;")
  </code></pre>
  
  <h2>js</h2>
  
  <pre><code>script(type="text/javascript").
      require([
          "dojo/on",
          "dijit/registry",
          "dojo/domReady!"
      ], function (on, registry) {
          function foo() {
              // do something
          }
      });
  </code></pre>
  
  <p>it won't work because (as far as I understand) <code>foo()</code> is defined inside another function, hence its scope is limited to that function.</p>
  
  <p>But it if I place <code>foo()</code> at the global level, say:</p>
  
  <pre><code>script(type="text/javascript").
      require([
          "dojo/on",
          "dijit/registry",
          "dojo/domReady!"
      ], function (on, registry) {
      });
      function foo() {
          // do something
      }
  </code></pre>
  
  <p>I get a type error because <code>dojo</code> cannot find the handler:</p>
  
  <blockquote>
    <p>TypeError: this.onClick is not a function</p>
  </blockquote>
  
  <p>Finally, using standard html leads the handler to work:</p>
  
  <pre><code>button.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Procedi'" onClick="foo()" style="width:60%;")
  </code></pre>
  
  <p>but because <code>foo()</code> is outside the <code>dojo</code> require's function I cannot use its tools.</p>
  
  <p>What is the correct approach?</p>
  
  <h1>UPDATE</h1>
  
  <p>I don't know if it's the best way, but this works:</p>
  
  <h2>html</h2>
  
  <pre><code>button#myBtn.mblSimpleDialogButton(data-dojo-type="dojox/mobile/Button" data-dojo-props="label: 'Ok'" style="width:60%;")
  </code></pre>
  
  <h2>js</h2>
  
  <pre><code>var myBtn = dom.byId("myBtn");
  on(myBtn, "click", function (e) {
      console.log("clicked!");
  });
  </code></pre>